Scribd
Upload
3 views81 pages

Chap03 Css

The document provides an introduction to CSS, explaining its purpose as a standard for styling HTML elements, including syntax rules, benefits, and various properties. It details how CSS can be applied through inline, embedded, and external styles, emphasizing the advantages of using external styles for maintainability. Additionally, it covers color values, units of measurement, and the importance of comments in CSS.

Uploaded by

Mobarak Saif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views81 pages

Chap03 Css

The document provides an introduction to CSS, explaining its purpose as a standard for styling HTML elements, including syntax rules, benefits, and various properties. It details how CSS can be applied through inline, embedded, and external styles, emphasizing the advantages of using external styles for maintainability. Additionally, it covers color values, units of measurement, and the importance of comments in CSS.

Uploaded by

Mobarak Saif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 81

CSS 1: Introduction

Abdallah Karakra & Sobhi Ahmed

Chapter 3

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel
Development Bornat
http://www.funwebdev.com
Objectives
1 What is CSS?
2 CSS Syntax

3 Location of Styles
4 Selectors

5 The Cascade: How


Styles Interact 6 The Box Model

7 CSS Text Styling

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 1 of 7

WHAT IS CSS?
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
What is CSS?
You be styling soon

CSS is a W3C standard for describing the presentation


(or appearance) of HTML elements.
With CSS, we can assign
• font properties,
• colors,
• sizes,
• borders,
• background images,
• even the position of elements.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
What is CSS?
CSS is a language in that it has its own syntax rules.
CSS can be added :
• Directly to any HTML element (via the style attribute)

<h2 style="font-size: 24pt; font-weight: bold;"> Reviews</h2>

• within the <head> element.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
What is CSS?
Cont.

• Most commonly, in a separate text file that contains only CSS.

Styles.css

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Benefits of CSS
Why using CSS is a better way of describing presentation than HTML

• Improved control over formatting. Control over the


appearance of their web content.
• Improved site maintainability. Websites become
significantly more maintainable because all
formatting can be centralized into one CSS file
• Improved accessibility. By keeping presentation out
of the HTML.
• Improved output flexibility. CSS can be used to
adopt a page for different output media
(responsive design).

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 2 of 7

CSS SYNTAX
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
CSS Syntax
Rules, properties, values, declarations

A CSS document consists of one or more style rules.

A rule consists of

• a selector that identifies the HTML element or elements that will be


affected.

• a series of property and value pairs (each pair is also called a declaration).
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Declaration Blocks
The series of declarations is also called the declaration
block.
• A declaration block can be together on a single line, or
spread across multiple lines.
declaration
• The browser syntax
ignores white space selector { property: value; property2: value2; } rule

• Each declaration is declaration block

terminated with a
semicolon. selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Selectors
Which elements

Every CSS rule begins with a selector.


The selector identifies which element or elements in
the HTML document will be affected by the
declarations in the rule.
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Properties
Which style properties of the selected elements

Each individual CSS declaration must contain a


property.
These property names are predefined by the CSS
standard. declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Using the style attribute, can

Properties specify presentation style for a


single HTML element
Common CSS properties
Property Type Property
Fonts font within tag, list sequence of
font-family property:value pairs
font-size
font-style
font-weight
@font-face
These property font-family:Courier,monospace
Text letter-spacing
line-height
names are
text-align predefined by the font-style:italic
text-decoration
text-indent
CSS standard. font-weight:bold
Color and background background
background-color font-size:12pt font-size:large font-
background-image size:larger
background-position
background-repeat
color
Borders border color:red color:#000080
border-color
border-width background-color:white
border-style
border-top
border-top-color
border-top-width
etc text-decoration:underline
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar text-decoration:none
Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Properties
Common CSS properties continued.
Property Type Property
Spacing padding
padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top

Sizing height
max-height
max-width
min-height
min-width
width

Layout bottom, left, right, top


clear
display
float
overflow
position
visibility
z-index

Lists list-style
list-style-image
list-style-type

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Color Values
CSS supports a variety of different ways of describing color
Method Description Example
Name Use one of 17 standard color names. CSS3 has 140 color: red;
standard names. color: hotpink; /* CSS3 only */
RGB Uses three different numbers between 0 and 255 to color: rgb(255,0,0);
describe the Red, Green, and Blue values for the color. color: rgb(255,105,180);

Hexadecimal Uses a six-digit hexadecimal number to describe the red, color: #FF0000;
green, and blue value of the color; each of the three RGB color: #FF69B4;
values is between 0 and FF (which is 255 in decimal).
Notice that the hexadecimal number is preceded by a
hash or pound symbol (#).

RGBa Allows you to add an alpha, or transparency, value. This color: rgb(255,0,0, 0.5);
allows a background color or image to “show through”
the color. Transparency is a value between 0.0 (fully
transparent) and 1.0 (fully opaque).

HSL Allows you to specify a color using Hue Saturation and color: hsl(0,100%,100%);
Light values. This is available only in CSS3. HSLA is also color: hsl(330,59%,100%);
available as well.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Color Values

https://www.w3schools.c
om/colors/colors_rgb.asp

Each parameter (red,


green, and blue) defines
the intensity of the color
as an integer between 0
and 255.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Color Values https://www.w3schools.
com/colors/colors_hsl.a
sp

HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl(hue, saturation, lightness).
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Color Values
CSS supports a variety of different ways of describing color

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Color Values
CSS supports a variety of different ways of describing color

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Relative Units
Unit Description Type
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is Relative (CSS2)
absolute (1/96 of an inch).
Absolute (CSS3)
em Equal to the computed value of the font-size property of Relative
the element on which it is used. When used for font sizes,
the em unit is in relation to the font size of the parent.
% A measure that is always relative to another value. The Relative
precise meaning of % varies depending upon which
property it is being used.
ex A rarely used relative measure that expresses size in Relative
relation to the x-height of an element’s font.
ch Another rarely used relative measure; this one expresses Relative
size in relation to the width of the zero ("0") character of
an element’s font. (CSS3 only)
rem Stands for root em, which is the font size of the root Relative
element. Unlike em, which may be different for each
element, the rem is constant throughout the document. (CSS3 only)
vw, vh Stands for viewport width and viewport height. Both are Relative
percentage values (between 0 and 100) of the viewport
(browser window). This allows an item to change size (CSS3 only)
when the viewport is resized.
vw: 1% of the width of the viewport
vh: 1% of the height of the viewport
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Absolute Units
Unit Description Type
in Inches Absolute
cm Centimeters Absolute
mm Millimeters Absolute
pt Points (equal to 1/72 of an inch) Absolute
pc Pica (equal to 1/6 of an inch) Absolute

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Relative Units

Example

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Comments in CSS

It is often helpful to add comments to your style


sheets. Comments take the form:

/* comment goes here */

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 3 of 7

LOCATION OF STYLES
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Style Locations
Author Created CSS style rules can be located in three different locations

CSS style rules can be located in three different


locations.
• Inline
• Embedded
• External

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inline Styles
Style rules placed within an HTML element via the style attribute

<h2 style="font-size: 24pt; font-weight: bold;"> Reviews</h2>

<h2> Reviews</h2>

An inline style only affects the element it is defined within and will
override any other style definitions for the properties used in the
inline style.
Using inline styles is generally discouraged since they increase
bandwidth and decrease maintainability.
Inline styles can however be handy for quickly testing out a style
change.
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inline Styles
Style rules placed within an HTML element via the style attribute

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inline Styles
Style rules placed within an HTML element via the style attribute

Example

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element

While better than inline styles, using embedded styles is also by and
large discouraged.
Since each HTML document has its own <style> element, it is more
difficult to consistently style multiple documents when using embedded
styles. Example
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
External Style Sheet
Style rules placed within a external text file with the .css extension

This is by far the most common place to locate style rules because it
provides the best maintainability.
• When you make a change to an external style sheet, all HTML
documents that reference that style sheet will automatically use the
updated version.
• The browser is able to cache the external style sheet which can
improve the performance of the site
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
External Style Sheet
Style rules placed within a external text file with the .css extension

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
External Style Sheet
Style rules placed within a external text file with the .css extension

• Example 1
• Example 2

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 4 of 7

SELECTORS
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Element Selectors
Selects all instances of a given HTML element

Uses the HTML element name.


You can select all elements by using the universal
element selector, which is the * (asterisk) character.
declaration

selector { property: value; property2: value2; } rule

declaration block
selector

em { color: red; }

property value

p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Element Selectors
Selects all instances of a given HTML element

Uses the HTML element name.


You can select all elements by using the universal
element selector, which is the * (asterisk) character.

Example:

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Element Selectors
Selects all instances of a given HTML element

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Grouped Selectors
Selecting multiple things

You can select a group of elements by separating the different


element names with commas.
This is a sensible way to reduce the size and complexity of your
CSS files, by combining multiple identical rules into a single
rule.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Reset

reset

Grouped selectors are often used as a way to quickly reset or remove browser defaults.
The goal of doing so is to reduce browser inconsistencies with things such as margins,
line heights, and font sizes.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Reset

reset styles can be placed in their own css file (perhaps called reset.css) and linked to
the page before any other external styles sheets.

<head>
<link rel="stylesheet" type="text/css" href="reset.css"> 1
<link rel="stylesheet" type="text/css" href="mystyle.css">
2
</head>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Class Selectors
Simultaneously target different HTML elements

A class selector allows you to simultaneously target


different HTML elements regardless of their position in
the document tree.
If a series of HTML element have been labeled with
the same class attribute value, then you can target
them for styling by using a class selector, which takes
the form: period (.) followed by the class name.

<h1>Reviews</h1>

<h1 class="first">Reviews</h1>

<p class="first">Hi</p>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Class Selectors
Simultaneously target different HTML elements

<h1>Reviews</h1>

<h1 class="first">Reviews</h1>

<p class="first">Hi</time></p>

<p>Hi</p>

<div class="first"> …….. </div>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: brown; .first {
font-style: italic;
}
color: brown;
</style> }
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>September
15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p class="first">By Susan on <time>October 1,
2012</time></p>
<p>I love Central Park.</p>
</div>
Example
<hr/>
</body>
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Id Selectors
Target a specific element by its id attribute

An id selector allows you to target a specific element


by its id attribute regardless of its type or position.
If an HTML element has been labeled with an id
attribute, then you can target it for styling by using an
id selector, which takes the form: pound/hash (#)
followed by the id name.

Note: You should only be using an id once per page

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Id Selectors
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
#latestComment {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

#latestComment {
font-style: italic;
color: brown;
}

Example
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Id versus Class Selectors
How to decide

Id selectors should only be used when referencing a


single HTML element since an id attribute can only be
assigned to a single HTML element.
Class selectors should be used when (potentially)
referencing several related elements.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Attribute Selectors
Selecting via presence of element attribute or by the value of an attribute

An attribute selector provides a way to select HTML


elements by either the presence of an element
attribute or by the value of an attribute.
This can be a very powerful technique, but because of
uneven support by some of the browsers, not all web
authors have used them.
Attribute selectors can be a very helpful technique in
the styling of hyperlinks and images.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Attribute Selectors
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels</title>
[title] {
<style> cursor: help;
[title] { padding-bottom: 3px;
cursor: help; border-bottom: 2px dotted blue;
padding-bottom: 3px; text-decoration: none;
}
border-bottom: 2px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" />
<h2><a href="countries.php?id=CA" title="see posts from
Canada">
Canada</a>
</h2>
<p>Canada is a North American country consisting of … </p>
<div>
<img src="images/square/6114907897.jpg" title="At top of
Sulpher Mountain">
<img src="images/square/6592317633.jpg" title="Grace
Presbyterian Church">
<img src="images/square/6592914823.jpg" title="Calgary
Downtown"> Example
</div>
</div>
</body>
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Attribute Selectors

padding

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Selectors
Attribute Selectors

Selector Matches
[] A specific attribute.
[=] A specific attribute with a specific value.
[~=] A specific attribute whose value matches
at least one of the words in a space delimited
list of words.
[^=] A specific attribute whose value begins
with a specified value.
[*=] A specific attribute whose value contains
a substring.
[$=] A specific attribute whose value ends
with a specified value.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Selectors
Attribute Selectors

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Pseudo Selectors
Select something that does not exist explicitly as an element

A pseudo-element selector is a way to select something that


does not exist explicitly as an element in the HTML document
tree but which is still a recognizable selectable object.

A pseudo-class selector does apply to an HTML element, but


targets either a particular state or, in CSS3, a variety of family
relationships.
The most common use of this type of selectors is for targeting
link states.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Pseudo Selectors

Select
something that
does not exist
explicitly as an
element

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Pseudo Selectors

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Pseudo Selectors

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Pseudo Selectors
input:focus {
background-color: yellow;
}

p:first-letter {
font-size: 200%;
color: #8A2BE2;
}

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Contextual Selectors
Select elements based on their ancestors, descendants, or siblings

A contextual selector (in CSS3 also called


combinators) allows you to select elements based on
their ancestors, descendants, or siblings.
That is, it selects elements based on their context or
their relation to other elements in the document tree.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Contextual Selectors
Selector Matches Example
Descendant A specified element that is div p
contained somewhere Selects a <p> element that is contained
within another specified somewhere within a <div> element. That is, the
element <p> can be any descendant, not just a child.

Child A specified element that is a div>h2


direct child of the specified Selects an <h2> element that is a child of a
element <div> element.

Adjacent A specified element that is h3+p


Sibling the next sibling (i.e., comes Selects the first <p> after any <h3>. Share the
directly after) of the same parent as <h3>
specified element.
General A specified element that h3~p
Sibling shares the same parent as Selects all the <p> elements that share the
the specified element. same parent as the <h3>.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Descendant Selector
Selects all elements that are contained within another element

The descendant selector matches all elements that are


descendants of a specified element.
The character used to indicate descendant selection is the
space character.

context selected element

div p { … } #main div p:first-child { … }

Selects a <p> element Selects the first <p> element


somewhere somewhere within a <div> element
within a <div> element that is somewhere within an element
with an id="main"
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Descendant Selector
The following example selects all <p> elements inside <div> elements:

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Child Selector
The child selector selects all elements that are the immediate children of a
specified element.

The following example selects all <p> elements that are immediate
children of a <div> element:

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Adjacent Sibling Selector
The adjacent sibling selector selects all elements that are the adjacent
siblings of a specified element

Sibling elements must have the same parent element, and "adjacent"
means "immediately following"

The following example selects all <p> elements that are placed
immediately after <div> elements:

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Adjacent Sibling Selector

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
General Sibling Selector

The general sibling selector selects all elements that


are siblings of a specified element.

The following example selects all <p> elements that


are siblings of <div> elements:

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
General Sibling Selector

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Exercise

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Contextual Selectors in Action
<body>
<nav>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
ul a:link { color: blue; } <li><a href="#">United States</a></li>
#main time { color: red; }
</ul>
</nav>
<div id="main">
Comments as of <time>November 15, 2012</time>
<div>
#main>time { color: purple; } <p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
#main div p:first-child { <p>By Susan on <time>October 1, 2012</time></p>
color: green; <p>I love Central Park.</p>
} </div>
<hr/>
</div>
<footer>
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Browse</a> | </li>
</ul>
</footer>
</body>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 5 of 7
THE CASCADE: HOW STYLES
INTERACT
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Cascade Principles

CSS uses the following cascade principles to help it


deal with conflicts:
• inheritance,
• specificity,
• location

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inheritance
Cascade Principle #1

• Font, color, list, and text properties are inheritable.


• Layout, sizing, border, background and spacing
properties are not.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inheritance
body {
font-family: Arial; inherited
<html> color: red; inherited
border: 8pt solid green; not inherited
margin: 100px; not inherited
}
<head> <body>

<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>

<a> <strong> <p> <p> <p> <p> <small>

<time> <time>

• Font, color, list, and text properties are inheritable.


• Layout, sizing, border, background and spacing properties are not.
STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inheritance
How to force inheritance
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green;
}
p {
border: inherit;
margin: inherit;
}

<h3>Reviews</h3>
<div>
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>

It is possible to tell elements to inherit properties that are normally not


inheritable.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Inheritance
<html> div {
font-weight: bold; inherited
margin: 50px; not inherited
border: 1pt solid green; not inherited
<head> <body> }

<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>

<a> <strong> <p> <p> <p> <p> <small>

<time> <time>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Specificity
Cascade Principle #2

Specificity is how the browser determines which style


rule takes precedence when more than one style rule
could be applied to the same element.
The more specific the selector, the more it takes
precedence (i.e., overrides the previous definition).

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Specificity
How it works

The way that specificity works in the browser is that


the browser assigns a weight to each style rule.
When several rules apply, the one with the greatest
weight takes precedence.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Specificity
These color and font-weight
body { This text is not within a p element.
properties are inheritable and thus font-weight: bold; <p>Reviews</p>
potentially applicable to all the child color: red; <div>
elements contained within the body. } <p>By Ricardo on <time>September 15, 2012</time
<p>Easy on the HDR buddy.</p>
However, because the <div> and <p> div { This text is not within a p element.
elements also have the same font-weight: normal; </div>
properties set, they override the value color: magenta; <hr/>
}
defined for the <body> element
<div>
because their selectors (div and p) are p { <p>By Susan on <time>October 1, 2012</time></p>
more specific. color: green; <p>I love Central Park.</p>
} </div>
Class selectors are more specific <hr/>
.last {
than element selectors, and thus color: blue; <div>
take precedence and override } <p class="last">By Dave on <time>October 15, 20
element selectors. <p class="last" id="verylast">Thanks for postin
#verylast { </div>
color: orange; <hr/>
font-size: 16pt;
}
Id selectors are more specific than
class selectors, and thus take
precedence and override class
selectors.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Location
Cascade Principle #3

When inheritance and specificity cannot determine


style precedence, the principle of location will be
used.
The principle of location is that when rules have the
same specificity, then the latest are given more
weight.

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Location Browser’s
What color would the sample text be if style
default there wasn’t an inline style definition?
settings

user-styles.css #example {
1 color: green;
overrides }

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
<link rel="stylesheet" href="stylesWW.css" /> overrides

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>

STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development
Section 6 of 7

THE BOX MODEL


STUDENTS-HUB.com
Randy Connolly and Ricardo Hoar Uploaded
Fundamentals of Web By: Jibreel Bornat
Development

You might also like