Introduction to Cascading

Style Sheets
• O b j e c t i v e s:
• In this chapter you’ll learn:
• Control a website’s appearance with style sheets.
• Use a style sheet to give all the pages of a website the same look and
feel.
• Use the class attribute to apply styles.
• Specify the precise font, size, color and other properties of displayed text.
• Specify element backgrounds and colors.
• Understand the box model and how to control margins,borders and
padding.
• Use style sheets to separate presentation from content.
 Introduction to Cascading
Style Sheets
• Outline:
• Introduction • Backgrounds
• Inline Styles • Element Dimensions
• Embedded Style Sheets • Box Model and Text Flow
• Conflicting Styles • Media Types and Media Queries
• Linking External Style Sheets • Drop-Down Menus
• Positioning Elements: Absolute
Positioning, z-index
• Positioning Elements: Relative
Positioning, span
 Introduction
• In this chapter, we shift our focus to formatting and presenting information.
• To do this, we use a W3C technology called Cascading Style Sheets 3 (CSS3) that allows
you to specify the presentation of elements on a web page (e.g., fonts, spacing, sizes,
colors, positioning) separately from the document’s structure and content (section
headers, body text, links, etc.).
• This separation of structure from presentation simplifies maintaining and modifying
web pages, especially on large-scale websites.
• Though HTML5 has some attributes that control presentation, it’s better not to mix
presentation with content.
• If a website’s presentation is determined entirely by a style sheet, you can simply
swap in a new style sheet to completely change the site’s appearance.
 Inline Styles
• You can declare document styles
• inline in the HTML5 markup,
• in embedded style sheets or
• in separate CSS files.
• This section presents inline styles that
declare an individual element’s format
using the HTML5 attribute style.
• Inline styles override any other styles
applied using the techniques we discuss
later in the chapter.
• Figure 4.1 applies inline styles to p
elements to alter their font size and color.
Fig. 4.1 | Using inline styles.
Inline Styles
• Software Engineering Observation 4.1:
• Inline styles do not truly separate
presentation from content.
• To apply similar styles to multiple
elements, use
• embedded style sheets or
• external style sheets

Fig. 4.1 | Using inline styles.

Inline Styles
• The first inline style declaration
appears in line 16.
• Attribute style specifies an element’s
style.
• Each CSS property (font-size in this
case) is followed by a colon and a
value.
• In line 16, we declare this particular p
element to use a 20-point font size.
• Line 20 specifies the two properties,
font-size and color, separated by a
semicolon.

Fig. 4.1 | Using inline styles.

Inline Styles
• In Line 20, we set the given paragraph’s
color to deepskyblue.
• Hexadecimal codes may be used in
place of color names.
• Figure 4.2 contains the HTML standard
color set.
Embedded Style Sheets
• A second technique for using style
sheets is embedded style sheets,
which enable you to embed a CSS3
document in an HTML5 document’s
head section.
• Figure 4.3 creates an embedded style
sheet containing four styles.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• The style Element and MIME Types:
• The style element (lines 11–18)
defines the embedded style sheet.
• Styles placed in the head apply to
matching elements wherever they
appear in the body.
• CSS documents use the MIME type
text/css.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• The style sheet’s body (lines 12–17)
declares the CSS rules for the style
sheet.
• We’ll use a CSS selector to specify the
elements that will be styled according
to a rule.
• Our first rule (line 12) begins with the
selector em, which selects all em
elements in the document.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• An em element indicates that its
contents should be emphasized.
• Browsers usually render em elements
in an italic font.
• Each rule’s body is enclosed in curly
braces ({ and }).

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• Multiple properties are separated by
semicolons (;).(Line 12 and 13)
• The font-weight property in line 12
specifies the “boldness” of text.
• Possible values are bold, normal (the
default), bolder (bolder than bold text)
and lighter (lighter than normal text).
• Boldness also can be specified with
multiples of 100, from 100 to 900.
• Text specified as normal is equivalent to
400, and bold text is equivalent to 700.
• We also apply styles to all h1 and p
elements (lines 14–16).

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• Style Classes:
• Line 17 declares a selector for a style
class named special.
• Style-class declarations are preceded
by a period (.).
• They define styles that can be applied
to any element.
• In this example, class special sets
color to purple.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• Style Classes:
• You can also declare id selectors.
• If an element in your page has an id,
you can declare a selector of the form
#elementId to specify that element’s
style.

Fig. 4.3 | Embedded style sheet

 Embedded Style Sheets 1. <!DOCTYPE html>
2. <html>
14. <body style="text-
align:center">
• HTML id Attribute: 3. <head>
15. <h1>Geeks for Geeks</h1>
• The id attribute is used by CSS to be used 4. <title> 16. <p id="geeks">Welcome to
by the first element(a unique element) Geeks for Geeks</p>
having the matching id. 5. HTML id attribute
17. <p>A Computer Science
6. </title>
• In CSS, the id attribute is written using # portal for geeks</p>
symbol followed by id. 7. <style type=“text/css”> 18. </body>
• Syntax: 8. #geeks{ 19. </html>
• In CSS Stylesheet: 9. color:green;

• #id_name { 10. font-size:25px; Output:

• // CSS Property 11. }
12. </style>
•}
13. </head>
• <element id="id_name">
Embedded Style Sheets
• font-family Property:
• The font-family property (line 14) specifies
the name of the font to use.
• Not all users have the same fonts
installed on their computers, so CSS
allows you to specify a comma-separated
list of fonts to use for a particular style.
• The browser attempts to use the fonts in
the order in which they appear in the list.
• It’s advisable to end a font list with a
generic font family name in case the other
fonts are not installed on the user’s
computer (Fig. 4.5).

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• In this example, all em elements will be
displayed in a bold black font.
• We also apply styles to all h1 and p
elements (lines 14–16).

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• font-family Property:
• It’s advisable to end a font list with a
generic font family name in case the
other fonts are not installed on the
user’s computer (Fig. 4.5).
• In this example, if the tahoma font is
not found on the system, the browser
will look for the helvetica font.
• If neither is found, the browser will
display its default sans-serif font.
Embedded Style Sheets
• font-size Property:
• Property font-size (line 15) specifies a
12-point font.
• Other possible measurements in
addition to pt (point) are Relative
values—xx-small, x-small, small,
smaller, medium, large, larger, x-large
and xx-large—also can be used.
• Generally, relative font-size values are
preferred over points, because an
author does not know the specific
measurements of each client’s display.
Fig. 4.3 | Embedded style sheet
Embedded Style Sheets
• font-size Property:
• Relative values permit more flexible
viewing of web pages.
• For example, users can change font sizes
the browser displays for readability.
• A user may view a web page on a
handheld device with a small screen.
• Specifying a fixed font size (such as 18pt)
prevents the browser from scaling fonts.
• A relative font size, such as large or
larger, allows the browser to determine
the actual size of the text displayed.
Fig. 4.3 | Embedded style sheet
Embedded Style Sheets
• font-size Property:
• A relative font size, such as large or
larger, allows the browser to
determine the actual size of the text
displayed.
• Using relative sizes also makes pages
more accessible to users with
disabilities.
• Users with impaired vision, for
example, may configure their browser
to use a larger default font, upon
which all relative sizes are based.
Fig. 4.3 | Embedded style sheet
Embedded Style Sheets
• Applying a Style Class:
• Line 22 uses the HTML5 attribute class
in an h1 element to apply a style
class—in this case, the class named
special (declared with the .special
selector in the style sheet on line 17).
• When the browser renders the h1
element, the text appears on screen
with the properties of both an h1
element (tahoma, helvetica or sans-
serif font defined in line 14) and
• the .special style class applied (the
color purple defined in line 17).
Fig. 4.3 | Embedded style sheet
Embedded Style Sheets
• Applying a Style Class:
• The browser also still applies its own
default style to the h1 element—the
header is displayed in a large font size.
• Similarly, all em elements will still be
italicized by the browser, but they will
also be bold as a result of lines 12–13.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• Applying a Style Class:
• The formatting rules for both the p
element and the .special class are applied
to the text in lines 31–33.
• In many cases, the styles applied to an
element (the parent or ancestor element)
also apply to the element’s nested
elements (child or descendant elements).
• The em element nested in the p element
in line 32 inherits the style from the p
element (namely, the 12-point font size in
line 15) but retains its italic style.

Fig. 4.3 | Embedded style sheet

Embedded Style Sheets
• Applying a Style Class:
• So styles defined for the paragraph and
not defined for the em element are still
applied to this em element that’s nested
in the p element.
• Multiple values of one property can be
set or inherited on the same element, so
the browser must reduce them to one
value for that property per element
before they’re rendered.
• We discuss the rules for resolving these
conflicts in the next section.
Fig. 4.3 | Embedded style sheet
 Conflicting Styles
• Styles may be defined by
• a user,
• an author or
• a user agent.
• A user is a person viewing your web page,
• you’re the author—the person who writes the document—and
• the user agent is the program used to render and display the document (e.g., a web
browser).
 Conflicting Styles
• Styles cascade (and hence the term “Cascading Style Sheets”), or flow together, such
that the ultimate appearance of elements on a page results from combining styles
defined in several ways.
• Styles defined by the user take precedence over styles defined by the user agent.
• Styles defined by authors take precedence over styles defined by the user.
• Most styles defined for parent elements are also inherited by child (nested) elements.
• This makes sense for most styles, such as font properties, but there are certain
properties that you don’t want to be inherited.
 Conflicting Styles
• For example, the background-image property allows you to set an image as the
background of an element.
• If the body element is assigned a background image, we don’t want the same image to
be in the background of every element in the body of our page.
• Instead, the background-image property of all child elements retains its default value
of none.
• In this section, we discuss the rules for resolving conflicts between styles defined for
elements and styles inherited from parent and ancestor elements.
Conflicting Styles
• Figure 4.3 (Line 31-33) contains an
example of inheritance in which a child
em element inherits the font-size
property from its parent p element.
• However, in Fig. 4.3, the child em
element has a color property that
conflicts with (i.e., has a different value
than) the color property of its parent p
element.

Fig. 4.3 | Embedded style sheet

Conflicting Styles
• Figure 4.3 contains an example of
inheritance in which a child em
element inherits the font-size property
(Line 15) from its parent p element.
• However, in Fig. 4.3, the child em
element has a color property that
conflicts with (i.e., has a different value
than) the color property of its parent p
element.

Fig. 4.3 | Embedded style sheet

Conflicting Styles
• Properties defined for child and
descendant elements have a higher
specificity than properties defined for
parent and ancestor elements.
• Conflicts are resolved in favor of
properties with a higher specificity, so
the child’s styles take precedence.
• Figure 4.6 illustrates examples of
inheritance and specificity.
Conflicting Styles
• Properties defined for child and
descendant elements have a higher
specificity than properties defined for
parent and ancestor elements.
• Conflicts are resolved in favor of
properties with a higher specificity, so
the child’s styles take precedence.
• Figure 4.6 illustrates examples of
inheritance and specificity.
Conflicting Styles
• Line 11 applies property text-decoration
to all a elements whose class attribute is
set to nodec (line 37).
• The text-decoration property applies
decorations to text in an element.
• By default, browsers underline the text of
an a (anchor) element.
• Here, we set the text-decoration property
to none to indicate that the browser
should not underline hyperlinks.
• Other possible values for text-decoration
include overline, line-through and
underline.
 Conflicting Styles
• Line 12 specifies a style for hover, which is
a pseudo-class.
• Pseudo-classes give you access to
information that’s not declared in the
document, such as whether the mouse is
hovering over an element or whether the
user has previously clicked (visited) a
particular hyperlink.
• The hover pseudo-class is activated
dynamically when the user moves the
mouse cursor over (that is, hovers over)
an element.
• Pseudo-classes are separated by a colon
(with no surrounding spaces) from the
name of the element to which they’re
applied.
Conflicting Styles
• Line 13 causes all em elements that are
children of li elements to be bold.
• In the screen output of Fig. 4.6, Go to the
(contained in an em element in line 36)
does not appear bold, because the em
element is not nested in an li element.
• However, the em element containing with
mushrooms (line 33) is nested in an li
element, so it’s formatted in bold.
• The syntax for applying rules to multiple
elements is similar.
• In line 14, we separate the selectors with
a comma to apply an underline style rule
to all h1 and all em elements.
Conflicting Styles
• Line 13 causes all em elements that are
children of li elements to be bold.
• In the screen output of Fig. 4.6, Go to the
(contained in an em element in line 36)
does not appear bold, because the em
element is not nested in an li element.
• However, the em element containing with
mushrooms (line 33) is nested in an li
element, so it’s formatted in bold.
• The syntax for applying rules to multiple
elements is similar.
• In line 14, we separate the selectors with
a comma to apply an underline style rule
to all h1 and all em elements.
 Conflicting Styles
• Line 15 assigns a 20-pixel left margin to all ul
elements.
• A pixel is a relative-length measurement—it
varies in size, based on screen resolution.
• Other relative lengths include em (which, as a
measurement, means the font’s uppercase M
height—the most frequently used font
measurement), ex (the font’s x-height—
usually set to a lowercase x’s height) and
percentages (e.g., font-size: 50%).
• To set an element to display text at 150
percent of its default text size, you could use:
• font-size: 1.5em or
• font-size: 150%
Conflicting Styles
• Other units of measurement available
in CSS are absolute-length
measurements—i.e., units that do not
vary in size based on the system.
• These units are in (inches), cm
(centimeters), mm (millimeters), pt
(points; 1 pt = 1/72 in) and pc (picas; 1
pc = 12 pt).
• Line 16 specifies that all nested
unordered lists (ul elements that are
descendants of ul elements) are to
have font size .8em.
Conflicting Styles
• Good Programming Practice 4.1:
• Whenever possible, use relative-length
measurements.
• If you use absolute-length
measurements, your document may
not scale well on some client browsers
(e.g., smartphones).
 Linking External Style Sheets
• While embedded style sheets separate content from presentation, both are still
contained in a single file, preventing a web designer and a content author from
conveniently working in parallel.
• External style sheets solve this problem by separating the content and style into
separate files.
 Linking External Style Sheets
• With external style sheets (i.e., separate documents that contain only CSS rules):
• you can provide a uniform look and feel to an entire website (or to a portion of
one).
• Different pages on a site can all use the same style sheet.
• You can also reuse the same external style sheet across multiple websites.
• When changes to the styles are required, you need to modify only a single CSS file
to make style changes across all the pages that use those styles.
• This concept is sometimes known as skinning.
Linking External Style Sheets
• Figure 4.7 presents an external style
sheet.
• Lines 1–2 are CSS comments.
• The rules in this external style sheet
are the same as those in the
embedded style sheet in Fig. 4.6, lines
10–16.
Linking External Style Sheets
• Figure 4.8 contains an HTML5
document that references the external
style sheet.
• Lines 9–10 show a link element that
uses the rel attribute to specify a
relationship between the current
document and another document.
• Here, we declare the linked document
to be a stylesheet for this document.
• The type attribute specifies the related
document’s MIME type as text/css.
• The href attribute provides the style
sheet document’s URL.
Linking External Style Sheets
• The rendering results are the same as
in Fig. 4.6.
cascading order
• Inline takes precedence, then embedded, then external and finally the browser’s default
• Example:
• Lets have external css file: ext.css
• h1 {color:blue}
• And let’s also have html document:
• <html>
• <head>
• <link rel=“stylesheet” href=“ext.css”>
• /* embedded style sheet*/
• <style type=“text/css”>
• h1 {color:red}
• </head>
• <body>
• 1. <h1 style=“color:green”>welcome</h1>
• 2. <h1>what about this</h1>
• </body>
• </html>
Positioning Elements: Absolute Positioning, z-index
• CSS introduced the position property
and a capability called absolute
positioning, which gives you greater
control over how document elements
are displayed.
• Figure 4.9 demonstrates absolute
positioning.
Positioning Elements: Absolute Positioning, z-index
• CSS introduced the position property
and a capability called absolute
positioning, which gives you greater
control over how document elements
are displayed.
• Figure 4.9 demonstrates absolute
positioning.
Positioning Elements: Absolute Positioning, z-index
• Lines 10–13 define a style called
background_image for the first img
element (background_image.png) on
the page.
• Specifying an element’s position as
absolute removes the element from
the normal flow of elements on the
page,
• Instead positioning it according to the
distance from the top, left, right or
bottom margins of its containing
block-level element.
Positioning Elements: Absolute Positioning, z-index
• This means that it’s displayed on its
own line and has a virtual box around
it.
• Some examples of block-level
elements include section, div, p and
heading elements (h1 through h6).
• Here, we position the element to be 0
pixels away from both the top and left
margins of its containing element.
• In line 27, this style is applied to the
image, which is contained in a p
element.
Positioning Elements: Absolute Positioning, z-index
• The z-index property allows you to
layer overlapping elements.
• Elements that have higher z-index
values are displayed in front of
elements with lower z-index values.
• In this example, .background_image
has the lowest z-index (1), so it
displays in the background.
• The .foreground_image CSS rule (lines
14–17) gives the circle image
(foreground_image.png,in lines 30–31)
a z-index of 2, so it displays in front of
background_image.png.
Positioning Elements: Absolute Positioning, z-index
• The p element in line 33 is given a z-
index of 3 in line 21, so its content
(Positioned Text) displays in front of
the other two.
• If you do not specify a z-index or if
elements have the same z-index value,
the elements are placed from
background to foreground in the order
in which they’re encountered in the
document.
• The default z-index value is 0.
• Try reversing the z-index values and see
Positioning Elements: Relative Positioning, span
• Figure 4.10 demonstrates relative
positioning, in which elements are
positioned relative to other elements.
• Setting the position property to
relative, as in class super (lines 15–16),
lays out the element on the page and
offsets it by the specified top, bottom,
left or right value.
Positioning Elements: Relative Positioning, span
• Unlike absolute positioning, relative
positioning keeps elements in the general
flow of elements on the page, so
positioning is relative to other elements
in the flow.
• Class super (lines 15–16) lays out the
text at the end of the sentence as
superscript, and
• Class sub (lines 17–18) lays out the text
as subscript relative to the other text.
• Class shiftleft (lines 19–20) shifts the
text at the end of the sentence left and
• Class shiftright (lines 21–22) shifts the
text right.
Positioning Elements: Relative Positioning, span
• This is the output:
• Relative positioning keeps
elements in the general flow of
elements on the page, so
positioning is relative to other
elements in the flow.
Positioning Elements: Relative Positioning, span
• Inline and Block-Level Elements:
• We introduce the span element in
line 27.
• Lines 12–14 define the CSS rule for all
span elements in this example.
• The span’s height determines how
much vertical space it will occupy.
• The font-size determines the size of
the text inside the span.
• Element span is a grouping
element—by default, it does not
apply any formatting to its contents.
Positioning Elements: Relative Positioning, span
• Inline and Block-Level Elements:
• Its primary purpose is to apply CSS
rules or id attributes to a section of
text.
• Element span is an inline-level
element—it does not change the
flow of elements in the document.
• Examples of inline elements include
span, img, a, em and strong.
• The div element is also a grouping
element, but it’s a block-level
element.
Backgrounds
• CSS provides control over the
backgrounds of block-level elements.
• CSS can set a background color or add
background images to HTML5
elements.
• Figure 4.11 adds a corporate logo to
the bottom-right corner of the
document.
• This logo stays fixed in the corner even
when the user scrolls up or down the
screen.
Backgrounds
• CSS provides control over the
backgrounds of block-level elements.
• CSS can set a background color or add
background images to HTML5
elements.
• Figure 4.11 adds a corporate logo to
the bottom-right corner of the
document.
• This logo stays fixed in the corner even
when the user scrolls up or down the
screen.
Backgrounds
• background-image Property:
• The background-image property (line
10) specifies the image URL for the
image logo.png in the format
url(fileLocation).
• You can also set the background-color
property (line 14) in case the image is
not found (and to fill in areas the image
does not cover).
Backgrounds
• background-position Property:
• The background-position property (line
11) places the image on the page.
• The keywords top, bottom, center, left
and right are used individually or in
combination for vertical and
horizontal positioning.
Backgrounds
• background-position Property:
• You can position an image using lengths
by specifying the horizontal length
followed by the vertical length.
• For example, to position the image as
horizontally centered (positioned at 50
percent of the distance across the
screen) and 30 pixels from the top,
use:
• background-position: 50% 30px;
Backgrounds
• background-repeat Property:
• The background-repeat property (line
12) controls background image tiling,
which places multiple copies of the
image next to each other to fill the
background.
• Here, we set the tiling to no-repeat to
display only one copy of the
background image.
• Other values include repeat (the
default) to tile the image vertically and
horizontally, repeat-x to tile the image
only horizontally or repeat-y to tile the
image only vertically.
Backgrounds
• background-attachment: fixed
Property
• The next property setting, background-
attachment: fixed (line 13), fixes the
image inthe position specified by
background-position.
• Scrolling the browser window will not
move the image from its position.
• The default value, scroll, moves the
image as the user scrolls through the
document.
Backgrounds
• text-indent property:
• Line 17 uses the text-indent property
to indent the first line of text in the
element by a specified amount, in this
case 1em.
• You might use this property to create a
web page that reads more like a novel,
in which the first line of every
paragraph is indented.
Backgrounds
• text-indent property:
• Line 17 uses the text-indent property
to indent the first line of text in the
element by a specified amount, in this
case 1em.
• You might use this property to create a
web page that reads more like a novel,
in which the first line of every
paragraph is indented.
Backgrounds
• font-style property
• Another CSS property that formats text
is the font-style property, which allows
you to set text to none, italic or
oblique
• (oblique is simply more slanted than
italic—the browser will default to italic
if the system or font does not support
oblique text).
Element Dimensions
• In addition to positioning elements, CSS
rules can specify the actual dimensions
of each page element.
• Figure 4.12 demonstrates how to set
the dimensions of elements.
Element Dimensions
• In addition to positioning elements, CSS
rules can specify the actual dimensions
of each page element.
• Figure 4.12 demonstrates how to set
the dimensions of elements.
Element Dimensions
• Specifying the width and height of an
Element:
• The inline style in line 16 illustrates
how to set the width of an element on
screen;
• here, we indicate that the p element
should occupy 20 percent of the screen
width.
• If not specified, the width will fit the
size of the browser window.
Element Dimensions
• Specifying the width and height of an
Element:
• The height of an element can be set
similarly, using the height property.
• The width and height values also can
be specified as relative or absolute
lengths.
• For example,
• width: 10em
• sets the element’s width to 10 times
the font size.
• This works only for block-level
elements.
Element Dimensions
• text-align Property:
• Most elements are left-aligned by
default, but this alignment can be
altered.
• Line 21 sets text in the element to be
center aligned;
• other values for the text-align property
include left and right.
Element Dimensions
• overflow Property and Scroll Bars:
• In the third p element, we specify a
percentage width and a pixel height.
• One problem with setting both
dimensions of an element is that the
content inside the element can exceed
the set boundaries,
• in which case the element is simply
made large enough for all the
content to fit.
• However, in line 26, we set the
overflow property to scroll, a setting
that adds scroll bars if the text
Element Dimensions
• In addition to positioning elements, CSS
rules can specify the actual dimensions
of each page element.
• Figure 4.12 demonstrates how to set
the dimensions of elements.
Box Model and Text Flow
• All block-level HTML5 elements have a
virtual box drawn around them, based
on what is known as the box model.
• When the browser renders an element
using the box model, the content is
surrounded by padding, a border and a
margin (Fig. 4.13).