Cascading
Style Sheets
(CSS)
MUHAMMAD RASHID MUKHTAR
Outline
What is CSS?
Using Style Sheet(Basics)
CSS Selectors
Type
Class
ID
Selector Precedence
Hierarchy
Ancestor Descendent
Parent > Child
Siblings
Hierarchy Precedence
When to Use which?
What is CSS?
What is CSS?
Cascading Style Sheets (CSS): is a
simple mechanism for adding style
(e.g. fonts, colors, layouts) to Web
documents.
Styles provide powerful control
over the presentation of web
pages.
Style Sheets
Each element on a page has a style
defined for it.
The style is defined by a set of attribute
: value pairs.
Style attributes can control:
Typeface and font properties
Background properties
Box-related properties
List properties
Additional Step to Standardize
Appearance
(Solves a number of CSS problems)
Add this to the CSS file: *{
padding: 0px;
margin: 0px;
}
Each browser is able to define how they want certain elements to
be displayed by default.
For example, one browser might put more padding on 'h1' than
another browser.
So this puts all elements back to 0.
It's also nice to just be able to specify everything on your own so
that you have complete control of the page. The code above is
good enough for many purposes.
Censored
Censored
CSS Syntax Validation
W3C's CSS validator
[Link]
Awkward to use compared to FireFox and Opera
Use FireFox (or Chrome or Opera) – can save "lots"
of time!
FireFox Web Console
shows CSS errors
Using CSS
BASIC USAGE
Three Different Scopes of CSS
Local/Inline
confined to a single element (tag)
Internal/Embedded
Defined in head section
affect elements in an entire page
External
Define in separate file
can affect multiple pages
Precedence
Local > Internal > External
How to use
Inline Styles
<p style="color: blue">
Internal Style Sheets
<style>p { color: blue; }</style>
External Style Sheets
<link rel="stylesheet" type="text/css"
href="[Link]">
Inline Styles
Defined for individual elements, at the point of use (in the
HTML).
Useful for “one-off” styles that are not likely to be used
elsewhere.
Method:
<tag style="attribute:value; attribute:value ...">
HTML text</tag>
The attribute:value pairs are what would go between { } if this
were a style-sheet rule. There is no selector since the style applies to
this element only.
Inline Style Sheet
Example
<h1 style="color:white;
background:orange; font-
weight:bold;">Internal Style Sheet
Applied to Header 1</h1>
Internal Style Sheet
How to create?
Put <style> </style> tag between <head> and
</head> tags of your HTML page
Use type attribute to indicate the style sheet type,
usually type=“text/css”
Specify a default style sheet language for the whole
document by
<meta http-equiv="Content-Style-Type"
content="text/css" />
Put your set of style sheet rules in between <style>
and </style> tags
Embedded
<html> Style Sheet
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
•Style definitions go into a <style>
</style>
element in document head.
</head>
•Selector determines what elements the
... style rule applies to.
</html> •Style definitions separated by ; are
enclosed in { }
Embedded
Style Sheet
(cont’d)
<html>
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
</style>
•The type attribute can only be "text/css". (It
</head> is leaving room for future alternative style
... languages.)
</html> •Note: CSS is not HTML!
External Style Sheets
A style sheet can be placed in a separate file
(usually named with suffix .css) and referenced
by HTML files that need it.
Useful for centralizing control of style and ensuring
uniform appearance across many pages of a
web site.
The contents of the file are what would go
between <style> ... </style> of an
embedded style sheet. Note: this file is not HTML!
The file is referenced using a <link> tag in the
HTML document's head portion.
Example of using style
sheet
<html>
<head>
<title>Style Example</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
... <p class="excerpt">affected text</p> ...
</html>
The rel attribute specifies the relationship of the referenced file to
this page.
The type attribute must be "text/css".
The href attribute is a URL pointing to the external style sheet.
Defining Style Sheet
A style sheet consists of a set of rules.
Each rule consists of one or more selectors and a
declaration block.
A declaration block consists of a list of
declarations in curly braces ({}).
Each declaration consists of a property, a colon
(:), a value, then a semi-colon (;).
CSS Style Structure
General format of a style definition in a CSS:
Selector {
property:value;
}
Comments
/* this is a comment */
Style Sheet Syntax Explained
selector property value rule
CSS Selectors
Type Selector
redefines the look of a specific tag
A type selector matches every instance of the element
type in the document tree
E.g. body {background-color: #000000;}
Class Selector
can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML, <p class=“indent”>
ID Selector
E.g. #myId {color: #38608A;}
In HTML, <h1 id="myId">some text..</h1>
CSS Tag Styles
Formats all elements associated with a certain type of tag
Example: Formats all page text in <p> tags
p {
font-family:cursive;
font-size:12px;
font-weight:bold;
background-color:#00FF00;
}
Separate each style with a semi-colon ;
Enclose style specification in {...}
CSS Class Styles
Not tag-specific
Allows you to:
Apply the same style to different tags
Override tag styles
A class style has precedence over a tag style
CSS Class Styles (continued)
Approach:
Define a class style in the style sheet by prefacing the
class name with . (dot)
.LargeText {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
}
<div class="LargeText">Hello World</div>
<pApply
the class style to specific
class="LargeText">Now tags
the using
is the class
time</p>
attribute:
<p>For all good men </p>
CSS ID Styles
Allow you to specify properties for a specific page element
Use the id attribute to identify the element
ID's should be unique – not used twice in the same page
<table id="AllLettersTable">
<tr><td>The quick brown fox</td></tr>
<tr><td>jumped over the lazy dog</td></tr>
</table>
Don't include a second table in the page with the
same id
CSS ID Styles (continued)
Assign names to ID styles by describing the type of object
you want to format, not the style description
Good choices:
Banner
ContentArea
Navigation
Poor choices (for id styles – okay for class styles)
RedBorder
ComicText
ID Styles (continued)
Defining an ID style:
Preface the style with #
#AllLettersTable {
font-family:Arial, Helvetica, sans-serif;
background-color:#996633;
width:50%;
}
Using Different
CSS Selectors
Grouping
When several selectors share the same declarations,
they may be grouped into a comma-separated list.
e.g. h1, h2, h3 {font-family: Georgia;}
Universal selector
The universal selector, written "*", matches the
name of any element type.
e.g. * {border: 2px;}
Style Precedence
Sometimes an item has multiple applicable styles
Example: all page elements are in the Web page
<body></body> element and could have this applied to
them
Therefore Web pages follow a style precedence:
Less Lower
specific
Tag styles precedence
Class styles
More Higher
specific ID styles precedence
Style Precedence
Styles that are more specific take
precedence over styles that are less specific
body {background-color: #00FF00} <body> less
h1 {background-color:#CC00FF} specific
<h1> more
specific
Style Precedence
If style rules conflict, the style that appears last
(later) in the style sheet is applied
But this isn't something that should be done in a style
sheet
body {background-color:#00FF00}
body {background-color:#CC00FF} This one
is used
CSS Cascade
When there are more than one style for an
element, they are cascaded in this order:
Browser defaults
External style sheets
Internal style sheets
Inline styles
An exception can be forced using !important
p { font-weight: bold !important; }
Hierarchy selector
Ancestor and descendant
div p {…}
Parent and child
div > p {…}
Siblings
h1 + p {…}
Hierarchy and precedence
A descendant is an element that is enclosed
(nested) in another, its ancestor. (If it is an
immediate descendant, it is a child of the
enclosing element, its parent. Elements having
the same parent are siblings.)
All descendants of an element inherit its style
properties, unless these are overridden by their
own style rules.
If two styles could apply to the same element,
the one defined by the more specific rule will
be used.
For instance, an explicit rule is always more
specific than an inherited rule.
Descendant selector
Sometimes, you want selectors to match an element that is the
descendant of another element in the document tree
(e.g., "Match those EM elements that are contained by an H1
element").
A descendant selector is made up of two or more selectors
separated by whitespace.
e.g. h1 em {color: blue;}
Style Inheritance
Child elements
inherit styles from
parent elements
unless the child
element has a
specific style
assigned to it
that overrides
the parent style
Parent > Child
Example of Both
will match
<h3>hello <em>there</em></h3>
and
<h3>hello <b><em>there</em></b></h3>
will match
<h3>hello <em>there</em></h3>
but not
<h3>hello <b><em>there</em></b></h3>
Not matched
Sibling Selectors
Contextual Selectors
[Link] { color:#FF0000; }
will match
<h3 class="classname">hello
<em>there</em></h3>
but not
<h3>hello <b><em>there</em></b></h3>
h3#idname { color:#0000FF; }
will match
<h3 id="idname">hello
<em>there</em></h3>
but not
<h3>hello <em>there</em></h3>
When to Use?
When to use which?
Use “type selector” when you want to
apply certain style for all occurrences of a
certain tag
Use “ID selector” if you want to apply the
style for only one occurrence of a certain
tag
Use “class selector” if you want to apply
the style for many (but not all)
occurrences of a certain tag; OR if you
want to apply the style for more than one
type of tags
When to use which? (cont.)
Use “Grouping” When several selectors share the
same declarations
Use “Universal selector” if you want all the tags in
your web documents have some common style (for
example, all tags don’t have any margin)
Use “Descendant selectors” if you want selectors to
match an element that is the descendant of
another element