![]() |
![]() |
Main | Basic | Advanced | Download | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
![]() |
Style Sheets Cascading Style Sheets, or CSS, are a technology that is set to revolutionise the way we web design: Style Sheets use special tags and files to define styles of text (font, colour, size, etc) as classes to be used for any block of text, leaving HTML as the language it was meant for: simply giving the bare elements of the page, not formatting them. Style Sheets are one of the most browser dependent
technologies in the business yet: they are capable of what is called exact
positioning, which in theory means you can place an element you define
in the HTML code anywhere on the page you want, and exactly too! In practice
at the minute the situation is not quite as good: The W3C
(WWW Consortium) has brought out the implementation of style sheets (CSS
level 1), but the draft for absolute positioning (CSS Level 2) has yet
to be implemented. This means that browsers that came out before CSS Level
1 did aren't likely to display the same stuff as ones that support it,
and all browsers at the minute don't display the exact positioning (Level
2) the same. You may well ask then why are we using it yet? Well, the
answer is that if you can get the right page to the right browser you
are ok, as your pages will look even better. Browsers that support Style
Sheets are as follows: The examples in this tutorial only work with the specified browsers, so, if you aren't viewing these pages with them, the examples will not appear as they should do. Style sheets can be defined to work in a page in
three ways:
I will first tell you about how to define the classes
in the <HEAD> tag and also in the tags around individual elements. <STYLE TYPE="text/css"> We put in the comment tags to stop old browsers reading this and just putting it up as part of the normal page text, which could be a trifle embarrassing! Between these comment tags we define the styles. Styles can be applied to any element on the page, text, images, whatever you have on the page. You can define what are called classes, which can then be applied to a specific page element, or define a style for a tag, such as the <B>, or Bold, tag, or define a style that is inline, actually within the HTML code, which you are applying to a large part of the page. The way we define styles for a tag is to use the following format: <STYLE TYPE="text/css"> The tag can be any tag without it's normal
< and > round it. This is then followed by the opening curly bracket
which contains all the different attributes with a colon and the setting
for that attribute and then a semi-colon (;). The semi-colon separates
one attribute from the next, as you may define many attributes for a single
tag. After all the desired attributes have been defined, the style definition
for that particular tag is closed by the closing curly bracket. P {font-size: 15pt; color: blue;} This makes all blocks of text or other elements on the page surrounded by the <P>, or pragraph, tag, have a font size of 15 points (pt), and have the color blue. Neat eh? In other words, like This! You can group tags that you want to have the same style together: H1, H2, H3 {font-size: 15pt; font-weight: bold; color: maroon} To define classes, which can be applied to any tag, we use the following format: .classname {attribute: setting;} Where classname is any name you want to call the class, preceded by a full stop (.), and attribute and setting are as explained above. Therefore, we can define a class called "bluetext" in the following way: .bluetext {font-size: 20pt; color: blue; font: verdana; font-weight: bold;} This defines a class that makes any text told to
"take on" that class be in the Verdana font, be 20 points high, be blue,
and be in bold type. You may now be wondering how you apply classes to tags and objects. Well, you use the following format for tags: <TAG CLASS="classname">Text or Object</TAG> Where TAG is any tag you want, it could be
<B> or <BODY> or anything you want. classname is
the name of the class you want that particular tag to have (but not any
others of the same kind on the page, otherwise you would just define the
style for the tag in the header as explained above). <B CLASS="bluetext">Some text</B> which would give you: Some text You can specify that large portions of the web page inherit the class by using two special tags, <SPAN> and </SPAN>, and <DIV> and </DIV>. These you can put round any number of elements in the page and they will all inherit the style defined by that class. The format is: <SPAN CLASS="classname">Any Element of the page</SPAN> This format is the same for the <DIV> tag. The <DIV> is used for large containers, such as a whole page of text, whereas <SPAN> is used for smaller page elements, words or even letters. An example of the way these two tags are used is: <SPAN CLASS="bluetext">Any Element of the page</SPAN> Which results in: Any Element of the page Lastly, you can specify different classes for one type of tag. This means you could have, for example, 5 different classes for the <P> tag: P.normal These are defined just like any other class or style, as follows: <STYLE TYPE="text/css"> These different classes for one type of tag are used as follows (using the <P> from above as the example): <P CLASS="normal">Text with the normal style</P> One thing you might be wondering about is can you have a different style of tag when you've specified a style for that tag already? the answer is yes you can, and the way to do it is simply call another class from the tag you want to be different from all the rest of the same kind of tag. An example is when you have specified the following:
<STYLE TYPE="text/css"> <UL> This gives the following result:
Tags can also have what are called inline styles defined in them. This simply means that styles can be defined in the HTML code rather than having to be specified as classes in the header between the <STYLE> tags. The format is as follows: <TAG STYLE="attribute: setting;">Any page Element</TAG> An example is: <U STYLE="font-weight: demi-bold; color: green;">Some text with an Inline Style</U> Which results in: Some text with an Inline Style The other way of introducing styles to a page is by linking a stylesheet file to the web page. This enables you to be able to modify the styles which affect a whole group of pages by editing one file, which is especially good if you want your whole site to look reasonably the same, or at least have the same text fonts and sizes. The way you link to external stylesheet files is using the following code on the header (between the <HEAD> and </HEAD> tags): <LINK REL=STYLESHEET HREF="path/to/stylesheet/.css" TYPE="text/css"> The path/to/stylesheet/.css is the exact URL of the stylesheet. External Style Sheets are created by simply defining the styles as shown but without any HTML tags in the file, so for example, this could be an external style sheet: LI {font-size: 12pt; color: green;} The style sheet is then saved as a file with the .css extension. As an example, lets say I've created a file called "homepage.css". I would link to it by putting the following in the header of the page/s that used it: <LINK REL=STYLESHEET HREF="homepage.css" TYPE="text/css"> Something special you can do is make different styles for links depending what status they have: whether they are unvisited, visited or active (when a link is clicked it flashes it's active colour). The way to do it is as follows: A:link {attribute: setting} Where the attribute and setting are the normal way styles are defined. The A:link is for unvisited links, the A:visited for visited links, and the A:active for active links. These style definitions are like any others and go between the <STYLE> tags in the header. Style Sheets support the following properties:
Possible colour names are:
There are many more attributes that can be set using Internet Explorer and Style Sheets with Dynamic HTML, but these are the main ones. Well, this has been a rather long tutorial, but I think you'll agree it's been worth it. |
Copyright 1998 Iceman. All Rights Reserved. Further Legal Stuff
This
page hosted by Get
your own Free Home Page