Adding styles to a web page
By kunal on Nov 24, 2009 with Comments 0
The most common (and useful) method of applying CSS rules to a web page is by using external style sheets. CSS rules are defined in a text document, which is saved with the file suffix .css. This document is attached to an HTML document in one of two ways, both of which require the addition of HTML elements to the head section.
The first method of attaching a CSS file is to use a link tag:
<link rel=”stylesheet” href=”mystylesheet.css” type=”text/css” media=”screen” />
Alternatively, import the style sheet into the style element:
<style type=”text/css” media=”screen”>
/* <![CDATA[ */
@import url(mystylesheet.css);
/* ]]> */
</style>
The second of these methods was initially used to “hide” CSS rules from noncompliant browsers, thereby at least giving users of such devices access to the website’s content, if not its design. In some browsers (notably Internet Explorer), however, this can cause a “flash” of unstyled content before the page is loaded. This flash doesn’t occur when a link
element is also present. In the full site designs in Chapter 10, you’ll note that both methods are used—@import for importing the main style sheet for screen and link for linking to a print style sheet.
The style tag can also be used to embed CSS directly into the head section of a specific
HTML document, like this:
<head>
<style type=”text/css”>
/* <![CDATA[ */
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}
/* ]]> */
</style>
</head>
You’ll find that many visual web design tools create CSS in this manner, but adding rules to a style element is only worth doing if you have a one-page website, or if you want to affect tags on a specific page, overriding those in an attached style sheet (see the next section for more information). There’s certainly no point in adding styles like this to every page, because updating them would then require every page to be updated, rather than just an external style sheet.
The third method of applying CSS is to do so as an inline style, directly in an element’s
HTML tag: <p style=”color: blue;”>This paragraph will be displayed in blue.</p>
As you can see, this method involves using the style attribute, and it’s only of use in very specific, one-off situations. There’s no point in using inline styles for all styling on your website—to do so would give few benefits over the likes of archaic font tags. Inline styles also happen to be deprecated in XHTML 1.1, so they’re eventually destined for the chop.
The cascade It’s possible to define the rule for a given element multiple times: you can do so in the same style sheet, and several style sheets can be attached to an HTML document. On top of that, you may be using embedded style sheets and inline styles. The cascade is a way of dealing with conflicts, and its simple rule is this:
The value closest to the element in question is the one that is applied.
In the following example, the second font-size setting for paragraphs takes precedence because it’s closest to paragraphs in the HTML:
p {
font-size: 1.1em;
}
p {
font-size: 1.2em;
}
Subsequently, paragraphs on pages the preceding rule is attached to are rendered at 1.2em. If a similar rule were placed as an embedded style sheet below the imported/linked style sheet, that rule would take precedence, and if one were applied as an inline style (directly in the relevant element), then that would take precedence over all others.
Note that it’s possible to import or link multiple style sheets in a web page’s head section. The cascade principle still applies; in other words, any rules in a second attached style sheet override those in the one preceding it.
CSS uses the concept of inheritance. A document’s HTML elements form a strict hierarchy, beginning with html, and then branching into head and body, each of which has numerous descendant elements (such as title and meta for head, and p and img for body). When a style is applied to an element, its descendants—those elements nested within it—often
take on CSS property values, unless a more specific style has been applied. However, not all CSS style properties are inherited. See the CSS reference section of this book for more details.
Attaching CSS files: The @import method
A problem with the link method is that obsolete browsers see the style sheet but don’t understand it. This can result in garbled layouts—and often in unusable websites for those unfortunate enough to have to deal with such arcane web browsers. The solution is to hide the CSS from such browsers by using a command that they don’t understand and so
will ignore. This is often referred to as the @import method.
As shown in the following example, the style element is used to do this:
<style type=”text/css” media=”all”>
/* <![CDATA[ */
@import url(stylesheet.css);
/* ]]> */
</style>
The CSS specifications permit the use of the style sheet location as a quoted string instead of enclosing it in url(). The method shown here is more commonly supported, though.
This method isn’t perfect. Some browsers think they can deal with CSS but can’t, meaning they understand @import, import the CSS, and then screw up the display anyway. Also, some versions of Internet Explorer in some cases offer a flash of unstyled content, although a workaround there is to have a link or script element in the web page’s head
section (which will be likely, since sites should carry a print style sheet in addition to the one for screen, or work with JavaScript). In any case, if you have to cater for obsolete and alternative devices, using @import is probably the best bet, ensuring your site is accessible to (almost) all.
Related posts:
- Using Cascade Order CSS allows you to assign the same rule to the...
- Using Stylesheets You can place styles in three locations: stylesheets, <style>, and...
Related posts brought to you by Yet Another Related Posts Plugin.
Filed Under: CSS Basic
