Cascading Style Sheets
How To Make A Website
> Web Design Tips > Cascading
Style Sheets
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 CSSYou 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 ForumI 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. |
