An Introduction to Cascading Style Sheets (CSS)
What Are Cascading Style Sheets?
CSS is a form of HTML mark-up that provides web designers with greater control over typography and spacing between elements on a page.
Why Should I Bother Using CSS?
1. Greater control over layout and typography. CSS provides you as a designer with precise control over the fonts used on your site, including size, letter spacing and text decoration.
Elements on a page can be positioned precisely using CSS. In fact at least one major HTML Editor, Dreamweaver 2, uses CSS to control the layout of a page, although it does provide the option to convert to tables.
2. Site-wide changes become easy. Rather than having a style sheet as part of the HTML code of a page, it is possible to specify the URL of a style-sheet that is to be used when formatting a particular page. This makes it very easy to modify the entire site by simply editing a single file.
What About Browser Compatibility?
CSS support is provided in Internet Explorer 4+ and Netscape Navigator 4+. However, some annoying browser inconsistencies continue to make life difficult for those deciding to use CSS on their site. It is possible with a little bit of JavaScript to serve up different style-sheets depending on the browser that is being used to view your site. Alternatively, workarounds can be used so that the style-sheet works in both browsers correctly.
What Does CSS Look Like?
The basic template for CSS code looks like this:
Tag:
{Property: value; Property2: value2}
Tag – The element that will be affected
Property – What part of the selector will be affected
Value – How it will be affected
Notice that CSS makes use of curly brackets instead of < and > .
A Small Snippet:
H1
{FONT-SIZE: 9pt; FONT-WEIGHT: bold}
The example above will make all the text within H1 tags bold, and size 9.
The Three Ways To Use CSS
There are three ways to use Cascading Style Sheets: inline, embedded, and external/linked style sheets. I’ll briefly explain each of them below.
Inline
If you just want to apply formatting to a small piece of text you can use inline styles, which look something like this:
<h3 style=”font-weight: bold”>this will be bold Embedded
Embedded style sheets are put between the <head> </head> tags on every page that you want to use style sheets on. This is how they look like:
<HEAD>
<STYLE TYPE=”text/css”>
<!–
Tag: {Property: value; Property2: value2}
–>
</STYLE>
</HEAD>
External
Remember how I said that you can use a single style sheet site-wide, and then change all of your pages by editing one file? This is done with external style sheets, which look something like this:
<HEAD>
<LINK REL=”STYLESHEET” HREF=”/PATH/SHEET.CSS TYPE=”TEXT/CSS”>
</HEAD>
The SHEET.CSS file would then contain all the style-sheet code which would be applied to any page that calls it using the code above.
Remove ‘Em Underlines – A Complete Style Sheet
Do you want to remove underlines from links on your site? Below is a short and sweet style-sheet that will do just that, just copy and paste it between the <head> </head> tags on your site:
<STYLE TYPE=”text/css”>
<!–
a { text-decoration: none}
–>
</STYLE>
Where To Go From Here
If you’re intrigued by the brief overview above, and you want to learn more about Cascading Style Sheets check out the tutorials below:
HTML Goodies – A brief Tutorial on Classes and ID’s which are used in CSS.
W3.org – More information than you can shake a stick at.
HTML Help – Several tutorials covering different aspects of Cascading Style Sheets.
Writing Stylesheets – A Brief Guide.
CSS Is Easy! – SitePoint’s own Kevin Yank explains the nitty gritty, with plenty of examples.
Good luck!
Source Link: http://www.sitepoint.com/cascading-style-sheets-css/