Cascading Style Sheets - CSS Guide
- Introduction to CSS
- Inline style
- Embedded style
- Linked style
- Specificity
In a nutshell, CSS provides a means for web authors to separate the appearance of web pages from the content of web pages.
Cascading Style Sheets [CSS] is a recommendation of the World Wide Web Consortium (the W3C)
The W3C consortium of web stakeholders: universities, companies such as Netscape Communications, Microsoft and other experts in many web related fields
- The W3C has published two major CSS recommendations: CSS1 and CSS2
- CSS1 first became a recommendation in late 1996
- CSS2 became a recommendation in May 1998
- Support was almost nonexistent in Netscape Navigator 4.x and very limited in Internet Explorer 4.5, 5 and 5.5
There are 3 ways of doing CSS
Actually there are 4 - but we will ignore the fourth ‘cause its like the 3rd
In-line
Embedded
Linked
They are all useful in their own way.
- In-Line
<html><head>...
<body>
<h3 style="color:green”>This
is a green, H3 header.</h3>
<h3>This is an H3 header,
but it's not green.</h3>
</body>
</html>
- Multiple
<html>……
<body>
<h3 style="font-family: Arial; font-style: italic;
color: green”>This is a green, italic, Arial H3 header.</h3>
<h3>This is an H3 header, but it's not green, italic, or Arial.</h3>
</body>
</html>
- Embedded Style
<html>
<head><title>Green Header</title>
<style type="text/css">
h3 { font-family: arial;
font-style: italic;
color: green }
</style>
</head>
<body>
<h3>A green, italic, Arial H3 header.</h3>
<p> <h3>So is this.</h3></p>
</body>
</html>
Understanding CSS Rules
Amazingly simple to set up
A CSS rule defines what HTML should look like and how it should behave in the browser window
Rules can be set up to tell a specific HTML tag how to display it’s content or create generic rules which can be applied to tags at your discretion
All rules have three parts:
Selectors, Properties and Values
Selectors, Properties and Values
Format of a style sheet rule:
selector {property:values}
selector {property:values;
property:values}
HTML SELECTOR
Style rule applies to all of a specific kind of tag on the page
p {color: red}
All text inside
tags will be red
Class Selector
Might want to be more specific, only have red text for some paragraphs
Use a class selector
p.redstuff {color: red}
Will only be applied if…
<p class=“redstuff”>Some text or other</p>
Can define a class for use with any tag…
.greenstuff {color: green}
Advantages of linked style
Use one style sheet for whole site
Easily change site look and feel
Define several classes for use in different pages, but all in one page
ALSO separates style from content
Use meaningful classes - relating to the nature of the content
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply