CSS Lecture 6 - 7

Cascading Style
Sheets
(CSS)
Lecture 6 -7 -8
Table of Contents
⬥What is CSS?
⬥ Styling with Cascading Stylesheets (CSS)
⬥Selectors and style definitions
⬥Linking HTML and CSS
⬥Fonts, Backgrounds, Borders
⬥The Box Model
⬥Alignment, Z-Index, Margin, Padding
⬥Positioning and Floating Elements
⬥Visibility, Display, Overflow
⬥CSS Development Tools
2
CSS Introduction
⬥ Cascading Style Sheets (CSS)
⬩ Used to describe the presentation of documents
⬩ Define sizes, spacing, fonts, colors, layout, etc.
⬩ Improve content accessibility
⬩ Improve flexibility
⬥ Designed to separate presentation from content
⬥ Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center, etc.
3
CSS Introduction (2)
⬥CSS can be applied to any XML document
⬩ Not just to HTML / XHTML
⬥CSS can specify different styles for different
media
⬩ On-screen
⬩ In print
⬩ Handheld, projection, etc.
⬩ … even by voice or Braille-based reader
4
Why “Cascading”? (3)
⬥Some CSS styles are inherited and some not
⬩ Text-related and list-related properties are
inherited - color, font-size, font-family,
line-height, text-align, list-style,
etc
⬩ Box-related and positioning styles are not
inherited - width, height, border, margin,
padding, position, float, etc
⬩ <a> elements do not inherit color and
text- decoration
5
Why “Cascading”?
⬥Priority
scheme determining which style rules
apply to element
⬩ Cascade priorities or specificity (weight) are
calculated and assigned to the rules
⬩ Child elements in the HTML DOM tree inherit
styles from their parent
⬩ Can override them
⬩ Control via !important rule
6
Using <DIV> and
<SPAN>
Block and Inline Elements
Definition and Usage
The <div> tag defines a division or a section in an
HTML document.
The <div> tag is used as a container for HTML
elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or id
attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break
before and after the <div> element
DIV Element
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV

element.</p>
</body>
</html>
The <span>
⬥Inline style element
Tag
⬥ Useful for modifying a specific portion of text
⬩ Don't create a separate area
(paragraph) in the document
⬥Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-
size:32px;
font-weight:bold">TEST</span>.</p> 10
Style Sheets Syntax
⬥ Stylesheets consist of rules, selectors,
declarations, properties and values
http://css.maxdesign.com.au/
⬥ Selectors are separated by commas

⬥ Declarations are separated by semicolons
⬥ Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }
11
selector
CSS selectors are used to "find" (or select) the HTML

elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id,
class)
Combinator selectors (select elements based on a specific
relationship between them)
Pseudo-class selectors (select elements based on a
certain state)
Pseudo-elements selectors (select and style a part of an
element)
Attribute selectors (select elements based on an
attribute or attribute value)
Selector types
1. Simple selector
2. Combinator selector
3. Attribute selector
4. Pseudo class selector
5. Pseudo element Selector
NO 1 Simple Selector (5 types)
1. Element selector
2. Id selector
3. Class selector
4. Universal Selector
5. Grouping Selector
Element Selector The element selector selects all elements
With the specified element name.
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the element selector</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is abc.</p>
</body>
</html>
Id Selector
The id of an element is unique within a page, so the id selector is used to
select one unique element! To select an element with a specific id, write a
hash (#) character, followed by the id of the element
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is ABC.</p>
</body>
</html>
Class Selector
CLass selector is formatted as a period
(.) character followed by the name of the class.
It selects all elements with that class
attribute so that unique CSS declarations can be
applied to those specific elements without
affecting other elements on the page.
Class selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Grouping SelectorThe grouping selector selects all the HTML
elements with the same style definitions. It will be better
to group the selectors, to minimize the code.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Universal Selector
The universal selector provided by CSS helps

in choosing any elements within the HTML
page. It goes with a single element and uses
the asterisk (i.e., "*") symbol used for
denoting the selector as a universal
selector. It is usually written as an
asterisk followed by a selector.
Universal selector
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the

style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
NO2 Combinator selectorA combinator is something
that explains the relationship between the
selectors
4 types
1. Descendent selector (space)
2. Child selector >
3. Adjacent Sibling selector +
4. General sibling selector (~)
Descendent selector
:The descendant selector matches all elements that are

descendants of a specified element.
The following example selects all <p> elements inside <div>
elements
div p {background-color: yellow;}

<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 3 in the div</p>
</span>
</div>
Descendent Selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified
element.</p>
<div>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>
Child Selector (>)
. The child selector selects all elements that are the
children of a specified element. The following example
selects all <p> elements that are children of a
<div> ..
div > p {background-color: yellow;}
<div>
<span>
<p>Paragraph 3 in the div</p>
</span>
</div>
25
Adjacent Sibling Selector (+)
Adjacent Sibling Selector (+)The adjacent

sibling selector is used to select an element
that is directly after another specific
element. Sibling elements must have the same
parent element, and "adjacent" means
"immediately following div + p {background-
color: yellow;}
<div>
</div>
26
General Sibling Selector (~)
The general sibling selector selects all elements

that are siblings of a specified element.
div ~ p {background-color: yellow;}
<div>
<h1></h1>
</div>
27
No 3 Attribute selector
The [attribute] selector is used to select elements with a
specified attribute
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
</body>
</html>
The ::first-letter CSS pseudo-element
applies styles to the first letter of the
first line of a block container, but only
when not preceded by other content (such as
images or inline tables).
4 First letter Pseudo element
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to

add a special effect to the first character of a text!
</p>
</body>
</html>
NO 4 Pseudo class Selector
Lab Task
Hints
pseudo class Selector

A pseudo-class is used to define a special state
of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax
selector:pseudo-class {
property: value;
}
Pseudo class
<!DOCTYPE html>
< html>
selector
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
Values in the CSS Rules
⬥ Colors are set in RGB format (decimal or hex):
⬩ Example: #a0a6aa = rgb(160, 166, 170)
⬩ Predefined color aliases exist: black, blue, etc.
⬥ Numeric values are specified in:
⬩ Pixels, ems, e.g. 12px , 1.4em
⬩ Points, inches, centimeters, millimeters
⬩ E.g. 10pt , 1in, 1cm, 1mm
⬩ Percentages, e.g. 50%
⬩ Percentage of what?...
⬩ Zero can be used with no unit: border: 0; 33
Default Browser Styles
⬥Browsers have default CSS styles
⬩ Used when there is no CSS information or any
other style information in the document
⬥Caution: default styles differ in browsers
⬩ E.g. margins, paddings and font sizes differ
most often and usually developers reset them
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }
34
Linking HTML and CSS
CSS can be added to HTML documents in 3 ways:

•Inline - by using the style attribute inside HTML
elements
•Internal - by using a <style> element in
the <head> section
•External - by using a <link> element to link to
an external CSS file
The most common way to add CSS, is to keep the
styles in external CSS files
35
Linking HTML and CSS (2)
⬥ Using external files is highly recommended
⬩ Simplifies the HTML document
⬩ Improves page load speed as the CSS file is
cached
36
Inline Styles: Example
inline-styles.html
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
37
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "htt
p://www.w3.org/TR/xhtml1/ DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon--
>
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html> 38
CSS Cascade (Precedence)
⬥There arebrowser, user and author stylesheets
with "normal" and "important" declarations
⬩ Browser styles (least priority)
⬩ Normal user styles
⬩ Normal author styles (external, in head, inline)
⬩ Important author styles
⬩ Important user styles (max priority)
a { color: red !important ; }
http://www.slideshare.net/maxdesign/css-cascade-1658158
39
CSS Specificity
⬥CSS specificity
is used to determine the
precedence of CSS style declarations with the
same origin. Selectors are what matters
⬩ Simple calculation: #id = 100, .class = 10,
:pseudo = 10, [attr] = 10, tag = 1, * = 0
⬩ Same number of points? Order matters.
⬩ See also:
⬩ http://www.smashingmagazine.com/2007/07/27/css-specificity-things-
you-should-know/
40
Embedded Styles
⬥Embedded in the HTML in the <style> tag:
<style type="text/css">
⬩ The <style> tag is placed in the

<head>
section of the document
⬩ type attribute specifies the MIME type
⬩ MIME describes the format of the content
⬩ Other MIME types include text/html,
image/gif, text/javascript …
⬥Used for document-specific styles
41
<!DOCTYPE html>
<html>
Embedded Styles: Example
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
42
Embedded Styles: Example (2)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is
some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some
<em>more</em>
text. Here is some more text.</p>
</body>
</html>
43
Embedded Styles: Example (3)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is
some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some
<em>more</em>
text. Here is some more text.</p>
</body>
</html>
44
External CSS Styles
⬥ External linking
⬩ Separate pages can all use a shared style sheet
⬩ Only modify a single file to change the styles across
your entire Web site (see http://www.csszengarden.com/)
⬥ link tag (with a rel attribute)
⬩ Specifies a relationship between current document
and another document
<link rel="stylesheet" type="text/css"
href="styles.css">
⬩ link elements should be in the

<head> 45
External CSS Styles (2)
@import
⬩ Another way to link external CSS files
⬩ Example:
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>
⬩ Ancient browsers do
not recognize
@import
46
External Styles: Example
styles.css
/* CSS Document */
a { text-decoration: none }
a:hover { text-decoration: underline;

color: red;
background-color: #CCFFCC }
li em { color: red;
font-weight: bold }
ul { margin-left: 2cm }
ul ul { text-decoration: underline;
margin-left: .5cm }
47
External Styles: Example (2)
external-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for
<em>Monday</em>:</h1>
<li>Milk</li>
… 48
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
49
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
50

CSS Lecture 6 - 7

Uploaded by

Copyright:

Available Formats

CSS Lecture 6 - 7

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Lecture 6 - 7

Uploaded by

Copyright:

Available Formats

Cascading Style

<h1>HTML DIV Example</h1>

<p>The yellow background is added to demonstrate the footprint of the DIV

⬥ Selectors are separated by commas

CSS selectors are used to "find" (or select) the HTML

<h1>Demo of the element selector</h1>

<p>My best friend is abc.</p>

<h1>Demo of the #id selector</h1>

<p>My best friend is ABC.</p>

<h1 class="center">Red and center-aligned heading</h1>

The universal selector provided by CSS helps

<p>Every element on the page will be affected by the

:The descendant selector matches all elements that are

div p {background-color: yellow;}

<p>Paragraph 4. Not in a div.</p>

Adjacent Sibling Selector (+)The adjacent

The general sibling selector selects all elements

<h2>CSS [attribute|="value"] Selector</h2>

<p>You can use the ::first-letter pseudo-element to

pseudo class Selector

/* mouse over link */

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

body, h1, p, ul, li { margin: 0; padding: 0; }

CSS can be added to HTML documents in 3 ways:

⬩ The <style> tag is placed in the

body {background-color: powderblue;}

⬩ link elements should be in the

a:hover { text-decoration: underline;

You might also like