Css Note

CASCADING STYLE SHEET(CSS)
The most important word in the label

“Cascading Style Sheets” is the middle
one: “style.” “Cascading” becomes
important only when we get into fairly
complex style usage, while the word
“sheet” is a tad misleading at times. So,
even though we mean Cascading Style
Sheets in the broadest and most accurate
sense, we’ll focus not on the cascading or
sheet-like nature of these beasts, but on
their role in determining the styles of our
web pages and sites.
Styles are defined as rules. These rules tell
any web browser that understands them
(i.e. any browser that supports CSS) how to
display specific types of content structures
when it encounters these structures in
delivering a web page to a user.
Every style consists of one or more rules.
Figure 1.3 shows a CSS rule with all the
parts labeled.
Each rule has two parts:

1. a selector that defines the HTML
element(s) to which the rule applies
2. a collection of one or more declarations,
made up of a property and a value, 3
which describe the appearance of all the
elements that match the selector
The property tells the browser which
element is being defined. For example, font-
weight tells the browser that this
declaration defines the weight of the font.
After the colon that separates the two parts
of a declaration, we see a value that will be
applied to that property. If a value of bold
followed the font-weight property, it would
make the weight of the font in that
document bold. Each declaration must be
followed by a semicolon, with one
exception: the semicolon that follows the
last property is optional and may be
omitted.
h1 {
color: red;}
The selector, h1, indicates that this rule
applies to all h1 headings in the
document. The property that’s being
modified is color, which refers to the font
color. The value we want the color
property to take on is red. Chapter 5 and
Chapter 6 explore fonts and coloring in
CSS in greater detail.
p { font-size: small; color: green;
}
Where can CSS Styles be Defined?

Finally, you can define CSS styles in any
of three places:
❑ inside the HTML (such style declarations
are called inline declarations)
❑ between <style> and </style> tags inside
the head element (this is called an
embedded style sheet)
❑ in an external CSS file, also called an
external style sheet
Inline Declarations
You can style any element by listing style
declarations inside that element’s style
attribute. These are referred to as inline
declarations because they’re defined
inline as part of the document’s HTML.
You can assign a style attribute to almost
all HTML elements. For example, to
make a second-level heading within a
document appear in red text and all capital
letters, you could code a line like this:
<h2 style="color: red; text-transform:
uppercase;">An Unusual Heading</h2>
Embedded CSS
Specifying style properties in an
embedded style sheet is an approach
that’s often used by beginning web
designers and those just learning the
techniques involved in CSS design. It’s
not my favorite method, but it does have
the virtue of being easy to deal with, so
you’ll see it used from time to time in this
book. 12 Where can CSS Styles be
Defined?
To embed a style sheet in a web page, we

place a style element in the head of the
document’s HTML and fill it with style
rules, as shown here in bold:
<head> <title>CSS Style Sheet
Demo</title> <meta http-
equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1, h2 {
color: green; }
h3 {
color:
blue; }
</style>
</head>
The CSS rules contained in the style block

apply to all the designated parts of the
current document. In this case, the first
rule directs the browser to display all level
one and two headings (h1, h2) in green.
The second rule displays all level three
headings (h3) in blue.
Notice that each rule starts on a new line,
and each declaration within the rule appears
indented within braces on its own line.
Strictly speaking, this layout isn’t required,
but it’s a good rule of thumb that improves
the readability of your code, especially if
you’re used to the look of JavaScript code.
External CSS
Finally, you can define CSS rules in a file
that’s completely separate from the web
page. You can link to this file by
including a link element in the head of
any web page on which you want to
implement those styles.
<head> <title>CSS Style Sheet
Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="corpstyle.css" />
</head>
Background Images
By now, you should feel fairly
comfortable assigning background colors
to elements using the background-color
property, so let’s move on to assigning
background images, which is done with
the background-image property and the
urlfunction, as this markup shows:
body { background-color: white; color:
black; background-image: url(fish.jpg);
}
The url function can be used to specify
any image file, similar to the way you’d
use the img element’s src attribute.
If you define a graphic as the background
for a page—as we have in the example
above—that graphic will repeat, or tile, itself
to fill up the entire browser viewport. As
you scroll through the document, the image
will also scroll along
However, you can use CSS to change both
the tiling and scrolling characteristics of
images. You can define the graphic so that,
rather than tiling, it simply appears once,
wherever you position it. More interestingly,
you can instruct the background graphic to
remain in place while other objects that are
placed on top of it, including text,
effectively scroll over it. 91
body {
background-color: #30293f;
color: white;
background-image: url(fisherman.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;}
font-family: Helvetica, Arial, sans-serif;

Css Note

Uploaded by

Copyright:

Available Formats

Css Note

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Note

Uploaded by

Copyright:

Available Formats

CASCADING STYLE SHEET(CSS)

The most important word in the label

Each rule has two parts:

Where can CSS Styles be Defined?

To embed a style sheet in a web page, we

The CSS rules contained in the style block

font-family: Helvetica, Arial, sans-serif;

You might also like