A style sheet is a form or file that describes the appearance and layout of a document. It separates the document contents from the presentation. There are several style sheet languages, but we will only discuss the most commonly used one, Cascading Style Sheets (CSS). You've actually been using CSS since the first week of class when you use the style attribute. There have been a number of versions of CSS, which the World Wide Web Consortium (W3C) specifies. They are now working on CSS3, even though not all browsers support CSS2.
There are 3 ways of applying a style sheet to a web page
You've been using inline styles since the beginning of the semester but a quick review:
<element style=”style1:value1; style2:value2;...”>
<h1 style=”text-align:center;font-family:san-serif”>
If you use container tags, you may be able to prescribe a style to use throughout the container. In the preceding example, the font will remain sans-serif until we encounter the closing </h1> tag.
This is a way to learn styles, but doesn't really separate the content from the appearance. The real power and usefullness is obvious when you use embedded styles and move the definitions that control appearance away from the content.
<html>
<head>
<title>title </title>
<style>
declarations for styles
</style>
</head>
Declarations look like:
selector {style1:value1; style2:value2;...}
where "selector" identifies an element(s) and the "style:value" pairs follow the same syntax as the inline styles.
<style>
h1 {text-align:center;font-family:san-serif”}
</style>
With this, every h1 element in the document will be centered and in san-serif font.
The style element has several attributes
<style type=”mime_type” media=”media_type”
title=”text”
id=”text”>
declarations
</style>
where type specifies MIME type, media specifies the device used to render the document, and title and id provide a label for the style sheet. For CSS, the MIME type is “text/css” and media, title and id are all optional.
(Note:Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format of email (originally) to support text in character sets other than US -ASCII, non-text attachments, multi-part message bodies, and header information in non-ASCII character sets.)
An embedded style sheet only applies to that particular document, if you want your styles to apply to all the documents in a site, you need to use an exteral style sheet.
An external style sheet is a simple text file that contains the style declarations. It has to have .css as its extension (just as web pages must be .htm or .html).
You can add comments to your style sheets by enclosing the comments in /* comments go here */ . Anything in a style sheet that is enclosed in /*...*/ is ignored by the browser.
You connect your style sheet to your documents by including a link element in your head.
<head>
<link href=”url” rel=”stylesheet”
type=”mime_type” media=”media_type”,
id=”text” title=”text” />
</head>
Where url is the url of the style sheet and the other attributes have the same meanings as in the embedded style sheet.
<head>
<title> My Title </title>
<link href=”mystyle.css” rel=”stylesheet”
type=”text/css” />
</head>
You can also import a style sheet by using the @import url(url) command. You can import into an embedded style sheet or into an external style sheet.
<style type=”text/css”>
@import(mysheet.css);
</style>
If you use an @import, it must come before any other style declarations.
The link element and @import do the same thing, but the link element is more common and supported by more browsers.
Using the link or @import elements allows you to use the same style sheet on all the web pages in your site, which gives a common look to everything.
You can also link a document to several different style sheets, each of which contains information on styles to meet different needs. So you need to know something about style precedence.
When styles come from several different places they are weighted differently so if there is a conflict the browser knows which one to use.
The rules are an inline style takes precedence over an embedded style, and an embedded style takes precedence over an external style. If two styles have the same weight, the one that comes last has precedence. You can override these by adding the !important property to a style declaration. Be aware that any styles you define can be overridden by users who set up style sheets for their browsers.
Also, if a style is not specified for an element, it will inherit the style of its parent element, which is known as style inheritance.
Selectors
Selectors are used to determine the styles applied to a particular element. They can be done by:
1.an element's type
2.an element's attributes
3.the context in which the element is used
4.external information about the element
Type
The simplest kind of selector is the name of an element type.
h1 {color:red}
or with multiples with the same scheme
h1 {color:red}
h2 {color:red}
h3 {color:red}
or
h1, h2, h3 {color:red}
It is a matter of your taste which you choose. Also, when selecting html elements, type selectors are case-insensitive. This means this:
H1, H2, H3 {color:red}
is equivalent to the line above.
Class
One of the most powerful ways to base selection is on an attribute.
The class attribute enables you to apply declarations to a group of elements that have the same value on the class attribute. All the elements in the body of an html document can have a class attribute.
What you do is to classify elements with the class attribute, create rules that refer to the value of this attribute and the browser will automatically apply those rules to the group of elements.
<p class=polonius> Polonius: Do you know me, my lord?</p>
The class name is "polonius". You choose your class names. Class names
can not have any spaces, but may contain digits and dashes.
Acceptable names:
polonius
name-10
first-remark
Unacceptable names:
the man (has a space)
item+12 (has a plus sign)
last!! (has exclamation points)
Class names are case-sensitive so "polonius" is not the same as "Polonius" or "POLONIUS".
Next you write the style rules with selectors that refer to the class name.
Class selector declaration
.polonius { font-weight: bold}
flag character class name
The class selector starts with a flag character (the period) which tells which type of selector follows. For class selectors the period is the flag character. Essentially, the period can be thought of as 'element with the class name'.
Example:
<html>
<head>
<title>Hamlet, excerpt from act II </title>
<style type="text/css">
.polonius {font-weight: bold}
.hamlet {font-weight: normal}
</style>
</head>
<body>
<p class=polonius>
Polonius: Do you know me, my lord?
<p class=hamlet>
Hamlet: Excellent well, you are a fishmonger.
<p class=polonius>
Polonius: Not I, my lord.
<p class=hamlet>
Hamlet: Then I would you were so honest a man.
</body>
</html>
One of the reasons for doing this instead of just using <b> or <strong> on the particular elements, is that if you have to change all of the lines that have a weight of bold to italic or reverse the normal and bold, you make the change in one place and it effects every line where you've used the class designation.
This is one of the powerful features of css, so use it to enhance the structure of your html documents.
The id attribute is similar to the class attribute, but the value of an id attribute must be unique throughout a document. This means that every element inside a body can have an id, but the values must all be different.
id selector declaration
#xyz12 { text-decoration: underline}
id character id value
Notice the id character is #, and again the id value is case-sensitive.
Example:
<html>
<head>
<title>Ids</title>
<style type="text/css">
#xyz12 {text-decoration: underline }
</style>
</head>
<body>
<p id=xyz12> This text should be underlined </p>
</body>
</html>
The style attribute is different from the other things we've discussed so far. Class and id attribute values can be used in selectors, by the style attribute is a replacement for the entire selector mechanism. Instead of having a value that can be referred to, the value of the style attribute is actually one or more CSS declarations.
This is what we have done so far in the class, and it is a simple way to start learning html and seeing how the style element will work.
You can combine selector types to form more complex selectors:
p.polonius {font-weight:bold}
says that only elements that are p (paragraph) with class name polonius have the font-weight bold.
Pseudo-elements allow you to set styles on a part of an element's content. These don't really exist in html, but have been introduced to allow for designs that would otherwise not be possible.
First-letter and first-line enable you to impose styles on the first letter or a word and on the first line of a paragraph. These can only be applied to block-level elements. Not all browsers support these.
The format looks like this:
p.initial:first-line {text-transform:uppercase}
where the selector is:
->p.initial:first-line
and the declaration is:
-> {text-transform:uppercase}
Example:
<html>
<head>
<title>Pseudo elements </title>
<style type="text/css">
p.initial:first-line {text-transform : uppercase}
p.initial:first-letter {font-size: 200%;
float:left}
</style>
</head>
<body>
<p class=initial> The first line of this paragraph should have
upper case letters. Many magazines and newspapers use this effect as
well a drop-cap. This is where the first letter of a text is enlarged
and dropped into the formatted paragraph. Because a web page can be
resized, there is not really another good way to do this</p>
</body>
</html>
:before and :after are pseudo-elements that allow you to insert specific text before and/or after other text
p.note:before{content: "Note: ";
font-weight:bold;}
p.note:after{content: " [end of note]"}
The content property specifies the text that is in the pseudo-element and is only found in the :before and :after pseudo-elements.
You can change the sizes of elements like paragraphs. If you want all paragraphs to be a particular width you could use a class, if you want only one paragraph in a particular document to be a certain width you use an id.
In your style sheet put:
#para {width:150px}
and in your document put:
<p id=”para”> content goes here </p>
Floating an element
If you want the same paragraph to float to one side or the other, you can use float, just as you do for images.
#para {width:150px;
float:right;
background-color:yellow;
margin-left:10px}
This will move the paragraph to the right side of the browser.
This is another way to get a layout similar to the way frames work. In the box model, an element is composed of 4 sections:
the margin between the element and other content
the border of the box
the padding between the element's content and the box's border
the content of the element
Margins are set as we did around images, margin-top, margin-right, margin-bottom, margin-left with lengths after each one or use margin with 4 values denoting top, right,bottom and left.
So:
margin: 0 0 5 10
will set the top and right margins to 0 pixels, the bottom to 5 pixels and the left to 10 pixels.
Padding is set in a similar fashion:
Padding-top, padding-right, padding-bottom, padding-left or padding: top right bottom left
For instance,
padding: 10
will set the padding on all 4 sides to 10 pixels
Formatting the border
You can set the border-top-width, border-right-width, border-bottom-width or border-left-width in absolute or relative units or with keywords, thin, medium or thick, or you can use border-width: top right bottom left
Likewise, you can set the colors:
Border-top-color, border-right-color,border-bottom-color, border-left-color, or border-color: colorname.
Likewise, you can set the border style:
Border-top-style, border-right-style, border-bottom-style, border-left-style, or border-style: top right bottom left.
The styles of borders are none, solid, dashed, dotted, double, outset, inset, groove, ridge.
You can use these to set up horizontal or vertical lines on your page to separate block-level items.
body {color: brown}
h1,h2,h3,h4,h5 {color:green;font-family:cursive;text-align:center}
#para {width:150px;
float:right;
background-color:yellow;
margin-left:10px;
padding: 5px;
border: 2px solid green;}
#other{width: 70%;
float:right;
font-family:fantasy;
font-size:2em;
padding: 10px;
border:5px double black;}
#other:first-line{text-transform:uppercase}
address {color:green;
font-family:normal;
font-variant:small-caps;
text-align:center;
clear:both}
<html>
<head>
<title> External Style Sheet examples </title>
<link href="basic.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<h1> Main Heading Example</h1>
<p id="para">
This is to show a way and a reason for using an id instead of a class.
An id may be used only
one time in a document, so if you want a specific block-level item to
have particular
characteristics, an id is the way to go! <p>
<div id="other">
This is the other block-level item, it is actually a div. This should
demonstrate a way to have the layout you can get with frames, but is
actually better to use. This should make your pages viewable in any
browser - even one that does not support style sheets.
It might not be as nice, but it won't break!
</div>
<address>
Georgia Brown
Department of Computer Science
DeKalb, IL
</address>
</body>
</html>
| Pseudo-class | Description | Example |
|---|---|---|
| link | The link has not yet been visited | a:link {color: blue} |
| visited | The link has been visited | a:visited {color: red} |
| active | The link is in the process of being activated by the user | a:active {color: orange} |
| hover | The mouse is hovering over the link (CSS2) | a:hover {color: black} |
Where a is the element (a href) and the :action is what is to be
changed.
In this case, order is important: "hover" will be used only if it
is listed after the link and visited pseudo classes.
(See page 387 in your text book for more.)
You can set the display style for a group of elements, this makes it easier to change because you can change it in the style sheet and it applies to the entire document/site.
For example, html treats links as inline elements but you could change them to be displayed as block elements. And you can do the same to anything, or vice versa.
| Display | Description |
|---|---|
| Block | Display as a block level element |
| Inline | Display as an in line element |
| Inherit | Inherit the display property of the element's parent. |
| List-item | Display as a list item |
There are more of these, look on page 180 in your text book to see them all.
To place an element at a specific position on the page, we need:
position: type; top: value; right:value;bottom:value;left:value;
where type is the the type of positioning and the other indicate the coordinates of the edges of the element.
Position has five values; static, absolute, relative, fixed, inherit.
The default is static, which allows the browser to place the element based upon where it flows in the document.
Absolute enables you to place an element at specific coordinates on a page or within a containing element.
Relative is used to move an element relative to its default position on the page. An element's default position is where the browser would have placed it if no position were applied to it.
Fixed allows you to fix an element at a specific spot in the document while the rest of the page scrolls by.
Inherit makes an element inherit the position value of its parent element.
If you want to force an element into a specified height and width, you need to set its overflow property. If you don't the size of the element will expand to accommodate the content. The format looks like this:
overflow:type
where type is visible (default), hidden, scroll, or auto
visible – instructs the browser to increase the height of an element to fit its overflow content
hidden – keeps the element at the specified height and width, but cuts off overflow
scroll – keeps the element at the specified height and width, but adds horizontal and vertical scroll bars to allow the user to scroll through the overflow
auto – keeps the element at the specified height and width, but only adds scroll bars if they are needed.
Clip style is related to overflow. The clip style allows you to define a rectangular region through which the element's content can be viewed. Anything outside the boundary of the rectangle can't be seen.
clip: rect(top, right, bottom, left)
where top, right, bottom, and left are the coordinates of the rectangle.
You can create style sheets that work with devices other than a
monitor. By default, a style sheet is applied to all devices and
each device needs to determine how best to render that style. For
example, when you print a web page, the browser decides how to
prepare the document for the printer and the printed page doesn't
always match the page as seen in the browser window.
This is done through the media attribute on the link for the style
sheet. The test book contains a list of the media types and some
examples if you would like more information on using media rules.