| Body | <h2 align="center]Cascading Style Sheet Mysticism
( CSS Part II)
by Darkwater685</h2>
Welcome traveller. You are about to journey into the heart of CSS. CSS is structured along the CSS box model. The rabbit hole of CSS theory is very deep. In this section, I will attempt to let you peek down this hole and see what all is there. A basic understanding of the box model allows you to understand much more about CSS and do some really neat stuff.
The image below is a box. The central box is the content area. This could be text, an image, or something else. This is what the declarations discussed in part one were modifying. Surrounding the content box is the padding and boarder areas. Think of the content as a high security military installation. The border box is the barbed wire and electric fence around the compound (content box). Inside the fence is a clear area, the padding box which allows those inside the compound a chance to shoot invaders before they are upon them (giving the defenders some padding from invaders). Outside the boarder box is the margin. Outside the fence around the compound is a mine field which keeps everyone (and other boxes) away.
<img src=" http://knowledge-bank.cauniversity.org/images/html/css_box_diagram.gif" />
The margin, border, and padding boxes can be considered to have a left, right, top, and bottom segments. Which can be called right margin, bottom border, etc. Each box has four edges (coming from basic geometry). The edge of the content box is called the content edge. Each edge can be broken down into left, right, top and bottom, too. The edge is important because this is what you change the width of to provide frames around content. Edges with a width of 0 have the same edge as the box below it. For example, if the padding edge 0 it is the same as the content edge.
Because, the margin is transparent no colour can be specified, however, the width properties of the margin can be set separately for each side or all sides at one time using the CSS shorthand property of margin. Margin-top, margin-right, margin-bottom, margin-left all apply changes to just the side specified.
Width can be set either with a specified size or with a percentage. Because the percentages deal with the size of the containing box, it is often easiest to specify the width. Width is specified in units called Ems. To set the top margin of heading 1 to a width of 2 ems the following would be used: h1{margin-top: 2em;}. Because you often want a constant width around the entire content specifying one rule for each side of the margin would take a while. In comes the margin property to save the day! The margin property is an example of CSS shorthand. It is the property margin and is followed by the values for the sides of the box. If one value is specified the whole margin will be the specified width. Two values set the top and bottom to the first width and the right and left to the second. If you provide 3 values, the top is set to the first, the left and right get the second value, and the bottom gets the third value. You can specify different widths for each side using four values.
Example
Margin: 1em (all widths 1em)
Margin: 1em 2em (top/bottom 1em, right/left 2em)
Margin: 1em 2em 3em (top 1 em, right/left 2em, bottom 3em)
Margin: 1em 2em 3em 4em (top 1em, right 2em, bottom 3em, left 4em)
The padding and border of a CSS block can be set in just the same way and with the same attributes as the Margin is. The same rules about side measurement apply to both padding and border. The border (but not padding) also can be made pretty colours. You can even change the style of the border area. In addition to specific measurements for widths (as in margin and padding) you can just use thin', medium', or thick' for a border-width value. For example, border-top-width: thin' makes the top border thin. To change all sides of the boarder to a size, you just use border-width: thin'.
Border-color is a useful feature. Border-color, like border-width changes all sides to one colour. The border-color also allows you to limit the colour to one or more sides only. For example border-top-color:' changes only the colour of the top border. You can specify the colour values in names (black'), hex-notation, or RGB percentages. A transparent' value is also legal. This makes the border transparent (the colour behind the box shows through) but still has a width.
The border-style' property changes the way the box's border looks. Like other box attribute tags, border-style' can apply to one or all borders. The following values are available for border style:
None: obviously there is no border (actually there is one, but it has 0 width)
Hidden: the same as none for all intents and purposes
Dotted: the border is made up of dots (
.)
Dashed: the border is a series of short lines (---------)
Solid: the border is an unbroken line ()
Double: two unbroken lines (=====)
Groove: appears to be a depression
Ridge: appears to pop out of the page
Inset: makes the entire box appear to be recessed in the page
Outset: the whole box bulges out from the page
Obviously, you can see how these border properties could come in handy to design a button using CSS (hint: remember this for later).
Border shorthand is a space and time saver for people who want to use multiple properties on the same border. The shot hand can be set for the whole border (border:') or for individual sides of the border (as with the other box properties). The following is the general syntax for border shorthand: border: width style color'. For example to make a really cool looking paragraph with a thick border that is recessed and has a black background, you would use the following:
p{border: thick inset black;}
It is important to remember that the order of the values in shorthand CSS is very, very important. For border shorthand it is width, style, colour. Forgetting this order is an invitation to disaster, and a very lengthy review of the code. It's very hard to find an error in order, especially if you wrote the code yourself.
For a Quiz to see how you have followed along, try this:
Set the margin to 3ems on all sides of a heading 1 box, the padding to 3 ems on the top and bottom and 2ems on each side. Now, I want a red boarder that is dotted and thin.
There are several ways to do this, I will list just show one solution. In order to test you still further, if you are unsure of your answer, just put your CSS into a style sheet and apply it to a html file with a h1 tag.
h1{margin-width: 3em;
padding: 3em 2em;
border: thin dotted red;
}
As a little break from CSS theory, I will next cover two really neat features that CSS allows you to add to a web page. Classes and Ids allow you to apply rules only to specific sections. Using an ID or Class is one way to make a button. IDs are defined by the writer of the style sheet. For instance if you want a section to look like a button you could name the id #button. IDs are named with a # followed by the name; the only drawback with IDs is that they must be unique. One use per id is allowed and no more. The id itself can be used like any other page property and can take all CSS rules in the same manner as any other html tag (like h1, p, etc).
Classes are a more powerful instrument to apply specific rules to certain sections. Classes are similar to IDs, but can be used as often as you like. The syntax for a class is .button. A useful way to limit classes is saying p.button; in this case only objects of class button that are also in paragraph blocks on the page will follow the rules. (simply .class or *.class specify the rules to apply to all objects of a certain class)
To make a button using the class attribute the following could be used:
CSS document text includes:
.button { color: white;
background: black;
margin: 10em 30em;
border: thick solid red;}
Inpage text:
<p class="button]click me
This is just one way to make a button, there are many other ways using classes to make buttons. For instance, the margin 10em 30em makes the button an appropriate size, but depending on where you use it, other ways of defining size may be more appropriate.
A neat little feature built into CSS is the .link pseudo-class. The link and related pseudo classes act like classes but are built into CSS. The four most used pseudo classes are:
.link changes all <a> tag properties
.visited changes visited link properties
.active works with properties of currently active links
.hover makes neat things happen when the mouse hovers over a link
( .focus is similar but changes the link when it is selected by tabbing, mouse-over, or in focus for some other reason: browsers made for the blind read
the page and this would allow effects to be added for your visually challenged viewers who do not use mice.)
The link/visited/active/hover take any rules are just like other classes; their use is quite broad and they can be over used quite easily. For instance making all links the same colour can confuse visitors who expect visited links to be a different colour from links they haven't followed. The following example would make link text become un-underlined, yellow, and bold on mouse-overs.
.link {
color: yellow;
font-weight: 800;
text-decoration: none;
}
Now that you have a good handle on how to write CSS, it is time to understand one of the important ideas behind CSS. CSS stands for Cascading Style Sheets. This is important to remember, especially when your style sheets start looking really weird. CSS works on a set rule of order. In general, if two rules apply to the same piece of code (the h1 tag for example) the second style rule wins out. Hence the Cascading. Here is an example I have seen recently of this in action.
a: {rules here}
a:active {rules here}
a:visited {rules here}
a:hover {rules here}
The page was meant to apply the hover over effects only to un-visited pages. However, since a:hover was the last rule, guess what its rules got applied to? (a:, a:active, and a:visited). The correct placement should have been (although any other placement of a:hover would have probably worked like intended, because a:active with mouse-over wouldn't have looked weird in context):
a: {rules here}
a:active {rules here}
a:visited {rules here}
a:hover {rules here}
One final neat trick is the cursor property. This features syntax is:
Tag {cursor: value;}
Cursor can have many uses, however when abused it can be very annoying. Values that are frequently used are:
- crosshair: looks like a + (can be neat on game related sites)
- URL to an image: you can make your own custom pointer by specifying a URI that the browser can download the pointer from; syntax for this is:
tag { cursor : url("image.gif"); }
Written by Darkwater685 (27 February 2004)
Member of CAU Knowledge-Bank Tutorial Writers |
|