The first step is to override the browser’s default style sheet with one of your own. In Chapter
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.
Showing posts with label Style. Show all posts
Showing posts with label Style. Show all posts
Saturday, October 23, 2010
Monday, October 4, 2010
Defining a Style in Css
At this stage, all CSS rules you create will follow a very simple formula. CSS syntax is made up
of a selector (the element or tag you wish to control), followed by at least one declaration
comprising a property and its value, as Figure 1-1 illustrates
The selector defines the exact element(s) that will be affected by the rule you create. The
following example uses the paragraph tag as the selector, and the color property set with the
hexadecimal reference for red as the value:
p {
color: #F00;
}
Note that after the selector, the property and value are contained within curly braces.
Almost without exception, this syntax will define all your CSS rules. See that a colon follows the
property (color:) and a semicolon follows the value (#F00;). To omit either the colon or a curly
brace will result in the style sheet failing to various degrees, so it is vital to watch for syntax
errors that occur easily while busily defining new rules. Failing to include the semicolon after
each value when adding more properties will also screw things up. If there is only one property
and value, or it is the last of several, the semicolon can be omitted.
Any further properties and values for that selector are added within the curly braces. You
do not have to place them on a new line so long as each is separated with a semicolon, but for
clarity it is recommended that each does fall on a new line:
p {
color: #F00;
font-size: 12px;
}
Now all paragraphs will not only be red, but will also have a set font size of 12 pixels. The
selector (in this case the p) acts as the link between the CSS and the (X)HTML, and as a result all
paragraphs will be styled accordingly. Note that the selector is defined in lowercase, as required
by XHTML only, as HTML is case insensitive
It’s then a case of adding new rules to the style sheet using the same syntax. Here, a rule to
make all top-level headings (<h1>) dark gray and 16 pixels high is added to the style sheet:
p {
color: #F00;
font-size: 12px;
}
h1 {
color: #333;
font-size: 16px;
}
Very simple properties are used in this example, and property syntax will be explored in much
more detail in the following chapters. For now though, we’ll concentrate on how a style sheet
is structured.
of a selector (the element or tag you wish to control), followed by at least one declaration
comprising a property and its value, as Figure 1-1 illustrates
The selector defines the exact element(s) that will be affected by the rule you create. The
following example uses the paragraph tag as the selector, and the color property set with the
hexadecimal reference for red as the value:
p {
color: #F00;
}
Note that after the selector, the property and value are contained within curly braces.
Almost without exception, this syntax will define all your CSS rules. See that a colon follows the
property (color:) and a semicolon follows the value (#F00;). To omit either the colon or a curly
brace will result in the style sheet failing to various degrees, so it is vital to watch for syntax
errors that occur easily while busily defining new rules. Failing to include the semicolon after
each value when adding more properties will also screw things up. If there is only one property
and value, or it is the last of several, the semicolon can be omitted.
Any further properties and values for that selector are added within the curly braces. You
do not have to place them on a new line so long as each is separated with a semicolon, but for
clarity it is recommended that each does fall on a new line:
p {
color: #F00;
font-size: 12px;
}
Now all paragraphs will not only be red, but will also have a set font size of 12 pixels. The
selector (in this case the p) acts as the link between the CSS and the (X)HTML, and as a result all
paragraphs will be styled accordingly. Note that the selector is defined in lowercase, as required
by XHTML only, as HTML is case insensitive
It’s then a case of adding new rules to the style sheet using the same syntax. Here, a rule to
make all top-level headings (<h1>) dark gray and 16 pixels high is added to the style sheet:
p {
color: #F00;
font-size: 12px;
}
h1 {
color: #333;
font-size: 16px;
}
Very simple properties are used in this example, and property syntax will be explored in much
more detail in the following chapters. For now though, we’ll concentrate on how a style sheet
is structured.
Print Style Sheets
At some point in the (hopefully near) future, your sites will be wonderful works of art full of
color, graphics, and interesting column separation. Good for you, and good for the screen, but
that’s not so good for printing. Nobody wants to print an article written in white text on a solid
black or extravagant rainbow background. That uses way too much ink, and is thankfully
avoidable.
All modern browsers support the most common media attributes, which are applied within
the <link> element to target specific style sheets in a specific situation. For example, to ensure only
visitors viewing the web site on a monitor see your glamorous design, you add media="screen" to
the <link> element to call your default style sheet. Underneath that, a second <link> element
can be used with media="print" added to call a print style sheet with only basic styling, such as
black text on a plain white background, and all graphics removed:
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
If a style sheet has a media type of screen, it will not be used when the page is printed. If no
media type were specified, the style sheet would influence the printed result. Note also that any
style sheet intended only for printing purposes must be given the print media type to prevent
it from being implemented on screen. It is therefore very important to specify media type correctly.
The finer aspects of print style sheet management are covered in Chapter 14 much later in this
book, but it’s very useful to understand the possibilities of the media attribute at this stage.
color, graphics, and interesting column separation. Good for you, and good for the screen, but
that’s not so good for printing. Nobody wants to print an article written in white text on a solid
black or extravagant rainbow background. That uses way too much ink, and is thankfully
avoidable.
All modern browsers support the most common media attributes, which are applied within
the <link> element to target specific style sheets in a specific situation. For example, to ensure only
visitors viewing the web site on a monitor see your glamorous design, you add media="screen" to
the <link> element to call your default style sheet. Underneath that, a second <link> element
can be used with media="print" added to call a print style sheet with only basic styling, such as
black text on a plain white background, and all graphics removed:
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
If a style sheet has a media type of screen, it will not be used when the page is printed. If no
media type were specified, the style sheet would influence the printed result. Note also that any
style sheet intended only for printing purposes must be given the print media type to prevent
it from being implemented on screen. It is therefore very important to specify media type correctly.
The finer aspects of print style sheet management are covered in Chapter 14 much later in this
book, but it’s very useful to understand the possibilities of the media attribute at this stage.
Subscribe to:
Posts (Atom)