Cascading Style Sheets
-
David
-
February 20th, 2012
Cascading Style Sheets, CSS, is a file that is made up HTML and XHTML and allows web designers the capability to certain colors, fonts, layout, etc from a centralized file. Separating this file from each web page allows you to control each web page from a single file.
I use CSS on this website to define the colors, the font the text along with the size of the text. The benefit is that if I should choose to change any of these things I wouldn't need to update each page. I could simply update the CSS file, upload it to my server and every page on my site is updated.
Use Of CSS
You can control nearly any part of your website using CSS as a matter of fact the topic is so in-depth that there are many entire websites devoted to CSS.
I'm only going to touch on some basic information so I would recommend visiting sites such as W3.org, W3Schools.com and CSSZenGarden.com for in depth information on CSS.
Benefits Of CSS
There are quite a few benefits to using CSS in addition to the ease of updating your website.
- Faster Download - A website using CSS cuts down on a lot of repetitive HTML that a web browser would need to read.
- Search Engine Friendly - Again, there is much less code to make up your web pages so search engines are able to more accurately determine the content on your website.
- Maintenance - Maintaining a website is much easier using CSS as you have your more common functions in your CSS file so updating a website is much easier.
Sample CSS Code
Below you'll find the first few lines of my CSS file. It's not an sort of trade secret, you can access just about anyone's CSS file if you know it's location. It's no different than if you were to view the 'source code' on a specific webpage.
body, table{ font-family:verdana; font-size:13px; color:#000000;}
body{ margin:0; padding:0; background-color:#A4A4A4;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
a:link {color: #0000ff; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #0000ff; text-decoration: underline; }
a:hover {color: #990000; text-decoration: none; }
Explaining The CSS Code Above
In the first line I'm saying that I want all of the text in a Verdana font. I'm saying that I want it 13px tall and that I want the text to be black (#00000). Please keep in mind that in a separate area of my CSS file I define the headers that I use with different sizes and colors.
The second snippet of code defines how I want links to appear. If you take a look at the links on this page you'll see that I defined them as underlined blue text. The 'a:hover' tag defines the color that I want the link to display when you place your mouse over a text link.
In Depth CSS Information
As I mentioned in the beginning of this article this is just very basic information and rather than going on and on I figured that I'd refer you to some authoritative websites that are devoted to CSS and can answer nearly any question that you may have with in-depth explanations.
Along with just searching on your favorite search engine for 'CSS' or 'cascading style sheets' I'd recommend researching CSS at W3.org, W3Schools.com and CSSZenGarden.com.
Webmaster Forum
I invite you to visit my webmaster forum, it's a great place to discuss websites and ask questions to fellow webmasters regarding topics that you may still have questions on.