CSS Rocks! Look at all we can do!
9/22/08: I'm taking notes and practicing what we’re reviewing in class tonight…
The headings are centered and green using CSS. Paragraphs are indented 3 ems using text-indent.
The hover effect of the links is using CSS pseudo-classes. My photo is “floating” to the right, with a CSS-rendered border (and padding). The first line of each parargraph
is in Small Caps using the pseudo-element first-line. And while you see this web page with a sans-serif font (and serif headings),
it will print with a serif font (and sans-serif headings), because I have “@media print” in my style sheet.
Testing the blink feature:
BLINK blink BLINK blink BLINK Well, I guess they do all blink in unison…
Testing the combined font selector
Combining multiple style:value pairs in a single font selector, you must list the style attributes in this order:
font: font-style font-variant font-weight font-size/line-height font-family. You can, however, skip attributes.
For example:
1) font: italic normal bold 12pt/14pt Arial,sans-serif
2) font: normal bold 12pt/14pt Arial,sans-serif
3) font: italic normal 12pt/14pt Arial,sans-serif
4) font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif font: italic normal 12pt/ Arial,sans-serif
5) font: italic normal bold /14pt Arial,sans-serif font: italic normal bold /14pt Arial,sans-serif font: italic normal bold /14pt Arial,sans-serif font: italic normal bold /14pt Arial,sans-serif font: italic normal bold /14pt Arial,sans-serif font: italic normal bold /14pt Arial,sans-serif
6) font: italic normal bold /18pt Arial,sans-serif font: italic normal bold /18pt Arial,sans-serif font: italic normal bold /18pt Arial,sans-serif font: italic normal bold /18pt Arial,sans-serif font: italic normal bold /18pt Arial,sans-serif font: italic normal bold /18pt Arial,sans-serif
Ah, but does order matter?
7) font: italic normal bold 12pt/14pt Arial,sans-serif
8) font: italic bold normal 12pt/14pt Arial,sans-serif
9) font: italic normal bold Arial,sans-serif 12pt/14pt
font: normal bold italic 12pt/14pt Arial,sans-serif
The answer is: partially! I was able to switch the order of normal and bold (line 8), and it still worked; but when I moved the 12pt/14pt (line 9 above), or moved the italic (line 10), then certain attributes were not expressed.
Furthermore, the CSS does not validate when out of order, as the W3C CSS Validator results shown below indicate:
Now for some borders:
 border: red solid 10px |
border: red dashed 10px |
border: red double 10px |
border: green groove 20px |
border: blue ridge 20px |
border: blue inset 20px |
border: blue outset 20px |
fuchsia dotted 5px |
fuchsia dotted 20px |
Sub Heading without class and class:first-child pseudo class
- First bullet underneath subsection heading
- Second bullet underneath subsection heading
- Third bullet underneath subsection heading
- Fourth bullet underneath subsection heading
Sub Heading with class and class:first-child pseudo class
- First bullet underneath subsection heading
- Second bullet underneath subsection heading
- Third bullet underneath subsection heading
- Fourth bullet underneath subsection heading
Like many of the students in this class, I am a graduate of the “Govsky School of Web Design,” which means I am a “purist” when it comes to coding valid HTML/XHTML code. It also means I subscribe to the belief that javascript is not an optimal choice, and anything you can do without javascript should be done without javascript. It is my understanding (and this was confirmed at least in part by Ed’s warning about AJAX) that javascript can be a potential security risk, and some people intentionally disable all javascript in their browser settings. Therefore, it is always a good idea, when employing javascript, to test your web pages in multiple browsers with javascript disabled, to make sure that your web page still functions properly. If you are using js for fun little added features, and nothing essential for the page’s functioning, then it is likely to exhibit “graceful degradation,” which is to say that it will still look OK and function properly, even if it’s missing a few nifty features.
So, there’s a little bit of my “web philosophy” Now please tell me a little bit about yourself:
