Apply Some Style
Through the following section, you will take that existing text in text.html and manipulate it in a number of ways that make use of some key CSS properties.
Define Your Style Sheet
The first step is to override the browser’s default style sheet with one of your own. Apply a style sheet called text.css using the following link element within the head of the document:
<head>
<title>Page Title</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.
Body Declarations
The first task with any new web site is to consider what blanket rules can be declared in the body selector. Remember that every element contained in the body element will inherit its values unless you specify otherwise. For example, to avoid having to declare the font-family and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}
Save text.css and then reload text.html in your browser. The display should look something like this.
Now text.html is taking its styling from text.css.
With the font-size reduced to 12px, the display looks a little more professional, and Verdana makes the text a little easier on the eye. Notice that the declared font-size has no effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]