CSS (Cascading Style Sheets) have been around for a while now, and act as a complement to plain old HTML files. Style sheets allow a developer to separate HTML code from formatting rules and styles. It seems like many HTML beginners’ under-estimate
power and flexibility of style sheet. In this article, I’m going to describe what cascading style sheets are, their benefits, and two ways to implement them.--------------------------------------- Cascading whats? ---------------------------------------
Cascading Style Sheets…that’s what! They’re what paint is to canvas, what topping is to ice cream… they complement HTML and allow us to define style (look and feel) for our entire site in just one file!
Cascading style sheets were introduced to web development world way back in 1996. They get their name from fact that each different style declaration can be “cascaded” under one above it, forming a parent-child relationship between styles.
They were quickly standardized, and both Internet Explorer and Netscape built their latest browser releases to match CSS standard (or, to match it as closely as they could).
So, you’re still asking what a style sheet exactly is? A style sheet is a free-flowing document that can either be referenced by, or included into a HTML document. Style sheets use blocks of formatted code to define styles for existing HTML elements, or new styles, called classes.
Style sheets can be used to change height of some text, to change background color of a page, to set default border color of a table…the list goes on and on. Put simply though, style sheets are used to set formatting, color scheme and style of an HTML page.
Style sheets should be used instead of standard , , and tags because:
- One style sheet can be referenced from many pages, meaning that each file is kept to a minimum size and only requires only extra line to load external style sheet file
- If you ever need to change any part of your sites look/feel, it can be done quickly and only needs to be done in one place: style sheet.
- With cascading style sheets, there are many, many page attributes that simply cannot be set without them: individual tags can have different background colors, borders, indents, shadows, etc.
Style sheets can either be inline (included as part of a HTML document), or, referenced externally (Contained in a separate file and referenced from HTML document). Inline style sheets are contained wholly within a HTML document and will only change look and layout of that HTML file.
Open your favorite text editor and enter following code. Save file as stylesheet.html and open it in your browser:
Cascading Style Sheet Example < itle> <style> h1 { color: #636594; font-family: Verdana; size: 18pt; } </style> </head> <body> <h1>This is one big H1 tag!</h1> </body> </html> <p>When you fire up your browser, you should see<IMG height=12 src="/the2.jpg" alt="repparttar 105188"> text "This is one big H1 tag!" in a large, blue Verdana font face. <br><br></font></td><!-- google_ad_section_end --><!-- google_ad_section_start(weight=ignore) --><td align="top" width="10%"></td><td align="top" width="45%"><h2>CSS: The Basics - ID's and Classes</h2><font size="2">Written by Eric McArdle</font><br><br><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_channel ="9238851329";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br> <font size="2">Css <p>Cascading Style Sheets <p>Two types of style sheets: Internal and External <p>Internal - You insert your style code right into your html code. These stylesheets should only be used if you are intending to create a specific page with a specific style. If you want to be able to make global changes to your website using only one style sheet, you have to use.... <p>External Stylesheets - Instead of putting all<IMG height=12 src="/the2.jpg" alt="repparttar "> style code into your html code, you can create a single document with your css code and link to it within your webpages code. It would look something like this <p><head> <title>Webpage title< itle> <link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/css" rel="nofollow"> </head> <p>If you decide to use an internal stylesheet, you have to put your css style wihin<IMG height=12 src="/the2.jpg" alt="repparttar 105167"> following tags: <p><style type="text/css"> </style> <p>All css or links to<IMG height=12 src="/the2.jpg" alt="repparttar 105168"> external stylesheets have to go in between<IMG height=12 src="/the2.jpg" alt="repparttar 105169"> <head> tags <p>Now about Css Classes vs. ID's <p>The one major difference between a class and an id is that classes can be used multiple times within<IMG height=12 src="/the2.jpg" alt="repparttar 105170"> same page while an Id can only be used once per page. <p>Example: <p>ID - The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page. <p>Class - Anything that you would use multiple times in your page, such as titles, subtitles, headlines, and<IMG height=12 src="/the2.jpg" alt="repparttar 105171"> like. <p>Creating ID 's<p>To create an Id in your css, you would start with<IMG height=12 src="/the2.jpg" alt="repparttar 105172"> number sign (#) and then your label of<IMG height=12 src="/the2.jpg" alt="repparttar 105173"> id. Here's an example <p>#navigation { float:left; } <p>To insert<IMG height=12 src="/the2.jpg" alt="repparttar 105174"> id in your html, you would do something like this <p><div id="navigation"> </div> <p>You can also insert an id within another one like this <br><br></font></td><!-- google_ad_section_end --></tr><tr><td>Cont'd on page 2 ==<a class="mlink" href="2-Introduction_To_Cascading_Style_Sheets-5170.htm">></a></td></tr></table><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="8831454965";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="48" align="center" background="images/bg_nav_bottm.jpg"><span class="style3">ImproveHomeLife.com © 2005<br> <a href="terms.html" rel="nofollow">Terms of Use</a></span></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
var HASH_ESCAPED="%23";
function TrackIt(adUnit){
if (window.status)
{
var adDomain = escape(window.status.substring(6));
var pyPage = document.location.pathname;
var params = document.location.search;
var hasAnchor = params.lastIndexOf(HASH_ESCAPED)!= -1;
params = hasAnchor? (params.substring(0, params.lastIndexOf(HASH_ESCAPED))) : params;
pyPage = escape(pyPage.substring(pyPage.lastIndexOf('/') + 1));
pyPage = pyPage + params;
var curTime = new Date().valueOf();
var bug = new Image();
bug.src = '/track/adsenseTrack.php?pyPage=' + pyPage + '&adDomain=' + adDomain + '&adUnit=' + adUnit + "&time=" + curTime;
}
}
function TrackIt0() {TrackIt(0); }
function TrackIt1() {TrackIt(1); }
function TrackIt2() {TrackIt(2); }
var elements = document.getElementsByTagName("iframe");
for (var i = 0; i < elements.length; i++)
{
if(elements[i].src.indexOf('googlesyndication.com') > -1)
{
//elements[i].onfocus = TrackIt;
if (i==0) elements[i].onfocus = TrackIt0;
if (i==1) elements[i].onfocus = TrackIt1;
if (i==2) elements[i].onfocus = TrackIt2;
}
}
</script>
<!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" -->
<script type="text/javascript" language="JavaScript">var site="s19improve"</script>
<script type="text/javascript" language="JavaScript1.2" src="http://s19.sitemeter.com/js/counter.js?site=s19improve">
</script>
<noscript>
<a href="http://s19.sitemeter.com/stats.asp?site=s19improve" target="_top">
<img src="http://s19.sitemeter.com/meter.asp?site=s19improve" alt="Site Meter" border=0></a>
</noscript>
<!-- Copyright (c)2002 Site Meter -->
<!--WEBBOT bot="HTMLMarkup" Endspan -->
</body>
</html>
