Title: XHTML/CSS 2
Class: Coding
Date: 03.03.2007
XHTML/CSS Part two
What we saw of CSS in the previous section is termed Inline style and is supposedly the fastest form of style. However, having to type so much in each tag is not only hard work but also makes your file sizes much bigger.
Embedded style
Embedded style is used where it can be used multiple times in the same page, for example in paragraph tags. Look at the source of this page!
Whatever you do, you cannot guarantee what a page will look like on another users computer. The main problem is that the fonts used come from your own computer - not from the web page! Your computer probably doesn't have the same fonts that I have, and it could be a completely different operating system. Only three font types are found on all computers - serif, sans serif and monospaced. But they have a wide variety of names!
It is time to look at an example to illustrate some points. This is a small but typical sample:
<style type="text/css">
/*<![CDATA[*/
<!--
.text {
text-align: left;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-weight: normal;
color: #000040;
}
.text2 {
text-align: left;
font-family: Times New Roman, Times, Serif;
font-size: 14px;
font-weight: normal;
letter-spacing: +1;
color: #000040;
}
A:link{
color: blue;
}
A:active{
color: red;
}
A:visited{
color: purple;
}
-->
/*]]>*/
</style>
Here we see two of the common font types with their usual names. Arial is found on Windows machines and is roughly equivalent to Helvetica on older Unix systems. If neither of these fonts are present, then there must be a Sans-Serif font of some kind! Linux machines often have a Dejavu-sans font which is set as the default Sans-Serif font. The same applies to the Serif fonts.
The size is set in pixels but that doesn't guarantee that the size will be the same in all cases. These fonts are termed variable-width fonts and it is this aspect that causes most problems. A string of text rendered in one font could appear much longer in another. It isn't uncommon to see text escaping out of it's containing div! Also, Mozilla Firefox browser is known to render fonts in a different size to other browsers. To make matters worse, users can choose their own fonts in the 'Preferences' or 'options' section of most browsers.
This seemingly impossible problem can be overcome by NOT filling up your divs. Leave plenty of free space and you will find that the overall look of your webpage actually improves! White space is good - clutter is bad! Another useful hint is included here in the form of letter-spacing: +1; which greatly improves the readability of many fonts.
The last three items determine the colours of your links. Note that the 'hover' isn't standard on all browsers (originally a Microsoft only item) so don't use it in critical cases!
OK, this style goes in the head section after the meta tags. To make use of it, we use the class name in our tags. Let us make a sample div to illustrate this: (put in body section)
<div id="textbox" style="position:absolute;left:5px;top:5px;width:250px;background-
color:transparent;border:solid 1px #ff0000;overflow:hidden">
<p class="text">Mary had a little lamb, it's fleece was white as snow.</p>
<p class="text2">It would really taste nice with mint-sauce if she didn't let it grow.</p>
</div>
Now this will always work because we haven't given a 'height' to the div. The div simply resizes itself according to the amount of text. On a tight page layout, this isn't prefered at all! Try giving a height in the div's style section, tweak it to just contain the text, then see what happens in different browsers.
The text in the above example touches the border which isn't good. Without the border, it really doesn't matter. Note that there is a 5 pixel gap between the left and top edge of the screen as we mentioned earlier. If you want the border, then we need to space the text within the div by using padding. The all-in-one form of padding is easiest. It uses the order of top, right, bottom, left - think of it as clockwise! Add padding: 3px 5px 5px 5px; into the div's style. The top value is less because fonts naturally have space remaining at the top.
Hopefully by now you can figure out yourself how to position divs and the basics of styling text. Practice makes perfect, so spend a lot of time playing with your own content. Don't forget the <br /> which is like the paragraph but doesn't add a blank line. You should be able to produce text and format it in much the same manner as a word-processor.
A question you might (or should) ask now is, "What would happen if I didn't use style?"
In HTML, we have both DIV and SPAN and many people are confused about the difference. A div produces a line break whereas a span does not. What that means is multiple (style-less) divs would appear in a vertical column. It is as if you pressed carriage return between each one. Multiple spans would appear in a continuous horizontal line. The advantage of using style is that the div or span appears exactly where we say it will! With style, we can use either div or span - it really doesn't matter, although divs are prefered. The span is often used in this context:
Email: <span>ceo@k</span>relay.com
This is a good example used to hide email addresses from automated web crawlers or Bots.
Although not directly related to text, the body tag can be styled to improve readability. Most people actually have their monitor's brightness level set far too high. If we make the page background less white, then everything appears sharper! Try adding this to the body tag and any divs that have white backgrounds:
style="background-color:#F9F9F9"
Did I hear a few Wow!'s?
In the next part we move from text to images.