Cascading Style Sheet

Download as pdf or txt
Download as pdf or txt
You are on page 1of 33

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)


In 1996 the W3C recommended the adoption of a standard set to
style sheets, Cascading Style Sheets level 1 (CSS1).
The original purpose of CSS was to provide HTML authors with
more formatting support and give them a way to apply uniform
styles to multiple documents.
Cascading Style Sheets level 2 (CSS2), introduced in 1998,
included additional features and functionality.
Cascading Style Sheets level 3 (CSS3), was started in 1998 and like
HTML5 is still a standard in progress, but is supported (to some
extent) by most current web browsers.
CSS4 began as a W3C working draft in September 2009 and is not
sufficiently developed yet to be supported by any major browser.

Why Use Cascading Style Sheets?


The primary reason for using CSS is to separate a documents
content and structure from its presentation. In so doing it
provides the document author with much greater control over
the documents format.
Keeping the content and presentation information separate also
allows you to change your presentation layout or method
without having to modify the documents themselves, and
allows you to apply one style sheet to any number of
documents.
If a webpages presentation is determined entirely by a
stylesheet, you can simply change the stylesheet to completely
change the pages appearance.

CSS Syntax
CSS contain rules and declarations that instruct a
program, such as a Web browser, how to display
certain elements.

Selector: A selector is an HTML tag at which style will be applied.


This could be any tag like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties.
They could be color or border etc.
Value: Values are assigned to properties.

Defining Styles

In order to use a style sheet with your HTML5 document, you


need to tell your document where to locate the style
definitions. There are three ways to define styles:

1. Linked (External) Style Sheets: Style definitions in linked


style sheets are stored in a file separate from the HTML5
document.
2. Global (Embedded or Internal) Style Sheets: Style definitions
in are stored in the HTML5 document global style sheet itself
within the <style> element in the <head> of the
document.
3. Inline Styles: Inline styles are applied to a single element
within the start tag of the element.

Linked Style Sheets

Linked Style Sheets: Style definitions in linked style sheets


are stored in a file separate from the HTML5 document.
Linked style sheets provide style definitions to many
documents each document simply has to reference a single
style sheet.

The syntax for a linked style sheet declaration in an HTML5


document is:
<link rel=stylesheet href=mystyles.css type=text/css />

The <link> element is used to define the style sheet. The


<link> element is an empty element and must be contained
within the <head> element of an HTML5 document.

Linked Style Sheets

The rel attribute specifies this <link> element to be a link


to a style sheet.

The href attribute, like that for the <a> (anchor) element,
specifies the location of the style sheet file on the system.
Both relative and absolute URLs can be used as the value for
the href attribute.

The type attribute declares this style sheet to be a plain-text


file containing CSS styles.

Linked Style Sheet - Example

Global Style Sheets

Global Style Sheets: Style definitions in global style sheets


are stored in the HTML5 document itself within the
<style> element. They <style> element must be
contained within the <head> element.

The syntax of a global style sheet is:


<style type=text/css>
<!--

style definitions go here

-->
</style>

Notice that the section where the global styles are defined is contained within an
HTML5 comment. This is to hide the actual contents of the style definition from older
browsers that dont support CSS. The comment tags are not necessary to make
CSS work, but if they are not provided in an XHTML document, older Web browsers
may actually display the style property definitions on the Web page!

Global Style Sheet - Example

A global (internal) style sheet

Inline Styles

Inline Styles: Inline styles are applied to a single


element within the start tag of the element.

For example, if you wanted to assign certain


properties to the text within a paragraph, you would
include style definitions like the following:
<p style=color:red; font-family:arial;>
paragraph text
</p>

Inline Style - Example


Inline styles

Style Precedence The Cascade

An HTML5 document can get its style information from any


of the three style definition methods, or from a combination
of any or all of them.

When a style is defined in more than one place for a


particular element the definition that is closest to the element
itself is used.

For example, suppose that an HTML5 document references a linked


CSS file that defines style properties for the <h1> element, setting its
font color to blue. The document then defines a global property
within its <style> element that sets the font color for <h1> to red.
Finally, a particular <h1> element within the document defines its
font color to be purple by using the style attribute. Which style
will be displayed in the browser? Will the font appear in blue, red,
or purple? Answer: purple.

Style Precedence The Cascade

Inline styles on particular elements override global


styles defined in the <style> element or in linked
CSS files.

In turn, global styles defined in the <style>


element of an XHTML document override style
settings from linked CSS files.
Browser defaults

External styles

Embedded styles

Inline styles

Style Precedence

The ability to override styles gives developers a lot of power.

For example, a developer could use a linked CSS file for the
common formatting properties for all of the documents on a
Web site. If one particular document needed special
formatting properties, the developer could define global
styles within that document without affecting the rest of the
documents. The same is true for individual elements. A
developer who wanted all of the <h1> elements in a
document to be blue would define this in the <style>
Element or in a linked CSS file. If one particular <h1>
element needed red text, the developer could define the red
style on that particular element, which would override the
blue setting of the other <h1> elements.

CSS Properties

There are many types of CSS properties:

1.

Font properties define font styles such as font family or type, size,
weight, and variant.

2.

Text properties define the layout of blocks of text, words, or characters,


including spacing, alignment, transformation (forced uppercase or
lowercase), and decoration (such as underline, overline, strikethrough,
and blinking).

3.

Color and image properties define the color and background formatting
of text and images. These properties can also define the position of a
background image and whether the image is repeated (tiled).

4.

Border properties define the style of borders for elements like tables and
images, as well as for the entire document. Border properties include
width, height, style, color, margins, and padding.

5.

Display properties define the style for the structure of the document.
These properties can define the placement of elements within the
document, such as block or inline, and how whitespace is formatted
within the document.

Font Properties
Property
font

font-family
font-size
font-style
font-variant
font-weight

Description

Value Example(s)

Global font declaration. Can


define all font properties in one
property.

font-family, fontstyle, font-weight,


font-size, fontvarient

Font type to display text.

arial, courier

Size of font in pixels or as a


percentage.

small, x-small,
medium, large,
x-large

Style of font.

italic, bold

Font rendering.

normal, small-caps

Darkness of font. Uses name or


number.

normal, light, bold,


bolder, 100, 200,
300, 400, etc.

Text Properties
Property
word-spacing
letter-spacing
text-align

vertical-align

text-indent
text-transform
line-height
text-decoration

Description

Value Example(s)

Amount of space between words in an


element.

normal, number of pixels

Amount of space between letters.

normal, number of pixels

Horizontal alignment of text on page.

right, left, center

Vertical alignment of text on page.

baseline, sub, super,


top, text-top, middle,
bottom, text-bottom,
percentage

How much first line is indented.

0, number of pixels (i.e. 10 px),


percentage (i.e. 10%)

Change case of text.

uppercase, lowercase,
capitalize, none

Amount of space between lines of text.

normal, number of pixels

Special controls of text appearance

underline, overline,
blink, line-through,
none

Color Properties
Property
color

background
backgroundcolor

Description

Value Example(s)

Text color

red, blue, color code

Global background declaration. Can


define all background properties in one
property.

background-color, backgroundimage, background-position,


background-repeat, backgroundattachment

Color of elements background

color name, transparent,


inherit
URL, name of local file.

backgroundimage

Image to be used as a background.

backgroundattachment

Scrolling of background image with the


element.

scroll, fixed, inherit

backgroundposition

Position of elements background.

top, center, bottom,


left, right, percentage,
number of pixels

backgroundrepeat

Repeat pattern for background image


(tiling).

repeat, repeat-x,
repeat-y, no-repeat

Border Properties
Property
border-color
border-width
border-style
margin-top

Description

Value Example(s)

Color of the border element.

red, blue, color code

Width of the border.

medium, thin, thick,


number of pixels.

Style of the border.

none, solid, double

Width of margin at the top of element.

0, number of pixels, percentage.

margin-bottom

Width of margin at the bottom of


element.

0, number of pixels, percentage.

margin-left

Width of margin at the left side of


element.

0, number of pixels, percentage.

margin-right

Width of margin at the right side of


element.

0, number of pixels, percentage.

Amount of padding at top of element.

0, number of pixels, percentage.

padding-top

Border Properties (continued)


Property

Description

Value Example(s)

Amount of padding at bottom of


element.

0, number of pixels, percentage.

padding-left

Amount of padding on left side of


element.

0, number of pixels, percentage.

padding-right

Amount of padding on right side of


element.

0, number of pixels, percentage.


none, left, right

clear

Whether an element permits other


elements on its sides.

float

Floating element.

none, left, right

Height of an element.

auto, number of pixels,


percentage

Width of section

auto, number of pixels,


percentage

padding-bottom

height
width

Display Properties

Property
display
white-space
visibility

Description

Value Example(s)

Controls display of an element.

block, inline

Whitespace formatting.

normal, pre, nowrap

Controls visibility of element.

inherit, visible,
hidden

CSS Rules

CSS rules have two parts: a selector and a set of property


declarations that define the style or styles that will apply to
the selector.

The selector can contain a single element, a class/id selector,


or a list of selectors. Multiple selectors are separated by
commas. For styles that have more than one property
defined, each property is separated by a semicolon.

The following page shows two examples of CSS rules, the


first is an example of a rule that applies to a single element,
in this case, the <h1> element, and the second rule applies to
three elements, the <h1>, <h2>, and <p> elements.

CSS Rules Examples


h1 {
color: black;

CSS rule applying to


a single element.

font-size: 12pt;
font-family: arial;
}

h1, h2, p {
color: red;
font-size: 12pt;

CSS rule applying to


a three elements.

font-family: arial;
}

CSS Comments

The syntax for comments in CSS is different than weve seen


so far for HTML5 documents (recall HTML5 comments
begin with <!-- and end with -->). Comments in CSS
begin with /* and end with */. The following is an
example of a CSS comments:
/* This is a comment in CSS */
/* Comments can also
span multiple lines */

Web browsers and other processing applications ignore


comments in CSS files.

As with your HTML5 documents, you should comment your


CSS files.

CSS Classes and IDs


You might be wondering after reading the first part of the CSS
notes and creating your first style sheets what to do if you need
to assign more than one style to the same element.
For example, suppose that you define the following style for
the <p> element:
p { color: red }
If you define the <p> element like this, all paragraphs in your
document will be formatted with red text. If you want some
paragraphs to have black text, youll need to override the
global styles with an inline style. This however can become
quite tedious if many style changes are needed in a single
document.
The better solution is to use a class or id selector.

CSS Classes and IDs


Class and id selectors are used to define styles in your
document that are independent of elements.
Classes can be used to define styles for any number of
elements and for any number of occurrences of elements in a
document.
The id attribute occurs only once in a document, so it should
not be used to declare styles for a number of elements.
For example, if you know that a certain element in a document
will be used to uniquely identify the document, but you are not
sure which element it will be in each document, you can use
the id selector to generically reference the unique element
independent of the document itself.
The syntax for the class and id attributes are shown on the next
two pages.

Class Selector Syntax


Style Sheet
.class_example {
color : red
}

XHTML document reference


<p

class=class_example>

ID Selector Syntax
Style Sheet
#id_example {
color : black
}

XHTML document reference


<p

id=id_example>

Using class and id Selectors


Using class and id selectors for style formatting requires certain
changes to the HTML5 document because the appropriate attributes
must be defined for each element to be formatted.
Classes can also be assigned to individual elements to allow more
control over formatting. This is done by placing the name of an
element in front of the period in a class style declaration. For
example, the following defines class formatting styles that apply
only to the <p> element:
p

{ color: black }

p.red_text { color: red }


p.cyan_text { color: cyan}

These declarations set font colors for the <p> element depending on
which class is defined in the element. If no class attribute is
specified, then the declaration for the <p> element of black is
applied.

Property Inheritance
Elements that are contained within other elements are said
to be children of the outer elements, and the outer
elements are referred to as parents of the nested elements.
This hierarchy of elements is applied to CSS in the form
of property inheritance.
Property inheritance means the properties that are defined
for parent elements are passed along to child elements,
unless the child element overrides the property.

You might also like