CSS Creating2

Creating style sheets: Embedding CSS within a document

The second way to make your documents stylish is to place specific rules into the content document in order to affect specific elements in the document

In this case, .css is being used inline

This requires the use of the <style> tag in a different way - as an attribute instead of as a paired tag

The <style> tag is placed in the <body> of the content document in the line you wish to affect

More specifically, it is used as an attribute of a regular HTML tag in the content document

This option sidesteps (and overrules) the stylesheet and places the declaration in the content document where it affects only that one element

For example, you have

<h1>This header can be easily changed</h1>

To make the text larger and blue, you would do the following:

<h3 style="color: blue; font-size: 24pt">This header can be easily changed, both in color and size</h3>

And it looks like this:

This header can be easily changed, both in color and size

Note that you can string together a number of rules with the <style> attribute - in this case, font color and weight

This markup is treated by the browser in the same way as a regular style sheet declaration

You use this option when you wish to make a specific change to a specific document without having to go back to the style sheet

It works because the browser will give precedence to a <style> attribute when displaying a page

This is another example of the cascade

The third way is to link a content document to an external style sheet

It requires new markup, which is placed in the <head> of the content document

Here is the one used in this document:

Using this markup, you can link as many pages as you want to a single style sheet

The fourth way is to import a style sheet document into a content document

At the moment, this method (the "@" rule) is only supported some current browsers

It does work with the latest browsers

It's used when there is a set of local style rules that is designed to have top priority in the cascade, but there is a need for additional rules found in other style sheets

It requires new markup, which is placed in the <style> block of the content document:

<html>
<head>
<title>test page</title>
<style type="text/css">

</style>
<body>
<h1>This should be blue/h1>
<p>
This should be yellow text against a green background
<h1>This is blue again</h1>
</body>
</html>

This markup causes the browser to call up a style sheet called <demo.css> and use its rules, so long as they don't conflict with the embedded rules

This method allows you to import multiple style sheets and apply them in the order that they are listed in the <@import> statements

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/csscreating2.html
Last updated 3.15.06 - H. Rosenbaum