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.
