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: 4 stars4 stars4 stars4 stars4 stars / 5
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

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

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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