CSS Provides a mechanism for adding style to plain HTML pages to change the way that they're displayed in the browser. Before we talk about how it works we'll discuss why this might be a good idea.
Three different aspects of web site production:
Content -- the text, images, etc. What the user wants to read.
Style -- how the content is arranged on the page, fonts, colours, page style.
Behaviour -- how users interact with the site, data processing, dynamic page elements.
Since each requires different skills, a good (software) design would seperate them.
Each of these areas has a different associated technology in the web world: HTML, Cascading Style Sheets (CSS) and Javascript.
Note that it hasn't always been this way, HTML can do a bunch of Style things (eg. the <font> tag) but now that we have good standards compliant browser we don't need to use them.
sourece: W3Schools.com
Style sheets allow style information to be specified in many ways.
Most modern browsers support most of CSS1 and CSS2 but all browsers have bugs in their implementation. There are many sites on the web that summarise the compatibility of the main browsers, eg. WESTCIV or Quirksmode.
Syntax:
selector {
attribute: value;
attribute: primary-value, preferred-default, fallback-default;
}
Example:
p {
font-size: larger;
font-family: Ariel, Tahoma, sans-serif;
}
<html>
<head>
<title>Example</title>
<link rel='stylesheet' type='text/css' href='style.css' />
...
<style type='text/css'>
h1 {
background-color: #CCFFCC;
}
p {
font-size: smallest;
}
</style>
</head>
<body>
<h1 style='color: yellow'>Example</h1>
...
body {
font-family: gill, helvetica, sans-serif;
}
em {
font-style: italic;
font-weight: bold;
font-size: larger;
}
strong {
font-weight: bold;
font-size: large;
}
p {
font-size: 12pt; /* using absolute sizes is a bad idea */
}
Absolute sizes are bad because they don't allow for user customisation of styles: say I have poor eyesight and set my default font to 20pt -- your 12pt text will be unreadable.
The CSS1 spec has the full list of font attribute names.
em {
color: red;
background-color: white;
}
strong {
color: rgb(255,0,0);
background-color: #CCFF00;
}
body {
background-image: url(background.gif);
background-repeat: repeat-y; /* repeat-x, no-repeat */
background-attachment: fixed; /* scroll */
}
An example showing background-attachment.
Mystyle1.css
/* This is a CSS comment line
This is another CSS comment line */
body {background-color: yellow}
h1 {font-size: large; text-align: center; font-family: "arial"}
h2 {color: blue; text-align: left;}
p {color: red; margin-left: 50px; font-family: courier}
p.left {text-align: left}
p.center {text-align: center}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle1.css"/>
</head>
<body>
<h1>This is a center-aligned header with large font size</h1>
<h2>This is a left-aligned header with blue color</h2> <p class="left">This paragraph has red color and a left margin of 50 pixels</p> <p class="center"> This is a center-aligned paragraph.</p>
</body>
</html>
Mystyle2.css
/*w3schools example*/
/body {background-color: tan; background-image: url("constr4.gif")}
h1 {color:maroon; font-size:20pt}
p {font-size:11pt; margin-left: 15px}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
<!-- w3schools example*>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle2.css"/>
</head>
<body>
<h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p>
</body>
</html>
An internal style sheet should be used when a single document has a unique style.
Internal styles should be defined in the head section by using the <style> tag
<!-- w3schools example>
<html>
<head>
<style type="text/css">
h1 {color: blue; text-align: center; font-size: 40pt}
p {margin-left: 20px; text-align: left; font-size: 20pt; color: green}
body {background-color: grey}
</style>
</head>
<body>
<h1>This is a header 1</h1> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p>
</body>
</html>
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
_______________________________________
| margin (transparent) |
| _________________________________ |
| | border | |
| | ___________________________ | |
| | | padding | | |
| | | _____________________ | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
|<---element width--->|
|<--------------box width-------------->|
Here's an example document illustrating these attributes.
selector { attribute: value;}
Element name, alone or in context:
em { color: red }
h1 em { color: blue}
ul li { font-size: small}
ul ul li { font-size: x-small }
Element id:
#maintitle { background-color: blue }
Element with class attribute:
.relaxed { color: green }
.angry em { font-weight: bold }
Values from a fixed set:
font-size: small; float: left; border-style: solid;
Values with units:
font-size: 12pt; /* absolute value, points */ margin: 12px; /* absolute value, pixels */ font-size: 1.5em; /* relative to height of 'M' in current/parent font */ padding: 1.5ex; /* relative to height of 'x' in current font */ font-size: 150%; /* relative to current font */
Colours:
background-color: red; color: #f00; border-color: #FF0000; color: rgb(255,0,0);
URLs:
background-image: url(picture.jpg);
Here's an article which says don't use 'ex' units.
Allow style to be applied to things that aren't marked up:
Anchor pseudo-classes:
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
A.external:visited { color: blue }
<A class=external href="http://out.side/">external link</A>
Typographical pseudo-elements:
p:first-line { font-variant: small-caps }
p:first-letter { font-size: 200%; float: left }
These properties describe how the element should be displayed.
.paragraph { display: block; margin: 10px; }
.emphasis { display: inline; font-variant: italic; }
.menuentry {
display: list-item;
list-style-type: square;
}
.secret { display: none; }
It would be possible (though perverse) to write an HTML page with just <span> and appropriate class attributes: except that is for anchor tags -- that's behaviour, not style.
HTML encodes the content of a web page.
CSS encodes the appearance of the page on the screen.
Avoids the need for HTML to be extended to include specific display elements (eg. <font> or <blink>)
Facilitates a consistent look and feel across a web site which can be easily updated.