|
|||||
| (intermediate) |
CSS gives you:
All we have time for at this point are a few basic style items, that can be applied to block-level html elements in-line (in other words, without an external or embedded style sheet to depend on) (and, in case you forgot: block-level elements are P, DIV, BLOCKQUOTE, Hx, etc) Try copying this line of HTML into a new page:
And this:
For styling just a word or two, or even just a letter, use the <SPAN> element:
Note the difference in markup from regular html! To change the size and color of a line of text:
To add a highlighter-type background to a line of text:
There is, unfortunately, no time here to delve into styles to any extent: Eric Meyer's book CSS: The Definitive Guide (O'Reilly Press) is a highly recommended reference. Watch out: Netscape Navigator and Internet Explorer will often display styles in different ways - always check! A style declaration consists of attribute names followed by a colon (:) and the attribute's VALUE. Multiple attributes are separated by a semicolon (;). For example:
One of the most difficult things to get used to in html4 is that elements that had been tags are now attributes of a style. Embedding a style into an html page
will apply that style to the entire page - but only the page (not, i.e.,
other pages within the same site). Here is an example for an embedded style; it's always between <STYLE> tags in the document <HEAD>:
You can apply the same declaration to a group of selectors by including all of the selector names separated by commas. For example:
An external style sheet applies the styles contained in it to all the pages that link to the style sheet. A style sheet has the extension .css; it's best to create it in a plain text editor such as NotePad or SimpleText; just give the extension .css when you save the file. That extension doesn't mean anything: it simply tells you and anyone else who may be working on your site that this is a styles-file. In addition, there is no need for <STYLE> tags in your .css document (in fact, including them may on occasion cause rather weird problems). Once you've created your style sheet, you can link your pages to it. by adding a <LINK> tag to the <HEAD> section of your html file. For example, these tutorial pages use the following link: <LINK REL="stylesheet" HREF="wtt.css" TYPE="TEXT/CSS"> To apply this style sheet to other pages in your website, you need only add the <LINK> tag to the head of all the documents you want to link. WATCH OUT: If a style in a linked style sheet conflicts with an embedded
one, the embedded one takes precedence. Inline styles take precedence
over both embedded and linked styles: it's what puts the 'cascade' into
Cascading Style Sheets. Elements on a webpage are nested within each other; the <BODY> tag is the one that contains all the other elements on the page. Any element that contains others is the parent of the descendant elements. Any style defined for a parent tag is transferred to the tag's descendants
in a principle known as inheritance.
-which would make the Header1 and 2 text (and descendants of the Headers)
a kind of garish purple - while keeping the color blue for all the rest
of the page text. Have a look at the many websites dedicated to CSS (just do a search on Google for CSS and the Web)! Have fun! |
||||