This page was created to demonstrate the proper use of CSS in separating style from content.
In that spirit, the entire site has been redesigned to eliminate the use of inline CSS, and take full advantage of external stylesheets.
All sorts of different visual styles can be expressed using CSS.
Through the body selector, within the style sheet, one can create a consistent visual design across an entire site. On this site, the background is set to 20% grey, and the text is set to the Cambria font (with Century, and any serifed font set as a backup) at 80% grey.
The anchor link has four different states that can be styled. The basic link state, the visited state (for links to pages that have been visited before), the hover state (for when one places their mouse over the link), and the active state (for the brief period of time during which the link is actually clicked).
This link to my website, No Prestige, can demonstrate all four states. By default, it'll be a shade of dark red. But if one has visited the site before, the colour would change to 33% grey. Hovering over the link will cause the link to go bold, gain an underline and a drop shadow, and change to a shade of darker red. Finally, clicking on the link will add a grey box behind the text, and change the colour to a really bright shade of red.
Each subsequent style builds off on the styles that come before. By default, links are underlined, but I forced the removal of the underline on the basic link style. That meant I didn't need to do that to the visited state because I already overrode that setting on the basic state.
Unfortunately, the visited state can't take many properties in CSS. At least, most browsers won't allow it to. Due to some type of security issue, the latest versions of Google Chrome, Opera, and Firefox will ignore the font-style property, when it's applied to the visited psudo-class. Just as an example.
Through the h1 selector, I got the <h1> tag to start using a different font. Either Calibri, Liberation Sans, or any generic sans-serif font.
The <p> tag has been set to full justification when used in the page's main content. This sets the text to fill up the entire available width, so the right side of the paragraph doesn't give the look of a jagged line. The 'justify' value on the 'text-align' property, alters the spacing between words, making the right side of the screen look straight.
If you haven't seen the Doctor Who 2013 Christmas special, don't put your mouse over this block of text: It was so awesome to see the Time Lords back, saving the Doctor so he could turn into Peter Capaldi! I loved it! And not just because of the Time Lords! But because of Peter Capaldi! I hope he swears a lot in the new series. Bring a bit of Malcom Tucker in! Eh, that's probably not gonna happen.
That's all thanks to a special class I designed, called spoiler. It's often that people on the internet get their bees in a bonnet over getting told major plot points to shows and books they haven't seen or read yet. This tag gives them the option to avoid accidentally reading something, unless they make the concious decision to read it. Can come in real handy when you want to avoid upsetting nerds.
I designed it by setting both the text and background colours to a pure black. But I also set the hover psudo-class to make the background transparent, so when one mouses over it, they can read the text.
Oh, by the way, Snape killed Dumbledore
Let's face it, the default ordered list in HTML looks pretty boring. I think this looks much more interesting!
The Doctors:- William Hartnell
- Patrick Troughton
- Jon Pertwee
- Tom Baker
- Peter Davison
- Colin Baker
- Sylvester McCoy
- Paul McGann
- John Hurt (he counts!)
- Christopher Eccleston
- David Tennant
- Matt Smith
- Peter Capaldi
Setting an ordered list to display Roman Numerals is easy, and can be done with a single property: list-style-type
I think Roman Numerals are pretty
Tables are nice. I modified the default table style to have a collapsed internal cell border, which means it's now a single border, looking simpler, and more like a spreadsheet. I also gave them a thick outside border, and centred the whole thing using the margin property. All applied through the table selector.
| A few small pets | ||
|---|---|---|
| Name | Species | "Occupation" |
| Zoe | Dog | Model, Singer and Diva |
| Russell | Hedgehog | Day Camp Manager |
| Penny | Giant Panda | Gymnast and Ribbon Dancer |
| Vinnie | Gecko | Dancer and Professional Idiot |
| Pepper | Skunk | Stand-up Comedian and Chemical Weapon |
| Sunil | Mongoose | Magician |
| Minka | Monkey | Painter and Nut. |
Within the table, other modifications include adding internal borders through the <td> and <th> tags.
The <th> tag has also been styled to appear inverted; light text on a dark background. In order to complete the look, the table borders had to be modified in kind, but in a way to avoid affecting neighbouring borders. The best way to accomplish this, I found, was by setting the new borders to only appear on the top and sides of the header cell. I also had to increase the table's outside border by one pixel to prevent it being overridden by the table header's border, which seems strange to me.
If you want to drop a quote, there's no method better than the classic blockquote.
“The people who invented photography did not then immediately burn all the paintings.” - Yahtzee Croshaw
Yeah, Sony and Microsoft! What he said!
This blockquote was stylized through the blockquote selector. I changed the text colour to bright white, and made the font bold. I also added a 2 pixel wide 3d border, and added a dark red, semitransparent background. The semitransparency doesn't have much benefit in this context, given that the page background is a solid colour. However, were I to change the background of the entire page, this little addition will prevent whatever colour I choose from clashing with the blockquote. It will also work if I decide to include a background image.
I also spaced things out a bit. I set the margins above and below the blockquote to half an em, and gave the text within the quote one em of padding from the border. It spaced things out and made it all pretty.
