Cascading Style Sheets- Part 4- Using Multiple Style Sheets
Because there are several places where a style can be defined it is possible to specify a style more than once
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: blue;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 18pt
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: blue;
text-align: right;
font-size: 18pt
The colour is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
CSS Comments
You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. They are very
useful for hiding the style tag from browsers that do not support them .A single line HTML comment begins with "/*", and ends with "*/",
like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
or for comments that span more than one line use <!-- to start the comment block and
--> to end the comment block as shown below.
<head>
<style type="text/css">
<!--
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/background1.gif")}
-->
</style>
</head>
Assigning Styling to Areas of a Page
HTML contains 2 tags generally used as "containers". <div> is the first of the two and its use is as a block-level container. The second, <span> is an inline container. A container
is an individual part or section of a web page, with content within it of some sort.
The <div> tag is wrapped around a whole section of content, or block (hence, block level) and <span> is wrapped around content which is on just one line, (or inline). <div> tags can
contain as much content as you like - a block can have as much or little within it as is necessary.
<span> tags, generally, usually very small & specific parts of content.
These tags can be combined with CSS for styling areas of content. For example, you create a CSS class called header, and you setup some background colours, font styles &
weights, margins, padding and so on. You then simply place in your page the following code:
<div class="header">
Your content many lines
</div>.
All the styling is handled by your external style sheet file and all that is left is for you to put your content (I.e. text and images) within the start and end tags.
Similarly the <span> tag can be used with css for styling small chunks of text.
For example, you have a CSS class called alttext which contains style information for text in a slightly larger font, which is italic and dark green in colour. Simply wrap
your text within the following code and this is then created:
<span class="alttext">Alternate style text</span>
