Scribd
Upload
21 views

Chapter04 IntroductionToCSS 1

The document discusses CSS, covering topics such as what CSS is, CSS syntax including selectors, properties and values, CSS colors, relative and absolute units, and locations styles can be defined including inline styles. CSS is used to describe the appearance of HTML elements and control formatting, accessibility, and other presentation aspects of web pages.

Uploaded by

boratok234
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Chapter04 IntroductionToCSS 1

The document discusses CSS, covering topics such as what CSS is, CSS syntax including selectors, properties and values, CSS colors, relative and absolute units, and locations styles can be defined including inline styles. CSS is used to describe the appearance of HTML elements and control formatting, accessibility, and other presentation aspects of web pages.

Uploaded by

boratok234
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 72

Introduction to

CSS

Chapter 4

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Cascading Style Sheets (CSS)

• CSS is a W3C standard for describing the


appearance of HTML elements
• With CSS, we can assign font properties, colors,
sizes, borders, background images, and even
position elements on the page
• CSS can be added directly to any HTML element (via
the style attribute), within the <head> element, or,
most commonly, in a separate text file that contains
only CSS.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Benefits of CSS

• Improved control over formatting.


• Improved site maintainability.
• Improved accessibility.
• Improved page-download speed.
• Improved output flexibility (responsive design)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
CSS Versions

• 1996 the CSS Level 1 Recommendation was published


• June 2011 - CSS2.1 becomes an official W3C
Recommendation
• a different group at the W3C was working on a CSS3 draft.
So far the following CSS3 modules have made it to official
W3C Recommendations:
• CSS Selectors,
• CSS Namespaces,
• CSS Media Queries,
• CSS Color, and
• CSS Style Attributes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Browser Adoption

• Historically implementation of CSS was not


consistent across major browsers.
• CSS has a reputation for being a somewhat
frustrating language due to browser
implementation differences
• CSS was not really designed to be a layout
language, so authors often find it tricky dealing with
floating elements, relative positions, inconsistent
height handling, overlapping margins, and non-
intuitive naming

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Overview

• 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,
followed by a series of property:value pairs (each
pair is also called a declaration)
• The series of declarations is also called the
declaration block .

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Overview

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Selectors

• 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
• Many ways to write selectors (stay tuned…)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Properties

• Each individual CSS declaration must contain a


property.
• The CSS2.1 recommendation defines over a
hundred different property names

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Properties

Property Type Property


Fonts font
font-family
font-size
font-style
font-weight
@font-face

Text letter-spacing
line-height
text-align
text-decoration*
text-indent

Color and Background background


background-color
background-image
background-position
background-repeat
box-shadow
color
opacity

Borders border*
border-color
border-width
border-style
border-top, border-left, ...*
border-image*
border-radius

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Properties
Property Type Property
Spacing padding
padding-bottom, padding-left, ...
margin
margin-bottom, margin-left, ...

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

Effects animation*
filter
perspective
transform*
transition*

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Values

The unit of any given value is dependent upon the


property.
Some property values are from a predefined list of
keywords. Others are values such as length
measurements, percentages, numbers without units,
color values, and URLs.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Colors

• Name
• RGB
• Hexadecimal
• RGBa
• HSL

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Relative and absolute Units

• Relative
• px
• em
• %
• vw,vh

• Absolute
• In
• cm
• Pt

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
Inline Styles

Inline styles are style rules placed within an HTML


element via the style attribute
<h1>Share Your Travels</h1>
<h2 style="font-size: 24pt">Description</h2>
...
<h2 style="font-size: 24pt; font-weight:bold;">
Reviews</h2>

Using inline styles is generally discouraged


Handy for quickly testing out a style change

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
Embedded Style Sheet

Embedded style sheets (also called internal styles) are style rules placed
within the <style> element (inside the <head> element of an HTML
document).
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
...

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
External Style Sheet

External style sheets are style rules placed within a


external text file with the .css extension.
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central
Park</title>
<link rel="stylesheet" href="styles.css" />
</head>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
External Style Sheet

There are in fact three different types of style sheet:


1. Author-created style sheets (what you are
learning in this chapter)
2. User style sheets
3. Browser style sheets

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Remember the DOM tree

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Element Selectors

Element selectors select all instances of a given HTML


element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Class Selectors

A class selector allows you to simultaneously target


different HTML elements regardless of their position in
the document tree using the same class attribute
value.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Class Selectors

<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Id Selectors

An id selector allows you to target a specific element


by its id attribute regardless of its type or position

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Id Selectors

<head>
<title>Share Your Travels </title>
<style>
#latestComment {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div id="latestComment">
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Attribute Selectors

An attribute selector provides a way to select HTML


elements either by the presence of an element
attribute or by the value of an attribute

[title] { … }

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Attribute Selectors

<head>
<meta charset="utf-8">
<title>Share Your Travels</title>
<style>
[title] {
cursor: help;
padding-bottom: 3px;
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 Sulphur Mountain" />
<img src="images/square/6592317633.jpg” title="Grace Presbyterian Church" />
<img src="images/square/6592914823.jpg” title="Calgary Downtown" />
</div>
</div>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
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.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors

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 anHTML
element, but targets either a particular state or, in
CSS3, a variety of family relationships.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors

• a:link
• a:visited
• :focus
• :hover
• :active
• :checked
• :first-child
• :first-letter
• :first-line

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors

<style>
a:link {
text-decoration: underline;
color: blue;
}
a:visited {
text-decoration: underline;
color: purple;
}
a:hover {
text-decoration: none;
font-weight: bold;
}
a:active {
background-color: yellow;
}
</style>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Contextual Selectors

Selector Matches Example

Descendant A specified element that is contained div p


somewhere within another specified Selects a <p> element that is
element. contained somewhere within a <div>
element.
Child A specified element that is a direct div>h2
child of the specified element. Selects an <h2> element that is a
child of a <div>
element.
Adjacent Sibling A specified element that is the next h3+p
sibling (i.e., comes directly after) of Selects the first <p> after any <h3>.
the specified element
General Sibling A specified element that shares h3~p
the same parent as the specified Selects all the <p> elements that
element. share the same
parent as the <h3>.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Contextual Selectors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
CSS

The “Cascade” in CSS refers to how conflicting rules


are handled.
The downward movement of water down a cascade is
meant to be analogous to how a given style rule will
continue to take precedence with child elements
CSS uses the following cascade principles to help it
deal with conflicts:
• inheritance,
• specificity, and
• location

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance

Many (but not all) CSS properties affect not only themselves but their descendants
as well.
Are inheritable:
• Font,
• color,
• list, and
• text properties
Not inheritable:
• layout,
• sizing,
• border,
• background, and
• spacing properties

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity Algorithm

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Location

1. Browser Style Sheets


2. User Style Sheets
3. External Style Sheets
4. Embedded Style Sheets
5. Inline Style Sheets
When multiple style sheets are at the same level, the
later one overrides the previous one.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Location

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How to Start with an Even
Playing Field
reset.css

• 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.
• These reset styles can be placed in their own CSS
file (perhaps called reset.css) and linked to the page
before any other external style sheets.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How to Start with an Even
Playing Field
reset.css

• An example of a simplified reset is shown below:


html, body, div, span, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Overview

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Background

• Background
• Background-attachment
• Background-color
• Background-image
• Background-position
• Background-repeat
• Background-size

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Background

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Collapsing Margins

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
CSS TRBL Shortcut

border-top-color: red; /* sets just the top side */


border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */

Alternately, we can set all four sides at once:


border-color: red; /* sets all four sides to red */
border-color: red green orange blue; /* sets 4 colors */

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Box Dimensions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Limitations of Height Property

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Overflow Property

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Box Sizing Using Percents

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Inspecting CSS using modern browsers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Family

Property Description
font A combined shorthand property that allows you to
set the family, style, size, variant, and weight in one
property.
style weight variant size font-family
font-family Specifies the typeface/font to use. More than one
can be specified.
font-size The size of the font in one of the measurement
units
font-style Specifies whether italic, oblique, or normal
font-variant Specifies either small-caps text or none
font-weight Specifies either normal, bold, bolder, lighter, or a
value between 100 and 900 in multiples of 100,
where larger number represents
weightier (i.e., bolder) text.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Specifying the Font Family

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Different Font Families

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Sizes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Face

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Paragraph Properties

Just as there are properties that affect the font in CSS,


there are also a range of CSS properties that affect text
independently of the font.
• letter-spacing
• line-height
• text-align
• text-decoration
• text-diretion
• text-shadow
• …

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Just look at text-shadow

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6
The Cascade: How The Box Model
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms

absolute units class selector declaration block


attribute selector collapsing margins descendant
selector
author-created combinators
style element box
contextual selector
sheets element selectors
CSS
box model em units
CSS3 modules
browser style embedded style
sheets declaration sheets
cascade external style
sheets

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Questions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.

You might also like