1 July 2008

The Difference between Dedicated Web Geeks and Slackers

Posted by: abbot in Web Design

CSS is rendered directly by a web browser, thus, eliminating the need for special web server features. Absolutely no plug-ins or downloads are required. Therefore, you have no reason to miss this tutorial.

Ways to Implement CSS
1. Inline CSS
2. Embedded CSS
3. External CSS

The mentioned methods each offer an advantage over HTML. Use the one that will best meet your requirements.

Inline CSS
Inline CSS is the easiest method to understand and it is highly recommended for professional web design. Let’s take a block of text as an example. With HTML, you are likely to format it like this:
<p><font face=”Arial” color=”#000000″ size=”3″>Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</font></p>

With CSS, you do it like this:
<p style=”font-family:Arial; color:#000000; font-size:12px;”> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>

Cascading Style Sheets provide designers with greater control over the appearance of web pages. Inline CSS enables the modification of font in exact pixel measurements contrary to the use of the <font> tag, which restricts font sizes to numbers (1, 2, 3, 4, 5, -1, -2, -3, -4, -5…). These numbers must comply with the font settings on users’ browsers, undermining your control over them.

Besides being able to better manage font sizes, inline CSS does not really require a smaller volume of codes for text formatting. It merely is another way to achieve the same result. The following is a better means to implement CSS.

Embedded CSS
Embedded CSS gives way to the separate formatting away from the exact page content. As an advantage, text to be edited is easier to locate without having to browse your way through a mangle of HTML codes. Review our earlier example on inline CSS:
<p style=”font-family:Arial; color:#000000; font-size:12px;”> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>

Using embedded CSS, the same result could be achieved using the following codes:
<p class=”pageCopy”> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>

Afterwards, add the following to the tag’s HTML document:
<style type=”text/css”>
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
</style>

The full HTML code would then appear like this:
<html>
<head>
<title>CJ’s Fun CSS Tutorial</title>
<style type=”text/css”>
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
</style>
</head>
<body>
<p class=”pageCopy”> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
</body>
</html>

Tags: The Difference between Dedicated Web Geeks and Slackers

Web Design,

Subscribe,

(1 votes, average: 5 out of 5)

107 views

This entry was posted on 1 July 2008 at 2:33 PM and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.