creating & modifying css style rules
The best place to make your style rules is an external style sheet, but, for beginners, you could place them in the head section of a web page. Once you are confident, all the style rules can be cut and pasted from the web page into a separate style sheet (see below for example web page code).
A style rule has only 2 parts - the selector selects the element that the rule applies style to;
the declaration declares what the style should be.
e.g.1
h1 {font-size: 20px;}
e.g.2
p {font-size: 12px;
color: #ff0000;}
The colon and semi-colon are crucial. If either are omitted a) the style won't work; b) you won't get any helpful error messages.
Strictly speaking, the last semi-colon in a list of style rules isn't necessary, but it's a very useful habit to always add them. You may have ten or twenty rules in one block, and then add others at a later date. Having the semi-colon at the end of the previous entry really helps.
Defining new Selectors (divs)
If you want a particular style for one type of content; for example, limericks, you can make a class or id to use for that content. An id can only be used once on a web page (because it also functions as an anchor for links), but a class has no such restrictions.
We may like the text aligned left, large font. If so, this would be the style rule. (The . is used for a class, and a # for an id).
div.limericks {text-align: left;
font-size: 16px;}
If our paragraphs are to have different coloured text within the limericks div, than elsewhere:-
div.limericks p {color: #000044;}
To use these examples in the web page, select the element (limericks) as follows:-
<h1> My Limericks! </h1> <div class ="limericks"> The boy stood on the burning deck <br /> Nobody knows why he didn't leave <br /> <br /> <p> This was inspired by a conversation in the pub. </p> </div>
To create a style rule for all elements within the class limericks:-
.limericks {color: #00cc99;}
But to only style h2 headers within the limericks class:-
h2.limericks {color: #990066;}
A simple web page for css experiments
To try out css styles in a single, very simple web page, copy and paste this into a new page, and save it as testpage.htm ; then open the page with your browser:-
<html>
<head>
<title> CSS Trial Page</title>
<style>
body {background-color: #dddddd;
}
h1 {font-size: 26px;
color: #bb0000;
text-align: center;
}
p {font-size: 12px;
color: #0000bb;
}
</style>
</head>
<body>
<h1> My trial page</h1>
<p> This uses css in the head of the page to format h1 headers and paragraphs.
</p>
</body>
</html>