Explanation of Old Content
This box contains a brief explanation of what I've done with the old content.
General
The following styling is employed on the body element:
body {
font-family:verdana, sans-serif;
font-size:8pt;
}
They are inherited by all of the body's children elements (which is everything on the page), so this is what put the entire page in this font.
I also placed all of the old content inside a div with the id "oldstuff", and then applied this CSS rule to it to place it there on the right with that border:
#oldstuff {
position:absolute;
top:0;
right:0;
padding:10px;
margin:10px;
border:1px dashed #BBBBBB;
width:300px;
}
This should be self-explanatory.
Headings
The stylesheet employs the following CSS rules for h1, h2 and h3:
h1 {
font-variant:small-caps;
color:#008800;
font-family:cursive;
font-size:3em;
text-align:center;
padding:0;
margin:0;
background-color:#EEFFEE;
}
h2 {
font-family:serif;
color:#000088;
font-weight:bold;
font-style:italic;
font-size:2em;
border-bottom:1px dashed #BBBBBB;
}
h3 {
text-transform:uppercase;
font-size:1em;
}
Note how I reset the preset margin and padding of h1 to 0 and how I can use a bottom border on the h2.
Links
For the links, I used the link pseudo-classes:
a:link, a:visited {
text-decoration:none;
color:#0000AA;
font-weight:bold;
}
a:hover, a:active {
background-color:#EEEEFF;
}
The former block applies to hovered and active links as well, since they remain links even after being hovered over or activated. I reset the text-decoration because the browser usually underlines links by default; I make them bold to make them stand out more and give them a font color. Then on hover and activation, I give the links a background color.
Linked Images
a:link img, a:visited img {
border:0;
}
a:hover img, a:active img {
background:#EEEEFF;
}
The default border on linked images has to be removed. For fanciness, I added a background on hover and link activation - it is only seen through if the image has transparent areas like that Bulbasaur.
Paragraphs
p {
text-align:justify;
text-indent:0.5em;
}
The text in paragraphs is justified with an indentation. Not much to say about this; just note how it is possible to specify lengths in decimals.
Lists
ul li {
list-style-image:url('listarrow.gif');
}
li ul li {
list-style-type:circle;
list-style-image:none;
}
The first rule puts listarrow.gif as the bullet point for unordered lists, but the second negates it and instead makes it have a circle for list items in unordered lists nested inside other lists (whether ordered or unordered).
ol li {
list-style-type:upper-roman;
}
Puts ordered lists in uppercase Roman numbers.
dt {
font-weight:bold;
font-family:"lucida console", monospace;
text-transform:uppercase;
background-color:#DDDDFF;
background-image:url('samplegradient.gif');
background-repeat:repeat-x;
}
dd {
font-style:italic;
margin-bottom:0.5em;
margin-left:2em;
border-left:3px solid #DDDDFF;
border-bottom:1px solid #DDDDFF;
padding-left:0.5em;
}
Now, these are considerably more complicated. The definition terms are bolded, given a font and transformed to uppercase, but that's all been done before in the headings, so the main point I'm demonstrating here is the background image samplegradient.gif which is repeated horizontally across the top of the dt element. As it also has a background color, that color will be displayed below if the definition term becomes too large for the image, which is only fifteen pixels tall - therefore the background color is the color of the bottom of the background image.
The definitions, on the other hand, have been italicized, given a bottom margin to better separate one term-definition pair from another, had their left margin shrunk, padded on the left instead and given borders that thanks to their color give the illusion of extending down from the term.
Tables
table {
border:2px solid #000000;
margin:auto;
}
td, th {
border:1px solid #BBBBBB;
}
Pretty simple this time - just borders that serve more to show how tables are put together than anything in particular relation to CSS, and then the table is centered with margin:auto.
This wasn't here before...
This is the new stuff added to this page in this lesson. The old stuff is on the right, and has not been modified at all; it is there to demonstrate styling of default elements without adding IDs or classes. Here, on the other hand, I will indeed be using some IDs and classes to demonstrate what you can do with them. This is a paragraph here. As you can see, it stays beside the explanation div here on the right, which is a float, without me doing anything with these paragraphs; the float itself controls this.
However, this paragraph is armed with the attribute style="clear:right;", and all of a sudden it is pushed down below the float. Neat, huh? This also serves to demonstrate the use of the style attribute.
This paragraph is not cleared, but that doesn't matter; because there's a cleared element above it, this one goes below that.
So anyway, this div (the one with the thick, black border) has the id newstuff, and the stylesheet contains the following CSS rule for it:
#newstuff {
margin-right:340px;
padding:10px;
border:2px solid #000000;
}
The margin-right creates room for the box with the old stuff; the margin is 340 pixels wide because that's the old content's 300px plus its paddings (10px on each side) plus the margins on each side of the old content.
The explanation div, meanwhile, has the id explanation and is affected by this CSS rule:
#explanation {
float:right;
width:300px;
height:250px;
padding:10px;
border:3px double #000000;
background-color:#FFFFFF;
background-image:url('cssbackground.gif');
background-repeat:no-repeat;
background-position:bottom right;
overflow:auto;
margin:0 0 1em 1em;
}
It is floated right with a set height and width, which makes it float to the right side - the explanation div actually comes at the very beginning of the newstuff div in the code. Remember that its paddings come outside the width, so the width from inner border to inner border is 320px (300px width + 10px padding on either side). The border is double, and as you can see, the width refers to the entire border, not to each part of the double border. Here we have a background image, but this time one with no-repeat and a background-position. In standards-compliant browsers, this means the background image (cssbackground.gif) stays fixed at the bottom right corner of the explanation div; in old versions of Internet Explorer, however, you will not see the background image until you scroll all the way down to the bottom inside the explanation div. The scrolling is, of course, provided by overflow:auto, and then it has margins on the left and bottom so that the text of the newstuff div won't squash into the edge.
The explanation div also has one more CSS rule of its own:
#explanation h2 {
font-family:"courier new", monospace;
font-style:normal;
border:0;
color:#000000;
}
This changes the h2 inside of #explanation: instead of using the general rule we specified for the old content, this should have no border, be black, not italic and written in Courier New (or another monospace font). Because this explanation includes an ID selector, it has higher specificity and takes precedence over the general rule for h2 elements.
Now that that's over with (and took way too much room in here)... let's experiment with some stuff.
This paragraph has the the class highlight. It contains some more stuff here, blah blah blah blah blah, happy happy fun. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is an ordinary paragraph, but this clause is inside a span which also has the class highlight.
This effect is achieved using the same class by having these styling rules:
p.highlight {
color:#FF0000;
font-weight:bold;
}
span.highlight {
background-color:#FFFF00;
font-weight:bold;
}
Note the word "highlight" in the paragraphs above. It is a code element, an element used only for code samples which I figured you would not especially need to learn about; pre is approximately its block-level equivalent although it has other purposes too. Ordinarily, those code elements would be formatted like the other code samples here on this page, an effect achieved with these styling rules:
pre {
background-color:#EEEEEE;
margin:0 1em;
padding:0.5em;
overflow:auto;
}
code {
background-color:#EEEEEE;
}
However, in the highlighted paragraphs, I changed the way the code samples look for the purpose of being able to highlight code as well (or well, technically mostly for the purpose of being able to demonstrate this):
.highlight code, .highlight pre {
color:#FF8800;
font-weight:normal;
}
There is no highlighted pre, but it would look the same as the inline code if there were.
This div has
overflow:visible. This means that if I put an element inside it and position it absolutely with negative numbers that place it partly outside of this div, the other div (blue/purple) will be shown normally. If I put a very wide div in here, you will see it flow outside of the border of this one (red):
Long div
div
This div has exactly the same CSS as the one above, except that this one has
overflow:hidden. This means that in this one, the absolutely positioned div (blue/purple) will be cut off where this one ends. Additionally, if I place a huge div inside it like before, you will simply see it disappear into the right border of this red box:
Long div, exactly as long as the one above
div
The full CSS for those red divs:
#overflowvisible { /* #overflowhidden { in the other, of course */
overflow:visible; /* hidden in the other */
margin:0 2em;
padding:1em 6em 1em 1em;
border:1px solid #000000;
background:#FFEEEE;
position:relative;
}
The overflow:visible was not technically needed as it is the default value, but I put it in anyway for demonstration. There is a large right padding so you can read all of the big div without it going under the absolutely positioned div, and it has position:relative to make the absolutely positioned div position itself relative to this one. (When CSS has /* */ in it, by the way, everything that comes between is a "comment" and is ignored by the CSS parser; these "comments" are not actually in the CSS, but merely there to note the differences between the CSS for those two divs.) The absolutely positioned divs and long divs both have the exact same CSS, being simply members of the same class:
.overflowabs {
position:absolute;
top:-1em;
right:-1em;
width:5em;
padding:1em;
border:1px solid #000000;
background:#EEEEFF;
}
.reallylongdiv {
width:100%;
padding:0 200px 0 1em;
border:1px solid #000000;
background:#EEFFEE;
}
This should all be fairly self-explanatory.
So now, just to finish off, this is a paragraph with some letter-spacing and word-spacing, and here are a span with an underline and an overline and a span with a strikethrough. This is coded fairly simply:
#letterwordspacing {
letter-spacing:0.1em;
word-spacing:0.3em;
}
#underoverline {
text-decoration:underline overline;
}
#linethrough {
text-decoration:line-through;
}
So now go practice with what you've learned, and then go on to lesson six!
