Home arrow HTML arrow Page 4 - Cascading Style Sheets: The How and the Why
HTML

Cascading Style Sheets: The How and the Why


Cascading Style Sheets have been around for a while now, and act as a complement to plain old HTML files. If you're new to HTML, then take a couple of minutes to learn a thing of two... you'll be surprised what you can do with style sheets!

Author Info:
By: Mitchell Harper
Rating: 3 stars3 stars3 stars3 stars3 stars / 2
November 24, 2001
TABLE OF CONTENTS:
  1. · Cascading Style Sheets: The How and the Why
  2. · Cascading whats?
  3. · An example of an inline style sheet
  4. · An example of an external style sheet
  5. · A more advanced style sheet example
  6. · Conclusion

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Cascading Style Sheets: The How and the Why - An example of an external style sheet
(Page 4 of 6 )

External style sheets are similar to internal style sheets, however, they are stripped of the <style> and </style> tags, and need to be referenced from another HTML file to be used.

Create a new file called “mystyle.css” and enter the following code into it:

h1

{

color: #a00808;

font-family: Verdana;

size: 18pt

}


Next, create a HTML file and name it external.html. Enter the following code into external.html:

<html>

<head>

<title> External Style Sheet Reference Example </title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<h1>This is one big H1 tag!</h1>

</body>

</html>


As mentioned above, you can see that the actual code in mystyle.css is exactly the same as it was in the inline example. In our HTML file, we simply place a <link> tag in the <head> section of our page. The rel=”stylesheet” attribute tells the browser that the link to the external file is a style sheet. The type=”text/css” attribute tells the browser that mystyle.css is a text file containing css (cascading style sheet) declarations. Lastly, the href=”mystyle.css” attribute tells the browser that the actual file we want to load is mystyle.css.
blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials