Cascading Style Sheets
Style Types:
Inline Styles / Added to any HTML element (tag)within the BODY section of a Web page / Only affect the tag where they are placedEmbedded Styles (also called Global) / Added between opening and closing STYLE tags in the HEAD section of a Web page / Affect entire HTML document
Linked (also called external style sheets) / Stored in an external .css file and linked to any HTML file with the LINK tag / Affect any and all HTML documents that link to it
To create an inline style, add CSS like you would add any attribute to an HTML tag. The syntax (punctuation) is different, but it works almost the same.
Ex: <H1 style=”color:gold; font-family:sans-serif”
<BODY style=”background-color:blue; font-family:arial”
Attributes and values are connected with colons(:)instead of equal signs
Style declarations are separated by semi-colons (;)
To create an embedded style, addopening and closing STYLE tags in the HEAD section of the HTML document. Then add desired style declarations between the STYLE tags for each HTML element you want to format.
Ex: <STYLE>
H1 {color:gold; font-family:sans-serif}
BODY {background-color:blue; font-family:arial}
P, TD {font-family:Tahoma; color:brown; font-size:14pt}
</STYLE>
Notice more than one HTML element can be included in a style declaration. Separate elements with commas (,).
Ex: <STYLE> H1, H2, H3 {color:gold; font-family:sans-serif}
H1 {font-size:22pt}H2 {font-size:17pt} </STYLE>
To create an external or linked style, create a text file with a .css extension for the style sheet, and then link to it the desired HTML document. The text file is saved with a .css extension, not.txt or .htm.
Example:
The LINK tag goes in the HEAD section like this:
<HEAD<TITLE>CSS</TITLE<LINK href="style.css" rel="stylesheet"type="text/css"</HEAD>
Since the .css file IS a style declaration, you do not need to include STYLE tags in it.
rel tells the browser the file you’re linking is a stylesheet
typetells the browser what type of stylesheet you are linking to.
Combining Style Types:
- Inline styles override embedded and external styles.
- Embedded styles override external style sheets.
- External style sheets override the internal style rules set by the Web browser.
- Any style attributes left undefined by a style are controlled by the Web browser.
Applying a STYLE to Part of a Web Page
You can do this by creating separate Web Page sections using the DIV tag. Enclose the section of text you want the changes applied to in DIV tags with a class attribute as below.
Ex: <DIV class=”special”>
This section of the Web page will be formatted by the code defined in the SCRIPT tags.
</DIV>
In your style sheet definition (embedded or external), apply the formatting to the DIV section.
Ex: DIV.special {background-color:yellow; color:green}
If you want to apply formatting to a particular tag, such as the bold tag in a DIV section, you do it like this:
DIV.special B {font-family:courier; font-size:135%}
Formatting Text
Font Family (the name ofthe font) / P {font-family: New Century Schoolbook, Times, serif}
H1 {font-family: Arial, Helvetica, sans-serif}
Font Color / Can be the name of the color,
the hexadecimal color code,
or the RGB in absolute
or relative terms / BODY {color:blue}
P {color: #FFFFFF}
H1 {color:rgb(49,55,201)}
H5 {color:rgb(0%,22%,41%)}
Font Size / Can be in pixels, points, or
comparison (small, medium, large)
or percent / BODY {font-size: medium}
H2 {font-size: 15px}
P {font-size: 12pt}
P B {font-size: 150%)
Font Weight / Can be normal, bold, bolder,
light, lighter,100,200,300, 400,
500,600,700,800,900 / H1 {font-weight: 800}
SPAN.bold {font-weight:bold}
SPAN.light {font-weight: lighter}
Font Style (italicizes the text) / Can be normal, italic, or oblique / P {font-style: normal}
H1{font-style: italic}
Combining Font Values: P { font: italic bold 12pt Times, serif }
Padding / Can be added above, below, left or
right / H5 {padding-left: 10px}
TD {padding: 2pt}
Underline / Overline / Can be blink, line-through, overline, underline or none. / SPAN {text-decoration: underline}
A:hover {text-decoration: none}
Other text decorations
(transform) / Can be capitalize, lowercase,
uppercase, or none. / H3 {text-transform: uppercase}
Text alignment (horizontal) / Can be left, center, right, or justify / P (text-align:left}
DIV.jus {text-align:justify}
Vertical alignment / Can be top, middle or bottom.
Can also be used for subscript and superscript. Can be positive and negative percents. / BLOCKQUOTE {vertical-align:middle}
SPAN.sub {vertical-align:sub}
IMG {vertical-align: -50%}
Special Text Changes
Text Decoration / Can be blink, line-through, overline, underline, or none. / A:hover {text-decoration:none}Text Transform / Can be capitalize, lowercase,
uppercase, or none. / DIV.lc {text-transform:lowercase}
P {text-transform:capitalize}
Font Variant / Can be small-caps or none. / DIV.sm {font-variant:small-caps}
Text Indenting / Can be ems, pixels or percents,
positive or negative numbers / P {text-indent: 5%}
BLOCKQUOTE {text-indent: 15em}
Word, Letter and Line Spacing
Letter spacing (horizontal spacebetween letters) / Specified ininches, millimeters, centimeters, em units, etc. / P {letter-spacing: 0.5em}
Word-spacing (horizontal space between words) / Specified ininches, millimeters, centimeters, em units, etc. / P {word-spacing: 0.4em}
Line-height (vertical space
between lines of text) / Specified in pixels,
as percent of font size OR
as a ratio of line height to font size) / P {line-height: 40px)
P {line-height: 40%}
P {line-height: 2}= double space
Background and Color Properties
Background Color / Can be the name of the color,the hexadecimal color code,
or the RGB in absolute
or relative terms / BODY {background-color:blue}
P {background-color: #FFFFFF}
P {background-color:rgb(49,55,201)}
P {background-color:rgb(0%,22%,41%)}
Background Image
Samples: / Allows you specify the name of the image, how it is repeated, any background color
behind the image, and if it scrolls with the page or is stationary (fixed).
BODY {background-image:url(/images/foo.gif)}
P {background:white url(candybar.gif); background-attachment:fixed}
B {background-image: url{stars.gif); color:white}
By default, background images are titled both horizontally and vertically in a Web page, starting at the upper
left-hand corner of the HTML element. You can control the way the tiling occurs using the background-repeat
style attribute. The options are:
repeat / tiles the image horizontally and vertically behind the entire Web page.repeat-x / tiles the image only horizontally across the width of the page.
repeat-y / tiles the image only vertically across the height of the page.
no-repeat / the image displays only once.
The background-position attribute indicates first the distance from the left edge, and second the distance from
the top edge of the element. It can be in absolute values (pixels, points, or percents) or relative (left, center, right).
Ex: P {background-image:url(logo.gif); background-position: 10% 20%}
places the background image10% to the right and 20% down from the upper-left corner of the paragraph.
P {background-image:url(logo.gif); background-position: 2cm 5cm}
places “logo.gif” two cm to the right and 5 cm down from the upper-left corner of theparagraph.
If you enter one attribute value for positioning, the browser applies that value to the horizontal position and vertically centersthe image.
Background-position keywords and percentages
top, left0%, 0% / top, center
50%, 0% / top, right
100%, 0%
center, left
0%, 50% / center, center
50%, 50% / center, right
100%, 50%
bottom, left
0%, 100% / bottom, center
50%, 100% / bottom, right
100%, 100%
The background-attachment attribute allows the background image to scroll along with the Web page or be fixedin one place.
BODY {background-image:url(logo.gif); background-attachment:fixed}
Combining attributes in your background image style declaration:
BODY {background: yellow url(logo.gif) no-repeat fixed center center}
Hyperlinks
A (or A:link) / A link that has not been visited / A {color:brown; background-color:white}A:hover / A link the mouse is currently over / A:hover {font-size:125%}
A:active / A link the mouse is currently pressing on / A:active {color:orange; font-style:italic}
A:visited / A visited link / A:visited {color:white; background-color:brown}
Turn off the underline on hyperlinks: A {text-decoration: none}
Box Properties
These can be applied to the BODY, TABLE, TD, DIV and other tags.
marginchanges the top, bottom, left, and/or right margin. Can be expressed in pixels, em or percents. / BODY { margin: 5% } / top and bottom margins 2 pixelsP { margin: 2px 4px } / left and right margins 4 pixels
DIV { margin: 1em 2em 3em 4em } / top margin 1em, right margin 2em bottom margin 3em, left margin 4em
border-widthchanges the thickness of a border. Can be expressed as thin, medium, thick, or in pixels or em or units. / TD { border-width: 5px } / all table cells have a 5 pixels border
DIV.box
{ border-bottom-width:20px } / bottom border will be 20 pixels
border-colorchanges the color of the border. / BLOCKQUOTE {border-color:blue} / all borders are blue
TD {border-left-color:brown} / left border is brown
border-stylePossible values: solid, dashed, dotted, double, outset, inset, groove, ridge and none. / DIV.box
{border-width:3px;
border-style:dashed} / makes a 3 pixel dashed line around the box
Combining attributes in your border style declaration / SPAN {border: 5pt dotted blue} / Adds a 5 point dotted blue box around the span
P {border-bottom: thick solid black} / Adds a thick, solid black border to the bottom of the paragraph
The Float Attribute
Allows you to place HTML elements in specific locations on the page. / Can set a margin at the left or right. / DIV.left {float:left}Pseudo Classes
Some browsers support pseudo classes which allow you to modify specific instances of an element without affecting every instance in your Web page.
Ex: p:first-line {text-transform: uppsercase}
p:first-letter {font-size: 200%}
You can create your own pseudo classes using css by naming classes or ids. Classes and id work the same, except that id names cannot be reused within an HTML document. For example, you can’t have P.yellow and DIV.yellow.
To create a class, enter the following attribute in the HTML tag:
- class=”class_name”
- Ex: <P class=”yellow”>
To apply a style to a class of tags, use the following command:
- Tag.class_name {style declarations}
- Ex: P.yellow {font-size: 14px; color:yellow}
Web Site Resources
CSS Pointers Group /RichinStyle Bug List CSS Tutorials /
Web Design Group /
World Wide Web Consortium /
Cascading Style Sheets Mrs. Kerby-Web DesignPage 1 of 5