Working with CSS

Govindha Raju

It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

Add new looks to your old HTML
Completely restyle a web site with only a few changes to your CSS code
Use the "style" you create on any webpage you wish!

Now we have far better support for CSS, so to tap into its many valuable features, web designers are moving away from HTML as a means of adding style and laying out pages, and into pure CSS design. Why is this so important? The reasons are many:

Keeping presentation separate from the document means you can style that document for numerous media, including the screen, print, projection, and even handheld devices.

Separating presentation from the document means a lighter document, which, in turn, means the page loads and renders faster, making for happier visitors.

CSS offers ways to control one document or millions of documents. Any time you'd like to make a change, you change that style in one location and automatically update to all the documents with which that CSS is connected. In HTML, this couldn't be done.

CSS documents are cached. This means they are loaded into your browser's memory one time. As you move within a site, the browser never has to reinterpret the styles. The results are more fluid movement from page to page and faster-loading pages, which, of course, is always desirable.

By separating presentation from structure and content, accessibility is easily achieved. Documents that don't have heavy tables and lots of presentational HTML are inherently more accessible than documents that do.

In this article we will learn how to set up CSS to be most efficient and flexible for our designs.

Before we can actually put CSS to use, we need to know some important things about the language and how to use it effectively.

CSS Rules

CSS rules are made up of a selector and at least one declaration. A selector is the code that selects the HTML to which you want to apply the style rule. We'll be focusing on common selectors in this article, but you can use more than a dozen selector types as you become more proficient at CSS. A declaration is made up of at least one CSS property and related property value. CSS properties define the style:

h1 {color: blue;}

The H1 is the selector for your h1 headers, and the declaration is made up of the color property with a value of blue. Simply said, this rule turns all H1 elements blue. You'll note that the syntax of the style rule looks different from what we have seen in HTML. The curly braces contain the declarations, each property is followed by a colon, and a semicolon is used after each property. You can have as many properties as you want in a rule.

Applying CSS

Six types of style sheets exist:

Browser style: This is the default style sheet within a browser. If you declare no style rules, these defaults are applied.

User style: A user can write a style sheet and make it override any styles you create by changing a setting in the browser. These are used infrequently but can be helpful for individuals with special needs, such as low vision. In such a case, the user will create high-contrast, large-font styles that override your own.

Inline style: This is style that is used right in the individual element and applied via the style attribute. It can be very useful for one-time styles by element, but it isn't considered ideal.

Embedded style: This is style that controls one document and is placed inside the style element within the HTML document.

Linked style: This is a style sheet that is linked to an HTML document using the link element in the head of the document. Any document linked to this style sheet gets the styles.

Imported style: This is similar to linked styles, but it enables you to import styles into a linked style sheet as well as directly into a document. This is useful in workarounds and when managing many documents.

You'll see examples of these style sheets as we progress throughout the article.

The Cascade

People often wonder where the term cascading comes from. The cascade is an application hierarchy, which is a fancy term for a system of how rules are applied. If you examine the five types of style sheets just introduced, you'll notice that there are numerous means of applying style to the same document.

What if you have got an inline style, an embedded style sheet, and a linked style sheet? The cascade determines how the rules are applied. In the case of style sheet types, user style overrides all other styles; inline style trumps embedded, linked, and imported styles; embedded style takes precedence over inline style; and linked and imported styles are treated equally, applying everywhere any of these other style sheet types are not applied. Browser style comes into play only if no style for a given element is provided; in that case, the browser style is applied.

The cascade also refers to the manner in which multiple style sheets are applied. If you have three linked style sheets, the one on the bottom is the one that is interpreted if any conflicts exist among those styles.

Inheritance

Inheritance means that styles are inherited from their parent elements. Consider the following:

<body>
<h1>My header</h1>
<p>Subsequent Text</p>
</body>

Both the h1 and p elements are considered children of the body element. The styles you give to the body will be inherited by the children until you make another rule that overrides the inherited style. Not all properties, such as margins and padding, are inherited in CSS but almost all others are.

Adding Style Inline

Now we will learn how to apply inline style. We will use inline style infrequently because it styles only the element to which it is applied. This defeats the management power of CSS.

What's more, inline style can be equated with presentational HTML because it goes right into the document instead of being separated from it, defeating the primary benefits of CSS. We use inline style mostly for situations in which a quick fix for a single element is called for, or in rare cases when it's the only style for one unique element in an entire site.

Consider the following element:

<h1>Welcome to CSS</h1>

If this header were part of a complete HTML document and you viewed it in a browser.

Say you don't like the default color and size. You can add CSS rules directly to the element using the style attribute:

<h1 style="color: red; font-size: 36px;">Welcome to CSS</h1>

Now you've got a red header sized at 36 pixels. 

Using Embedded Style

Embedded style controls only the document in which it is embedded. As with inline style, this defeats the purpose of being able to apply styles site-wide. However, there are good uses for embedded style. One would be if that document is the only document in the site that takes those specific styles. Another is workflow related. We like to use embedded style while working on a design because it's all in the same document. This way, we don't have to switch between applications or windows to accomplish my tasks. Because the style rules are the same, we can simply cut out the final styles from the embedded sheet and link them, which we'll see how to do in just a bit.

Embedded style is added to the head portion of the document, within the style element, and it uses the required type attribute (see Example-1).

Example-1. An HTML document snippet describing embedded style

 <head>
<title>working with style</title>
<style type="text/css">
body {background-color: green; color: red;}
h1 {font-size: 36px;}
p {font-size: 12px;}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
</body>

Notice how the color from the body is inherited by all its children.

Creating a Linked Style Sheet

To truly tap into the power of CSS, we will be using linked style sheets the majority of the time. A linked style sheet is a separate text file into which you place all your CSS rules (but not any HTML) and is named using the .css suffix. You then link any HTML file you want to have affected by that style sheet to the sheet using the link element in the head portion of the document.

Example-2 shows a style sheet ready for linking. In it, we have provided a range of style rules and then saved the file to my local folder, naming the file styles.css.

Example 7-2. A style sheet ready for linking

body {
background-color: #777;
color: black;
}
h1 {
font-family: Arial;
font-size: 26px;
color: #bbb;
}
p {
font-family: Garmond;
font-size: 16px;
color: white;
}

In Example-3, you'll find the complete HTML along with the required link to the style sheet within the same directory.

Example-3. The HTML for the style sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with style sheet</title>

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />

</head>
<body>

<h1>Welcome to CSS</h1>
<p>First paragraph.</p>

<p>Second paragraph.</p>

</body>
</html>

Of course, we can link as many documents we want to this style sheet using the link element.

We will note several attributes in use with the link element, as follows:

rel This is the relationship attribute, and it describes the relationship of the link. In this case, the relationship is with a primary style sheet, so the stylesheet value is given.

type As with the style element in embedded styles, we must define the type of language and format in usein this case, text/css.

HRef This is the familiar reference attribute. In this case, we have identified only the file because both documents are in the same directory. We might want to put your style sheets into a different directory; just be sure our href info is accurate. We can also use absolute linking to directly link to a style sheet.

media The media attribute enables you to define different styles for different media. If we wanted to create a separate style sheet for this document that's for handheld devices only, we would link to that and use the media="handheld" attribute. Similarly, a media="print" attribute would send that style sheet only to print. In this case, the media is defined as screen. The default is all, so if we want the same styles to apply to all media, we can use that or simply leave out the media attribute.

As mentioned, we can link as many style sheets to the same document.

Importing Style Sheets

Imported style sheets are a lot like linked style sheets, in that you create a separate file for the styles you want to import. Then you can either import those sheets into a primary style sheet that is then linked to the document, or import directly into the document.

Importing Directly into a Document

Importing into a document actually involves two types of style sheets: the separate style sheet that's to be imported (we will call that import.css) and an embedded style sheet in the document. This is because importing isn't done with an element such as link; instead, the CSS directive @import is used (see Example-4).

Example-4. Importing style with an embedded sheet

<head>
<head>
<title>working with style</title>
<style type="text/css">

@import url(import.css);

</style>
</head>

The style sheet @import.css will be imported directly into the document. Imagine the style element being filled with all the style rules within the import.css file that’s exactly what happens. So now the style is actually embedded in this file.

You can use this technique for as many documents as you want, but typically this technique is used primarily in workarounds. A number of browsers, particularly Netscape 4 versions, do not support the @import directive, yet they do support the link element. Because Netscape 4.x has limited support for CSS and you have to take care to send styles to it, separating out those styles that you don't want it to misinterpret and those styles you know it can support into linked and imported allows Netscape users to see some, but not all, styles. This is very effective as a workaround when you must support Netscape 4 versions.

Another workaround using the @import directive is to simply place all styles into the imported sheet. Then any browser that doesn't support the @import simply won't read the styles, and a plain, unstyled document gets sent to the browser instead.

Most of the time, you won't be using the @import in an embedded sheet unless you have a very specific reason to do so.

Importing Style into a Linked Style Sheet

Another use for the @import directive, and the real reason @import exists, is to be able to modularize your styles and then import them into the primary style sheet.

Imagine that each module file (mod1.css, mod2.css, and mod3.css) contains styles specific to a feature or function within your site. As an example, you might have styles set to manage ads, styles specific to tables, and styles specific to forms. You could place these in separate module files and then import them into the styles.css file, which is then linked to index.html. The rationale behind this approach is that you could make modifications to the modules independently or cut them out easily when they are no longer needed. This technique is most effective when you have very large sites with lots of styles to manage.

Commenting and Formatting CSS

 Just as you can add comments to your HTML files to describe sections, hide markup and content from the browser, or add directives to fellow document authors, you can comment your CSS documents. And just as HTML can be written with indentations or other personal formatting preferences, so can CSS.

Commenting CSS

CSS comments are different than HTML comments. CSS comments open with a forward slash and an asterisk, and close with an asterisk followed by a forward slash. Any content within that area is not interpreted by the browser (see Example-5).

Example-5. Commenting CSS

/* global styles */

body {
background-color: red;
font-family: Arial, Helvetica, sans-serif;
color: white;
}

/* layout styles */

#nav {
position: absolute;
top: 5;
left: 5;
width: 150px;
}

/* hide this style and comment temporarily

.warning {
color: blue;
}

Please unhide the warning style when you're ready to launch */

Everything in bold will not be interpreted by the browser, but all the styles outside of comments will. As you can see, this can help you chunk your style sheets into logical groups, to aid both you and others to find given styles quickly. Additionally, you can hide styles you don't want for use later, and you can leave commentary for other people working with the style sheet.

You will sometimes see HTML comments surrounding CSS within an embedded sheet (see Example-6).

Example-6. HTML comments to hide CSS

<head>
<title>working with CSS Style</title>
<style type="text/css">
<!--
body {
background-color: #777;
color: black;
}
h1 {
font-family: Arial;
font-size: 24px;
color: #ccc;
}
p {
font-family: Vandana;
font-size: 14px;
color: white;
}
-->
</style>
</head>

In this case, the HTML comments are being used to hide the CSS from older browsers that do not interpret CSS. Many of those browsers would try to display the CSS rules in the browser window. Using HTML comments in this manner is still in widespread use today, although for contemporary browsers the technique is unnecessary.

Formatting CSS

You might have noticed that we have used two formatting approaches in this article. The first is to follow the selector with the declaration, all on the same line:

body {background-color: #777; color: black;}

The other is to break up the rule:

body {
background-color: #777;
color: black;
}

Either approach is correct; it's just a matter of personal preference. Many CSS designers are of the mindset that every bit and byte counts, so they opt for the first approach. Others argue that breaking up the rule makes it easier to find the styles you want to modify. Either way, as long as all the required syntax is intact, the formatting of your style sheet is a personal choice.

Styling Text

Now you know the taste of the CSS what it can do, you'll take it further and begin to style your text.

Single Font Names

Choose this technique only when you are absolutely certain that your audience has the font in question.

body {font-family: Arial;}

This sets the default font for all documents to Arial. The problem with this technique is that if the user doesn't have Arial installed on his or her machine, the browser will use the default font this is typically Times and might be quite a different look than what you're after.

Font Family Keywords

Font family keywords in CSS match the family names described in the last section: serif, sans-serif, monospace, fantasy, and cursive.

h1 {font-family: fantasy;}

This would apply the default fantasy font on your visitor's machine to all h1 headers. The problem with using keywords is that you have no control over which font that will be. As a result, keywords are typically used as a fallback method. So, if you're choosing a single font name, you can also add the related keyword after the font you've chosen:

h1 {font-family: Arial, sans-serif;}

In the fairly unlikely event that Arial isn't installed on your user's machine, it defaults to a sans-serif font on the user's machine.

Multiple Names

A technique that affords more control is using multiple family names. This means choosing fonts from the same family used in a specific order:

body {font-family: Arial, Helvetica, Verdana, sans-serif;}

The browser will look for the first named font; if it doesn't exist, it will apply the second, or third. Additionally, you'll note that we have added the family keyword name.

In Example-1, We have created a style sheet to demonstrate using the font-family property.

Example-1. Applying fonts to page elements
body {font-family: Arial, Times, serif;}
h1, h2 {font-family: Georgia , Helvetica, sans-serif;}

You'll notice that we have declared a font for the body but not the paragraphs. This provides a default for all text that falls into the body of a document.

In this example, the paragraphs simply inherit the font family from the body element. Notice also that we have grouped the h1 and h2 because we want them to have the same font. Figure-1 shows the results.

Of course, we haven't defined any other sizes or styles just yet. As a result, the browser styles are applied, so the default size for h1, h2, and paragraphs is determined by my browser until we create additional rules to control those styles.

Sizing Fonts

In this part2 article, we will learn to size fonts using the font-size property along with an absolute, relative, length, or percentage value.

Absolute and Relative Keywords

Absolute keywords size fonts based on the way that the browser computes their size. The keywords available are xx-small, x-small, small, medium, large, x-large, and xx-large. Here, we have applied an absolute keyword to paragraph text:

p {font-size: medium;}

The medium size is typically equivalent to the browser's default size for that element.
Where absolute keywords are dependent upon the browser's computation of fonts, the relative keywords of larger and smaller relate to the size of the parent element. So, if I've set my body font size to medium, I can use the relative keyword of larger to change the size to large, or smaller to change the size to small. Just remember that relative keywords always relate to an already defined size, whether it's defined by a keyword, length, or percentage value.

Length Values

Length values are used with many properties. They include three relative and five absolute values. Relative values are em, ex, and px; absolute values are pt, pc, in, mm, and cm. Absolute values should not be used for the screen, although they are useful when creating print style sheets.

The most commonly used length values for type on the Web are pixels and ems because, technically, they are both scalable, which is appropriate for screen. There's a major problem, however: Microsoft Internet Explorer for Windows does not scale pixels. This is a terrible oversight that has caused real problems, especially because you want to offer your vision-impaired users scalable sizing. Compare the values on the left to the values on the right, where we have bumped up the browser text (in IE, View > Text Size) from its default size of medium to larger.

You'll note that the em values scale, but the pixels and points do not. The pixels should scale and they do in browsers with correct font-sizing support. The pointsremain the same size because they are absolute values, meaning they should never scale. As a result, many web designers advocate the use of ems over pixels. We will note, however, the teeny text on the left. This can also cause serious problems if people have their browsers set to a smaller font size than medium.

Percentages

Percentage values in font sizing are always relative to another value, such as a keyword or length value. So, if we set my body font size to 1em and then set my H1 header to 150%, we will end up with a larger h1 than the body font size, which is relative to the browser default:

body {font-size: 1em;}
h1 {font-size: 150%}

Percentages are particularly helpful in working around browser limitations in font sizing. The reason is that percentages are also scalable. As a result, many workarounds for the pixel problem in IE have been achieved by combining ems and percentages. Still, many designers prefer to go with pixels because of their more consistent rendering, at the cost of better accessibility.

Font Weight and Style

Along with their family and size, fonts can have weight and style. Font weight refers to how bold (or not bold) a font is. Font style refers to different faces that might exist within a given family.

Font Weight

 Defining the weight of the font is done by using the font-weight property combined with an associated value. Values for weight include numeric (100-900, where 100 is very light, 900 is the darkest, and 400 is normal), the keyword normal (corresponding to a weight of 400), the keyword bold (equivalent to a weight of 700), the keyword bolder (specifies the next higher weight), and the keyword lighter (specifies the next lighter weight).

Example-2 shows a style sheet with a variety of weights applied.

Example-2. Styles describing font family, size, and weight
body {font-family: Georgia, Times, serif; font-size: 1em; font-weight: normal;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 250%; font-weight: bold;}
h2 {font-size: 170%; font-weight: lighter;}
.accent {font-weight: 800;}

Font styles help alter the face. To apply a font style, you use the font-style property with a value of normal, italic, or oblique.

Coloring Text

This is the easy part. Text color uses the color: property, which, as we can see, does not have a font or text prefix.

To apply a color to a font, simply use the color property along with an appropriate color value.  Suppose we want to color up the text a bit, so we are going to apply color to my existing styles (see Example-3).

Example-3. Coloring the text
body {font-family: Georgia, Times, serif; font-size: 1em; font-weight: normal; color: black;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 250%; font-weight: bold; color: #999;}
h2 {font-size: 170%; font-weight: lighter; font-style: italic; color: #333;}
.accent {font-weight: 700; color: red;}

Applying color to the body, H1, h2, and class selectors.

Text Decoration

You can "decorate" text with CSS that is, apply or remove a particular decorative value. This is done using the text-decoration property, with values as follows:

none This is used primarily to remove the default underlines from links

underline This places a line underneath the selected text. Usability specialists tend to shun underlined text because it can be confused with linked text.

overline This places a line above the selected text.

line-through This places a line through the selected text.

blink This causes text to blink, a feature that was introduced (and used to the point of pain) by Netscape in the early days. It works in all contemporary browsers but Internet Explorer.

Example-4 serves up an inline CSS sample for decorating text.

Example-4. Decorating text with CSS

 <p style="text-decoration: underline;">This text is underlined</p>
<p style="text-decoration: overline;">This text has an overline</p>
<p style="text-decoration: line-through;">This text has a line-through</p>
<p style="text-decoration: blink;">This text blinks</p>

CSS10.tif
Working with Links

Working with Link States

Several states for links are considered standard for all browsers:

link The link state is the state of the link before being activated.

visited The visited state occurs after the link has been visited.

hover Hovering is the state of the link as you hover the mouse pointer over the link.

active The active state occurs as you are clicking on the link to activate it.

CSS categorizes the link and visited states as pseudo classes, and the hover and active states as dynamic pseudo classes. You can see how hover and active are dynamic: They require some kind of action from the user to work. The link and visited states occur before and after interaction.

Example-5 sets up some general styles for the document, as well as styles for all link states.

Example-5. Styling links using pseudo class and dynamic pseudo class selectors

body {font: 16px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 20px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 28px Georgia, Times, serif; color: #ccc; background-color: black;
text-transform: lowercase;}
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: green;}

You'll notice that I've styled the anchor element, too. Because the a is an element selector, you can use it to set defaults that will then be inherited. Pseudo classes are not inherited, for logical reasons: The whole point is to be able to make changes in each state. However, there will be commonalities, so those common styles can be set in the anchor, with the independent styles in the selectors for each state.

The document to which we have applied these styles. We will notice our cursor hovering over a link so you can visualize the change.

Conclusion

In this article we have learned how to use Styling Text, font sizes, coloring test, hyperlinks Rest of the CSS properties you can explore by your self.








}