giganetwebhosting.com/support - Unlimited Web Hosting Made Easy - Free Domain name
1-888-524-7148
Giganetwebhosting.com Blog
Blog about Web Hosting, Domain Names, Web Sites, Internet presence.
Learning CSS - Tutorial
Cascading Style Sheets standards have been around for a long time, but many site owners are still a little scared by the term. It really isn't all that complex. What they basically are is a separate set of instructions, either in an external file, or embedded in the page coding that instructs a browser how to display certain elements - text, tables etc.
CSS is a very powerful tool, but added to that, using css can also be a huge time saver. Here's a scenario: you have a site of 40 pages and the main body text you use is 10pt. Arial. This would mean a lot of this kind of repetition your coding:
<p><font face="Arial" size="2">Here is some text</font></p>
If you wished to change the font to Verdana, you would need to go through all 40 pages to change over to the new font. The proper use of CSS (using an external style sheet) would mean that you would only need to make the change in one file, and the site would update globally with the changes. Also, CSS makes your pages a lot lighter and faster to download as the same instructions don't need to be repeated throughout the coding.
There are 3 types of CSS:
1.Inline Style
Can be added to any individual html tag in a page.
2.Embedded Style Sheets
For controlling the display of an individual page by adding instructions between the <head> and </head> tags
3.Linked External Style Sheets
The best kind - control an entire site from one file!
Where does the Cascading come in?
Given that styles can be implemented in the above 3 ways, the "cascading" refers to the hierarchy of control:
- Inline styles take precedence
- Then Embedded styles come next
- Linked external style will apply if neither In line or Embedded instructions are present
Exercise - using an external style sheet
Create a text file and save it in your web as sample.css. In the text file, place this coding:
BODY {
font-family: Verdana;
font-size: 10pt;
}
Next, start a new web page and in between the <head> and </head> tags, place the following line.
<link rel="stylesheet" type="text/css" href="/path-to/sample.css">
This line of code "attaches" the sample.css file. It tells the browser to refer to the CSS file for instructions on how to display elements.
Remember to replace "path-to" with the actual path to the file. For example, if the web page is in the same folder as the sample.css file, the path to it would be simply "sample.css". If the web page were in another folder and the sample.css file was in the root directory, the path would be "/sample.css".
After you've ensured that both files are saved and the path is correct, close the web page and then open it again. Try typing some text on the new page and then previewing it. You'll notice that the text is now in Verdana 10pt. instead of the standard Times New Roman 12pt. Now try changing the font name to Arial and size to 12pt in sample.css, save it, then preview the page again (you may need to close the web page and re-open it).
Style sheets can be very simple or very complex depending on the design of your site. Let's take it a few steps further:
BODY {
background-color: #ffffff ;
margin-bottom: 0%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #273A5B;
}
- The background-color sets the background color for the page
- The margin-x sets the size of the margins around the page
- The multiple fonts are listed in case a visitor doesn't have a particular font on their system; the next font type will be used
- The font-size is, well, the font size...
- The font-color is the color that the font will be displayed in using hex values.
In the above examples, we've only applied styles to the basic body element; but there's so much more you can do. Let's say that the main body of your page is in 12pt. Verdana, but you had common table elements such as a menu that used 10 pt. Verdana - and in a different color. Your style sheet would look something like this:
BODY {
background-color: #ffffff;
margin-bottom: 0%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #A2C1DB;
}
TD {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}
The "TD" stands for Table Data.
Using Style Sheets gives you so much flexibility. Here's another scenario. Your main body text is in 12 pt. Verdana, your menu table text is in 10pt.; but you have other tables too that use 8pt. Since you've already used the TD element in your style sheet, you'll have to invent what's called a "class". You can give a class whatever name you want. Here's an example of this scenario:
BODY {
background-color: #ffffff ;
margin-bottom: 0%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #A2C1DB;
}
TD {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}
.smallblack {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
}
Note: when making your own classes, they must be named one word and with a preceding "." as shown above.
If you're using FrontPage or Dreamweaver, applying the new class is easy - simply select it from the dropdown selector on the menu bar - it's usually on the left hand side in FrontPage. If you're coding by hand, you'll need to add a class="smallblack" (without the preceding ".") to the element.
These examples are just to whet your appetite. With CSS you can customize just about any element on your web pages; from headings to scrollbars and form background colors to classy image borders.
If you're looking for free learning resources relating to CSS; try W3Schools. They've got a stack of information; including compatibility charts and a full listing of all the various CSS effects and formatting styles you can use.
Our web hosting plans support all technologies.
Blog Categories
Showcase
-
We Enter the BITCOIN world. WE ACCEPT BITCOINS FOR WEB HOSTING AND DOMAIN NAMES!
We start from today to accept bitcoins as payment on all our services. All of you that use Bitcoins, you are now able to pay us directly with Bitcoins, without any expenses from bitcoin to U ...
-
JOOMLA VS WORDPRESS FOR HEAVY ADVANCED SITES
It is well known that wordpress is the best CMS for simple sites and for new users that want to develop a site or blog without special knowledge.But what is the case if a design developer want to make ...
-
How to Secure Your WordPress Site or Blog.
3. Hide WordPress Version The WP version can spark an idea for the hacker to break in, if you are running an older version of WP and everyone can know what version is, you are in grea ...
-
How To Migrate your DRUPAL Website easy and fast!
On giganetwebhosting.com account: Upload your folder with the complete drupal installation to your home-directory. Once done, go to cPanel -> MySQL on the new host, create a new mysql ...
-
Awesome New Domains Registration Now!
Awesome Brand New domains are ready for registration now! Register your new domain now and get 3 Months UNLIMITED Free Hosting and only $1.90 per month after the 3 months. CLICK HE ...
Random Post
*Anytime money back.
We are in Web Hosting business since 1997 and we know your needs, we do our best for customer satisfaction. Giganetwebhosting.com offers a 'No Questions Asked' Anytime money back guarantee with all unlimited web hosting plans. If you decide to cancel your account at anytime Giganet web hosting will refund you for the remainder of your term, excluding domain registration fees, for which we incur a cost. It's like a warranty that never expires! Your satisfaction is our top priority, and we're confident that you'll be pleased with our services. Best web hosting risk free !
Server Security
Our servers have special security applications that ensure a secure and reliable hosting environment. Our 24/7 network monitoring ensures that, if an issue does arise, we address it immediately. We provide many additional services and modifications to the default Operating System and control panel installation which greatly enhances the security, reliability, and compatibility of our servers and softwareand offer best web hosting solutions available to our clients. Secure and safe unlimited web hosting, Vps hosting and dedicated servers hosting.
Low Price Lifetime Guarantee
We offer you a price guarantee for any future account renewals. We guarantee that your renewal price will be the same or less for all unlimited web hosting plans. Don't fall for the high discount bargains which are offered by most hosting providers. Read the fine print and note that the initial discounted price is usually 50-90% lower than the standard price at which you will be FORCED to renew! Cheap web hosting and best web hosting combined !
The only place for affordable hosting with top hosting services.
Copyright 1997 - 2013 Giganetwebhosting.com.
All rights reserved.
