Thursday, December 19th, 2002
Simple Webpage Creation
Cascading Style Sheets
Cascading Style Sheets (CSS) are the method created to add the pretty parts back into webpages (In the Beginning…). There are 3 methods of inserting CSS into webpages: inline, embedded (in the header), and external. The reason they are called Cascading Style Sheets is that the closer you get to the information, the more important the rule. So a rule in the <head> tag will cancel out a contradicting one in the external style sheet and one that is inline will overrule the other two. Basically, the last rule wins. You can link to two different style sheets and if the styles overlap, the ones in the second sheet that are different than the first will be the ones that show up. Where there is no contradiction, all the rules will be used.
Anatomy of a CSS Rule
In a CSS rule, the first part is the tag that is being defined. The words in the squiggly brackets ({}) are the properties and values being applied to the tag. The first one below is the color, which in this case applies to the color of the text, there is a colon (:) between the property and the value (black). Notice that the properties are separated by semi-colons (;).
So, if all first level headers <h1></h1> need to be black, 24 pt, Arial font, you create a style in you sheet :
h1{color:black*; font-size:24pt; font-family: arial, sans-serif;}
And anytime the tags <h1></h1> are used in pages linked to that style sheet, they will appear exactly as described. If you want them to be white, you just change the color in the rule and they will all be white (hopefully not against a white background, of course you can change that too).
h1{color:white*; background-color: black; font-size:24pt; font-family: arial, sans-serif;}
[*note: color is calculated by a combination of red, green, and blue. Because the different browser/platform implementations can be so vastly different, it is recommended that the hexadecimal notation be used instead, for instance, black is #000000, and white is #ffffff. These numbers can be calculated in Photoshop or a similar program or can be found in dozens of free color tools on the web. One of the best sites also sells very nice charts and cards. ]
Any tag in Xhtml is fair game for css manipulation, including the <html> tag itself. Unfortunately, none of the currently available browsers support the entire CSS specification and the parts that are supported aren’t always constant. The browsers with the best support are Netscape 6.2/Mozilla 1.0, and Internet Explorer 5.1/5.2 for the Mac, in that order. They are getting better with each release, though.
Adding styles
Inline Styles
Inline styles are defined at the place in the document where they are used. It’s ok if you are only going to use a style once but defining it multiple times loses the major advantage of CSS, the ability to make changes on all of your pages simultaneously.
You simply add the style definition to the tag you wish to modify:
<p style="font-family: Arial; font-style: italic; color: green"> The contents of my paragraph. </p>
Embedded Styles
Styles can also be defined in the head of a webpage in <style></style> tags. I prefer this method for single pages because even if the rules are only used once, they are still separated from the rest of the page and I don’t have to go hunting for them to make changes. They are usually enclosed in html comment tags (<!– –>) within the <style></style> tags to prevent older browsers (version 3 and older) from displaying the rules with the contents of the page.
<head>
<style type="text/css">
<!-- here are my style rules in the header-->
</style>
<title> This is the title of my document</title>
</head>Comment tags are used to include information in the file for the use of any person using the code and are not displayed by the browser. So if you create you webpage and include a comment tag in the body, only someone who looks at the source code (View -> Page Source in Mozilla) will see it.
<html>
<head>
<style type="text/css">
<!-- here are my style rules in the header-->
</style>
<title> This is the title of my document</title>
</head>
<body>
And here is the main text of my document.
<!--This is a comment tag that won't be displayed by the browser.
I could include an explanation of why I did something or the last time
I made changes, for example.-->
</body>
</html>
External Style Sheets
Styles can be defined once in a separate style sheet, which is a plain text file with a collection of CSS rules and a css extension (no comment or style tags needed), and linked to from the rest of the pages in the site. This is the preferred method for sites with multiple pages. From then on, whenever you want to change something in your site, you can do it once and it will automatically happen uniformly across all of your pages. The basic link is:
<link rel="stylesheet" href="" type="text/css" />
Adding the media attribute with a “print” property allows you to link to a style sheet created specifically for printing. This could be used to hide your navigation and graphics that don’t print well, for example, or to define font sizes in points (a bad idea on a computer screen, a good one on paper).
<link rel="stylesheet" href="" type="text/css" media="print" />
*Netscape 4 does not like the media attribute and will ignore the style sheet entirely.
The other way of bringing in external style sheets to import them.
@import url(http://…);
This was originally designed as a way to bring styles from one style sheet into another but can also be used in the head of the document, within the <style></style> tags. Import has become a popular method because Netscape 4 doesn’t understand it. NN4.# has very bad support of cascading style sheets and often a pared down version of the style sheet will be linked to while the rules Netscape 4 doesn't understand will be imported from another style sheet.
By Laura @ 9:27 am in Tutorials
