Scribd
Upload
12 views

Chapter04 IntroductionToCSS

The document discusses CSS (Cascading Style Sheets), which is a language for styling and formatting HTML documents. It covers key topics such as CSS syntax with selectors and declarations, properties, versions of CSS, browser adoption of CSS standards, and text styling with CSS. The chapter also examines how CSS styles interact through the cascade and the box model for controlling layout.

Uploaded by

alyaalderazi
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
12 views

Chapter04 IntroductionToCSS

The document discusses CSS (Cascading Style Sheets), which is a language for styling and formatting HTML documents. It covers key topics such as CSS syntax with selectors and declarations, properties, versions of CSS, browser adoption of CSS standards, and text styling with CSS. The chapter also examines how CSS styles interact through the cascade and the box model for controlling layout.

Uploaded by

alyaalderazi
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/ 98

Introduction to

CSS

Chapter 4

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

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

• CSS is a W3C standard for describing the presentation or appearance of


HTML elements.
• Another common way to describe CSS’s function is to say that CSS is
used to define the presentation of HTML documents.
• With CSS, we can assign font properties, colors, sizes, borders,
background images, and even position elements on the page
• 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),
within the <head> element, or, most commonly, in a separate text file
that contains only CSS.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
What Is CSS? Benefits of CSS
Why using CSS is a better way of describing presentation than HTML
The benefits of CSS include:
• Improved control over formatting: The degree of formatting control in CSS is
significantly better than that provided in HTML. CSS gives web authors fine-
grained control over the appearance of their web content.
• Improved site maintainability: Websites become significantly more maintainable
because all formatting can be centralized into one, or a small handful, of CSS
files. This allows to make site-wide visual modifications by changing a single file.
• Improved accessibility: CSS-driven sites are more accessible. By keeping
presentation out of HTML, screen readers and other accessibility tools work
better, thereby providing a significantly enriched experience for those reliant on
accessibility tools.
• Improved page download speed: A site built using a centralized set of CSS files
for all presentation will also be quicker to download because each individual
HTML file will contain less style information and markup, and thus be smaller.
• Improved output flexibility (responsive design): CSS can be used to adopt a page
for different output mediums. This approach of CSS page design is often referred
to as Responsive design.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
CSS Versions
Let’s just say there’s more than 1

• Style sheets as a way to visually format markup predate the web. In the 1990’s, a
variety of different style sheet standards were proposed, including JavaScript style
sheets, which was proposed by Netscape in 1996.
• W3C adopted and published the CSS Level 1 Recommendation in 1996.
• A year later, the CSS Level 2 Recommendation (also more succinctly labeled simply
as CSS2) was published.
• Even though work began over a decade ago, an updated version of the Level 2
Recommendation, CSS2.1, did not become an official W3C Recommendation until
June 2011.
• And to complicate matters even more, all through the last decade (and to the
present day as well), during the same time the CSS2.1 standard was being worked
on, a different group at the W3C was working on a CSS3 draft.
• CSS3 module have made it to official W3C recommendations: CSS Selectors, CSS
Namespaces, CSS Media Queries and CSS Color.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Browser Adoption
Insert obligatory snide comment about Internet Explorer 6 here

The most important thing to keep in mind with CSS is that the different
browsers have not always kept up to the W3C.

While Microsoft’s Internet Explorer was an early champion of CSS, its later
versions (especially IE5, IE6, and IE7) for Windows had uneven support for
certain parts of CSS2.

In fact, all browsers have left certain parts of the CSS2 Recommendation
unimplemented.

CSS has a reputation for being a somewhat frustrating language.

• this reputation is well deserved!

Since CSS was designed to be a styling language, text styling is quite easy. 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 nonintuitive naming.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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 Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
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.
• The browser ignores
white space (i.e., spaces,
tabs and returns)
between your CSS rules
so that you can format
the CSS you want.
• Each declaration is
terminated with a
semicolon.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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
• Another way of thinking of selectors is that they are a pattern which is
used by the browser to select the HTML elements that will receive the
style.
Properties
• Each individual CSS declaration must contain a property.
• These property names are predefined by the CSS standard.
• The CSS2.1 recommendation defines over a hundred different property
names
• Properties marked with an asterisk contain multiple subproperties not
listed here (e.g., border-top, border-top-color, border-top-width, etc).
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
CSS Syntax Properties Property Property
Type
padding
Property Type Property padding-bottom, padding-left, padding-right,
padding-top
font Spacing
margin
font-family margin-bottom, margin-left, margin-right, margin-
font-size top
Fonts
font-style
font-weight height
@font-face max-height
max-width
letter-spacing Sizing
min-height
line-height min-width
Text text-align width
text-decoration*
text-indent bottom, left, right, top
clear
background display
background-color float
background-image Layout
overflow
Color and background-position position
Background background-repeat visibility
box-shadow z-index
color
opacity list-style*
Lists list-style-image
border*
list-style-type
border-color
border-width animation*
Borders border-style filter
border-top, border-left, ...* Effects perspective
border-image*
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui transform* of Web Development - 2nd Ed.
Fundamentals
border-radius transition*
CSS Syntax
Values

• Each CSS declaration also contains a value for a property.


• 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 Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
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);

Uses a six-digit hexadecimal number to describe the


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

Allows you to add an alpha, or transparency, value. This


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

Allows you to specify a color using Hue Saturation and color: hsl(0,100%,100%);
HSL Light values. This is available only in CSS3. HSLA is also color: hsl(330,59%,100%);
available as well.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Units of Measurement
There are multiple ways of specifying a unit of measurement in CSS

When working with print design, we use straightforward absolute units such as
inches or centimeters and picas or points. Because different devices have differing
physical sizes as well different pixel resolutions and because the user is able to
change the browsers size or its zoom mode, these absolute units don’t always make
sense with web element measures.
Some of these are relative units, in that they are based on the value of something
else, such as the size of a parent element.
Others are absolute units, in that they have a real-world size.
• Unless you are defining a style sheet for printing, it is recommended to avoid using
absolute units.
• Pixels are perhaps the one popular exception (though as we shall see later there are
also good reasons for avoiding the pixel unit).
• In general, most of the CSS that you will see uses either px, em, or % as a measure
unit.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Relative Units
Unit Description Type

Relative (CSS2)
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute
(1/96 of an inch). Absolute (CSS3)

Equal to the computed value of the font-size property of the element


em on which it is used. When used for font sizes, the em unit is in relation Relative
to the font size of the parent.

% A measure that is always relative to another value. The precise


meaning of % varies depending upon which property it is being used. Relative

ex A rarely used relative measure that expresses size in relation to the x-


height of an element’s font. Relative

Relative
ch Another rarely used relative measure; this one expresses size in
relation to the width of the zero ("0") character of an element’s font. (CSS3 only)

Stands for root em, which is the font size of the root element. Unlike Relative
rem em, which may be different for each element, the rem is constant
throughout the document. (CSS3 only)

Stands for viewport width and viewport height. Both are percentage Relative
vw, vh values (between 0 and 100) of the viewport (browser window). This
allows
Randy Connolly an itemHoar
and Ricardo to change sizebywhen
Modified theSiddiqui
Mohammed viewport Fundamentals (CSS3 only)
is resized. of Web Development - 2nd Ed.
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

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Comments in CSS
It is often helpful to add comments to your style sheets. Comments take
the form: /* comment goes here */

Real World CSS files can become quite long and complicated . It is a
common practice to locate style rules that are related together and then
indicate that they are related via a comment.
/* main navigation */
nav#main { … }
nav#main ul { … }
nav#main ul li { … }
/* header */
header { … }
h1 { … }

Comments can also be a helpful way to temporarily hide any number of rules, which
can make debugging your CSS just a tiny bit less tedious.

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Actually there are three …
Different types of style sheet

Author-created style sheets (what we are learning in this presentation).


User style sheets allow the individual user to tell the browser to display
pages using that individual’s own custom style sheet. This option is
available in a browser usually in its accessibility options area.
The browser style sheet defines the default styles the browser uses for
each HTML element. Some browsers allow you to view this stylesheet.
For instance, in Firefox, you can view this default browser style sheet via
the following URL: resource://gre-resources/forms.css.
The browser stylesheet for WebKit browsers such as Chrome and Safari can
be found (for now) at:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
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
You can combine all 3!

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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>

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. (because presentation and content are intermixed and
because it can be difficult to make consistent inline style changes across multiple
files).

Inline styles can however be handy for quickly testing out a style change.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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>
...
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.
Embedded styles can be helpful when quickly testing out a style that is used in multiple places within a single HTML
document.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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>

• 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
• To reference an external style sheet, you must use a <link> element (within the
<head> element), as shown in above Listing 4.3.
• You can link to several style sheets at a time; each linked style sheet will require
its own <link> element.

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

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

The Document Object Model (DOM) is how a browser represents an HTML page internally. This
DOM is akin to a tree representing the overall hierarchical structure of the document.
As you progress through these chapters on CSS, you will at times have to think about the elements
in your HTML document in terms of their position within the hierarchy. Figure 4.3 illustrates a
sample document structure as a hierarchical tree.
When defining CSS rules, you will need to first need to use a selector to tell the browser which
elements will be affected.
CSS selectors allow you to select
• individual elements
• multiple HTML elements,
• elements that belong together in some way, or
• elements that are positioned in specific ways in the document hierarchy.
There are a number of different selector types.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Selectors Element Selectors

Element selectors select 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.

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

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
<head>
<title>Share Your Travels </title> Class Selectors
<style>
.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/> The <hr> tag in HTML stands for
horizontal rule and is used to insert a
<div>
horizontal rule or a thematic break in an
<p class="first">By Susan on
<time>October 1, 2012</time></p>
HTML page to divide or separate
<p>I love Central Park.</p> document sections. The <hr> tag is used
</div> to add a horizontal line in a webpage, this
<hr/> line can be used to divide information or
</body>
Randy Connolly and Ricardo Hoar
segments
Modified by Mohammed Siddiqui
of your webpage.
Fundamentals of Web Development - 2nd Ed.
Class Selectors
• You can also specify that only specific HTML elements should be
affected by a class. In the example below, only <p> elements with
class="center" will be center-aligned:

p.center {text-align: center;}

• HTML elements can also refer to more than one class. In the example
below, the <p> element will be styled according to class="center" and
to class="large":

<p class="center large">This paragraph refers


to two classes.</p>

http://www.w3schools.com/css/css_syntax.asp
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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
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

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

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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
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.

[title] { … }

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Selectors
<head> Attribute Selectors
<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 Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Selectors Matches
Selector Attribute Selectors
Example

[]
A specific attribute. [title]
Matches any element with a title attribute.

A specific attribute with a specific a[title=“posts from this country”]


Matches any <a> element whose title
[=]
value.
attribute is exactly “posts from this
country“
A specific attribute whose value [title~=“Countries”]
matches at least one of the Matches any title attribute that contains
[~=] words in a space delimited list of
words
the word “Countries“.

A specific attribute whose value a[href^=“mailto”]


[^=] begins with a specified value. Matches any <a> element whose href
attribute begins with “mailto“.
A specific attribute whose value img[src*=“flag”]

[*=] contains a substring. Matches any <img> element whose src


attribute contains somewhere within it the
text “flag“
A specific attribute whose value a[href$=“.pdf”]
[$=] ends with a specified value.
Randy Connolly and Ricardo Hoar
Matches any <a> element whose href
attribute
Modified by Mohammed Siddiqui ends with
Fundamentals the Development
of Web text “.pdf“- 2nd Ed.
Selectors Pseudo-Element and Pseudo-Class 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. By
default, the browser displays link text blue and visited text links purple.
Do be aware that this state does not occur on touch screen devices. Note
the syntax of pseudo-class selectors: the colon (:) followed by the pseudo-
class selector name. Do be aware that a space is not allowed after the colon.
Believe it or not, the order of these pseudo-class elements is important.
The :link and :visited pseudo-classes should appear before the others. Some
developers use a mnemonic to help them remember the order. My favorite
is “Lord Vader, Former Handle Anakin” for Link, Visited, Focus, Hover, Active.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors

Selector Type Description


a:link Pseudo-Class Selects links that have not been visited.
a:visited Pseudo-Class Selects links that have been visited.
Selects elements (such as text boxes or listboxes) that have
:focus Pseudo-Class the input focus.

:hover Pseudo-Class Selects elements that the mouse pointer is currently above.
Selects an element that is being activated by the user. A
:active Pseudo-Class typical example is a link that is being clicked.
Selects a form element that is currently checked. A typical
:checked Pseudo-Class example might be a radio button or a check box.
Selects an element that is the first child of its parent. A
:first-child Pseudo-Class common use is to provide different styling to the first
element in a list.

Selects the first letter of an element. Useful for adding


:first-letter Pseudo-Element drop-caps to a paragraph.

:first-line Pseudo-Element Selects the first line of an element.


Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui 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 Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
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.
While some of these contextual selectors are used relatively infrequently, almost all web authors find
themselves using descendant selectors.
Selector Matches Example

A specified element that is contained div p


somewhere within another specified element. Selects a <p> element that is contained
Descendant somewhere within a <div> element.
That is, the <p> can be any descendant,
not just a child.
A specified element that is a direct child of the div>h2
Child specified element. Selects an <h2> element that is a child
of a <div> element.
A specified element that is the next sibling (i.e., h3+p
Adjacent Sibling comes directly after) of the specified element Selects the first <p> after any <h3>.

A specified element that shares h3~p


General Sibling the same parent as the specified Selects all the <p> elements that share
element.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui
the same parent as the <h3>.
Fundamentals of Web Development - 2nd Ed.
Descendant Selector
Selects all elements that are contained within another element

While some of these contextual selectors are used relatively infrequently,


almost all web authors find themselves using descendant selectors.
A descendant selector matches all elements that are contained within
another element. The character used to indicate descendant selection is
the space character.

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

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
You can combine contextual selectors with grouped
selectors. The comma is like the logical OR operator.
Thus, the grouped selector:

div#main div time, footer ul li { color: red; }

is equivalent to:

div#main div time { color: red; }


footer ul li { color: red; }

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Why Conflict Happens
In CSS that is

Because
• there are three different types of style sheets (author-
created, user-defined, and the default browser style
sheet),
• it is possible within an author-created stylesheet to
define multiple rules for the same HTML element,
CSS has a system to help the browser determine how to
display elements when different style rules conflict.

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

The “Cascade” in CSS refers to how conflicting rules are handled.


The visual metaphor behind the term cascade is that of a mountain
stream progressing downstream over rocks.
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 Modified by Mohammed Siddiqui 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 Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance

In the above example only some of the property rules are for the <body > element. That
is, only the body element will have a thick green border and 100-px margin, however all
the text in the other elements in the documents will be in the Arial font and colored red.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Inheritance
How to force inheritance

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


inheritable.

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

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

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.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Specificity
These color and font-weight properties
are inheritable and thus potentially
applicable to all the child elements
contained within the body.
However, because the <div> and <p>
elements also have the same
properties set, they override the value
defined for the <body> element
because their selectors (div and p) are
more specific.
Class selectors are more specific than
element selectors, and thus take
precedence and override element
selectors.

Id selectors are more specific than


class selectors, and thus take
precedence and override class
selectors.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Specificity Algorithm
The algorithm that is used to determine specificity is :

First count 1 if the declaration is from a 'style' attribute in the HTML,


0 otherwise (let that value = a).
Count the number of ID attributes in the selector (let that value = b).
Count the number of other attributes and pseudo-classes in the
selector (let that value = c).
Count the number of element names and pseudo-elements in the
selector (let that value = d).
Finally, concatenate the four numbers a+b+c+d together to calculate
the selector’s specificity.

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

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

Can you guess what will be the color of the sample text ?
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2
nd Ed.
The Cascade: How Styles Interact Location
What color would the sample text be if there wasn’t an inline style definition?

There’s always an exception


There is one exception to the principle of location.
If a property is marked with !important in an author-created style rule, then it will override any other
author-created style regardless of its location.
The only exception is a style marked with !important in an user style sheet; such a rule will override all
others.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Box Model Overview
In CSS, all HTML elements exist within an element box.
It is absolutely essential that you familiarize yourself with the terminology
and relationship of the CSS properties within the element box.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Box Model Background Properties
Property Description
A combined short-hand property that allows you to set the background values
background in one property. While you can omit properties with the short-hand, do
remember that any omitted properties will be set to their default value.

background-attachment Specifies whether the background image scrolls with the document (default)
or remains fixed. Possible values are: fixed, scroll.

background-color Sets the background color of the element.

Specifies the background image (which is generally a jpeg, gif, or png file) for
background-image the element. Note that the URL is relative to the CSS file and not the HTML.
CSS3 introduced the ability to specify multiple background images.

Specifies where on the element the background image will be placed. Some
possible values include: bottom, center, left, and right. You can also supply a
background-position pixel or percentage numeric position value as well. When supplying a numeric
value, you must supply a horizontal/vertical pair; this value indicates its
distance from the top left corner of the element.

Determines whether the background image will be repeated. This is a


background-repeat common technique for creating a tiled background (it is in fact the default
behavior). Possible values are: repeat, repeat-x, repeat-y, and no-repeat.

background-size New to CSS3,


Randy Connolly and Ricardo Hoar
this property lets youFundamentals
Modified by Mohammed Siddiqui
modify the ofsize of the background image.
Web Development - 2nd Ed.
The Box Model Background Repeat

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Background Position

Box Model Property #2: Borders


 Borders provide a way to visually separate elements.
 You can put borders around all four sides of an
element, or just one, two, or three of the sides.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Borders
Property Description
A combined short-hand property that allows you to set the style,
width, and color of a border in one property. The order is important
border and must be:
border-style border-width border-color

border-style Specifies the line type of the border. Possible values are: solid,
dotted, dashed, double, groove, ridge, inset, and outset.

border-width The width of the border in a unit (but not percents). A variety of
keywords (thin, medium, etc) are also supported.

border-color The color of the border in a color unit.

border-radius The radius of a rounded corner.

border-image The URL of an image to use as a border.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Shortcut notation
TRBL

With border, margin, and padding properties, there are long-form


and shortcut methods to set the 4 sides. For instance, we can set the
side properties individually:
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 */

border-color: red; /* sets all four sides to red */

border-color: red green orange blue; /* sets all four sides differently */

When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottom left. (TRBL)

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Margins and Padding
Box Model Properties #3 and #4
Margins and Padding are essential properties for adding white space to a web page, which
can help differentiate one element from another. Figure illustrates how two properties can
be used to provide spacing and element differentiation.

Margins add
spacing around
an element’s
content, while
padding adds
spacing within
elements.
Borders divide
the margin area
from the
padding area.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Margins
Why they will cause you trouble.

Did you notice that the space


between paragraphs one and two and
between two and three is the same
as the space before paragraph one
and after paragraph three?
This is due to the fact that adjoining
vertical margins collapse.

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

If overlapping margins did not collapse, then margin space for  would be 180p (90pixels
for the bottom margin of the first <div> + 90 pixels for the top margin of the second <div>),
while the margins  and  for would be 100px.

However, as you can see this is not the case.


Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Collapsing Margins
How it works

When the vertical margins of two elements touch,


• the largest margin value of the elements will be displayed
• the smaller margin value will be collapsed to zero.
Horizontal margins, on the other hand, never collapse.
To complicate matters even further, there are a large number of
special cases in which adjoining vertical margins do not collapse.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Width and Height
Box Model Properties #5 and #6

The width and height properties specify the size of the


element’s content area.
Perhaps the only rival for collapsing margins in
troubling our students, box dimensions have a number
of potential issues.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Width and Height
Potential Problem #1

Only block-level elements and non-text inline


elements such as images have a width and height that
you can specify.
By default the width of and height of elements is the
actual size of the content.
For text,
• this is determined by the font size and font face;
For images,
• the width and height of the actual image in pixels
determines the element box’s dimensions.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Width and Height
Potential Problem #2

Since the width and the height refer to the size of the
content area, by default, the total size of an element is
equal to not only its content area, but also to the sum
of its padding, borders, and margins.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
div { Box Dimensions
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 5px;
margin: 10px;
border: solid 2pt black; True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
} True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px

This is something that


tends to give beginning
10px 5
Every CSS rule begins with200px
a selector. The selector identifies
5
2
10px CSS students trouble.
2
Figure illustrates the
which element or elements in the HTML document will be
100px
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
Default default content-box
by the browser to select the HTML elements that will receive
element sizing
behavior.

div { Figure also shows the


...

}
box-sizing: border-box; True element width = 10 + 200 + 10 = 220 px newer alternative
True element height = 10 + 100 + 10 = 120 px
border-box approach,
which is perhaps more
intuitive (in-built ), but
Every CSS rule begins with a selector. The selector identifies
which element or elements in the HTML document will be
which requires vendor
100px
affected by the declarations in the rule. Another way of prefixes for it to work
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive
on all recent browsers.
10px 200px 10px

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Width and Height Limitations of Height Property

For block-level elements such as <p> and <div> elements, there are limits to what the width
and height properties can actually do. You can shrink the width, but the content still to be
displayed, so the browsers may very well ignore the height that you set.
In Figure, the default width is the browser in viewport. But in the second screen capture in
the image, with the changed width and height, there is not enough space for the browser to
display all the content within the element. So while the browser will display a background
color of 200x100 px (i.e. the size of the element as set by the width and height properties),
the height of the actual textual content is much larger (depending on the font size).
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Box Model Overflow Property

It is possible to control what happens with the contents if the box’s width and height are
not large enough to display the content using the overflow property as shown in figure.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Sizing Elements
Time to embrace ems and percentages

While the previous examples used pixels for its measurement, many
contemporary designers prefer to use percentages or em units for widths
and heights.
• When you use percentages, the size is relative to the size of the parent
element.
• When you use ems, the size of the box is relative to the size of the text
within it.
The rationale behind using these relative measures is to make one’s design
scalable to the size of the browser or device that is viewing it.

One of the problem with using percentages as the units for sizes is that as the browsers
window shrinks too small or expands too large (for instance on a wide-screen monitor),
elements might become too small or too large. You can put absolute pixel constraints on the
minimum and maximum sizes via the min-width, min-height, max-width, and max-height
properties.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Box Model Box Sizing Using Percents

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

Developer tools in current browsers make it significantly easier to examine and troubleshot
CSS than was the case a decade ago.
You can use the various browsers’ CSS inspection tools to examine, for instance, the box
values for a selected element.

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Text Properties
Two basic types

CSS provides two types of properties that affect text.


• font properties that affect the font and its
appearance.
• paragraph properties that affect the text in a similar
way no matter which font is being used.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
CSS Text Styling Font Family
Property Description
A combined shorthand property that allows you to set
the family, style, size, variant, and weight in one
property. While you do not have to specify each
font property, you must include at a minimum the font size
and font family. In addition, the order is important and
must be:
style weight variant size font-family
Specifies the typeface/font to use. More than one can be
font-family 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


Specifies either normal, bold, bolder, lighter, or a value
between
Randy Connolly and Ricardo Hoar
font-weight 100 and 900 in
Modified by Mohammed Siddiqui
multiples of 100, where larger
Fundamentals of Web Development - 2 Ed.
nd
Font-Family
A few issues here

The first of these problems involves specifying the font


family. A word processor on a desktop machine can make
use of any font that is installed on the computer; browsers
are no different.
However, just because a given font is available on the web
developer’s computer, it does not mean that that same
font will be available for all users who view the site.
For this reason, it is conventional to supply a so-called web
font stack, that is, a series of alternate fonts to use in case
the original font choice in not on the user’s computer.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Specifying the Font-Family

• In the Figure as you see, the alternatives are separated by commas; as well, if the font
name has multiple words, then the entire name must be enclosed in quotes.
• The font-family property supports five different generic families; the browser supports a
typeface from each family.
• While there is no real limit to the number of fonts that one can specify with the font-
family property, in practice, most developers will typically choose three or four stylistically
similar fonts.
One common approach is to make your font stack contain, in this order, the following:
ideal, alternative, common, and then generic.
Take for instance, the following font stack:
font-family { "Hoefler Text", Cambria, "Times New Roman", serif; }
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Generic Font-Family
Different Font Families

The font-family property supports five different generic families.


The browser supports a typeface from each family.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Font Sizes
Mo control, mo problems

Another potential problem with web fonts is font sizes.

In a print-based program such as a word processor, specifying a font size in points


is unproblematic.

Making some text 12 pt will mean that the font's bounding box (which in turn is
roughly the size of its characters) will be 1/6 of an inch tall when printed, while
making it 72 pt will make it roughly one inch tall when printed.

However, absolute units such as points and inches do not translate very well to
pixel-based devices.

Somewhat surprisingly, pixels are also a problematic unit.

Newer mobile devices in recent years have been increasing pixel densities so that
a given CSS pixel does not correlate to a single device pixel.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Font Sizes CSS Font Sizes
Welcome ems and percents again

So while sizing with pixels provides precise control, If we wish to create


web layouts that work well on different devices, we should learn to use
relative units such as em units or percentages for our font sizes (and
indeed for other sizes in CSS as well).
One of the principles of the web is that the user should be able to change
the size of the text if he or she so wishes to do so.
Using percentages or em units ensures that this user action will work and
not break the page layout.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
How to use ems and percents
Font Sizes
When used to specify a font size, both em units and percentages are relative to
the parent’s font size. Figure below illustrates a common set of percentages and
their em equivalents to scale elements relative to the default 16-px font size.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
How to use ems and percents
It might seem easy … but it’s not …

While this looks pretty easy to master, things unfortunately


can quickly become quite complicated.
Remember that percents and em units are relative to their
parents, so if the parent font size changes, this affects all of
its contents.
Figure 4.29 illustrates how in reality it can quickly become
difficult to calculate actual sizes when there are nested
elements. As you can see in the second screen capture in
Figure 4.29 , changing the <article> element's size changes
the size of the <p> and <h1> elements within it, thereby
falsifying their claims to be 16 and 32 px in size!
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
ems and percents units for font sizes

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The rem unit
Solution to font sizing hassles?
CSS3 now supports a new relative measure, the rem (for root em unit).

This unit is always relative to the size of the root element (i.e., the <html> element).

However, since Internet Explorer prior to version 9 do not support the rem units, you
need to provide some type of fallback for those browsers.

Some developers have begun to advocate again for using the pixel as the unit of measure
in CSS. Why? Because modern browsers provide built-in scaling/zooming that preserve
layout regardless of whether the CSS is using pixels, ems, or rems.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
@font-face
The future is now

Over the past few years, the most recent


browser versions have begun to support
the @font-face selector in CSS.
This selector allows you to use a font on
your site even if it is not installed on the
end user’s computer.
Due to the on-going popularity of open
source font sites such as Google Web
Fonts
(http://www.google.com/webfonts) and
Font Squirrel
(http://www.fontsquirrel.com/), @font-
face seems to have gained a critical mass
of widespread usage.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
CSS Text Styling Paragraph Properties Text 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.

Property Description

Adjusts the space between letters. Can be the value


letterspacing
normal or a length unit.
Specifies the space between baselines (equivalent to
leading in a desktop publishing program). The default
lineheight
value is normal, but can be set to any length unit. Can
also be set via the shorthand font property.
Specifies the URL of an image to use as the marker for
liststyleimage
unordered lists.
Selects the marker type to use for ordered and
liststyle-type unordered lists. Often set to none to remove markers
when the list is a navigational menu or a input form.
Aligns the text horizontally in a container element in a
Randy Connolly and Ricardo HoarModified by Mohammed Siddiqui Fundamentals of Web Development - 2 Ed.
nd

text-align similar way as a word processor. Possible values are left,


Text Properties
Property Description

Indents the first line of a paragraph by a specific


textindent
amount.
A new CSS3 property that can be used to add a drop
textshadow
shadow to a text.
Changes the capitalization of text. Possible values
texttransform are:
none, capitalize, lowercase, and uppercase.
Aligns the text vertically in a container element.
verticalAlign
Most common values are: top, bottom, and middle.
Adjusts the space between words. Can be the value
wordspacing
normal orModified
Randy Connolly and Ricardo Hoar
a length unit. Fundamentals of Web Development - 2 Ed.
by Mohammed Siddiqui nd
CSS Text Styling Just look at text-shadow
CSS Paragraphs

One of the interesting


new text properties in
CSS3 is the text-shadow
property. As you can see
in Figure 4.32 , the
property takes four
values: the x and y offset
in pixels, the size of the
shadow's blur, and the
color of the shadow. The
figure also illustrates the
related box-shadow
property, which uses the
same order of values as
text-shadow.

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

3 Location of
Styles 4 Selectors

5 6 The Box Model


The Cascade: How
Styles Interact

7 8
CSS Text Styling Summary

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

absolute units collapsing margins element box


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

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

generic font percentages specificity

grouped selector presentation style rules

id selector property:value pair TRouBLe

inheritance pseudo-class selector universal element


selector
inline styles pseudo-element
selector user style sheets
internal styles
relative units vendor prefixes
location
rem units web font stack
margin
responsive design x-height
padding
selector
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Questions

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.

You might also like