1

Advanced CSS

Lesson Plan WEB: A2-2

 Anticipated Problems
1. How are class tags used?

2. What are divisions and the box model?

3. Why is it important to sketch a box model

layout, and how do you do it?

2
 3

Terms
• border-box • class selector
• box model • <div>
• box-sizing • divisions
• cascade • id selectors
• cascading style sheets • position
(CSS) • pseudo-class
• class attribute • z-index property
 4

Cascade
• Cascade is a sorting order that determines which
properties will modify a given element based on
importance, specificity, and source order.
 Follows three steps to decide which properties to
assign to an element.
 5

Cascade
• Through the cascade process:
 A weight is assigned to each rule
 Weight decides which rule takes precedence when
more than one applies.
 The rules defined later in a document tree have
higher precedence than those defined earlier.
 6

Cascading Style Sheets

• Cascading style sheets (CSS) are web design
tools used to format webpage layouts.
 Define display variations for different devices and
screen sizes
 7

Cascading Style Sheets

• Using CSS, developers can control the layout of
multiple web pages all at once. CSS describes how
HTML elements are displayed on screen and in
other media, including:
 Text styles
 Table sizes
 Other webpage aspects (formerly defined only in HTML)
 8

Class Selectors
• CSS technologies provide a mechanism for defining
a style once and using it across multiple elements
using class selectors.
 id selectors may be defined and used in a document.

 CSS information is provided for individual elements

in the open element tag via the style attribute.
 9

Class Selectors
• Within the style attribute, formatting information
is provided in “property:value” pairs.
 Property-value pairs are separated from one
another by a semi-colon (;) symbol.
 When two elements are to be formatted in the
same fashion, the style attributes need to be
duplicated for each element.
 10

Class Selectors
• Using class selectors resolves this issue. A class
selector is a tool that creates styles with “names”
(or identifiers).
 Once a class selector has been created, it can be
used across multiple elements.
 11

Class Selectors
• Figure 2 can be reviewed to see an external style
sheet with a class selector. The class selector is
coded with full stop (“.”) in front of the selector.
 This style can be applied to any element.
 It also can be used across <p> and <li> elements.

• The class attribute is a tool that specifies the

class selector to be used across that element.
 12

Figure 2

Compare the style specification with that for the <h2> element. Element names are specified
without a full stop (“.”), and class selectors are specified with a period/dot “.” at the beginning.
 13

Class Selectors
• Class selectors can be specific to a single element.
 The red_text class selector contains an element
name, p, specified before the full stop (“.”).
 This means that only <p> elements may make use of
the red_text style.
 This is shown in the HTML code. Both the <p> element
and the <li> element make use of the red_text style
via the class attribute.
 As shown by the browser rendering of the document,
the style was applied only to the <p> element
 14

Class Selectors
• Creating class selectors and class selectors
combined with element specifications are both
valid.
 It is better to write simple CSS and create styles
with only class selectors, instead of combining class
selector with element names.
 It will help to keep the size of the CSS file smaller.
 15

Class Selectors
• Class names must be self-documenting.
 For example, a class that sets text color to red and
bolds it should be named so the class name
indicates its purpose, such as “red_bold.”
 16

iD Selectors
• Elements may use an attribute called “id,” and
styles may be associated with an id, much like
styles can be associated with a class.
 The difference is that id selectors are selectors
that begin with a “#” symbol instead of the “.”
symbol used by the class selector.
 17

iD Selectors
• The “id” selector is used by an element by
specifying the id attribute instead of the class
attribute.
 An id uses the id attribute of an HTML element to
select a specific element.
 18

Class and iD Tags

• A significant difference exists between use of
class and of id attributes.
 There may only be one element in a document with
a specific id value.
 19

Class and iD Tags

• Both the <p> element and an <li> element have
the same value specified for the id attribute.
 A document that contains two elements with the
same value for the id attribute will not pass
validation checks at a HTML5 document validator
service, such as the one maintained by the Nu HTML
Checker website at http://validator.w3.org/nu
 Additionally, formatting is only applied to the
element that makes use of the id value first.
 20

Class and iD Tags

• When should id values should be used?
 CSS specifications must be written using class
selectors.
 Styles must be specified using class attribute vales.
 The id attribute should be used to set up anchor
points within a document that can appear in links.
 In example1.html, there are two <p> elements.
 Each has a unique value for the id attribute.
 21

Class and iD Tags

Figure 6
 22

Class and iD Tags

• There are links in the example2.html that point to
these id values via the <a> element.
 Using id values allows for creating specific
hyperlinks.
 Instead of linking to an entire document, links can
be made to point to specific positions within the
document.
 23

Class and iD Tags

• The id attribute is also used by JavaScript code to
address specific elements within a document.
 Once a specific element has been retrieved by its
id value, its properties can be modified using
JavaScript code.
 24

Class and iD Tags

• This mode of addressing elements fails if there
are multiple elements with the same id value.
• It is considered good coding practice:
 To use class selectors to set up styles and
 To use the id attribute to uniquely identify individual
elements in a document.
 25

Pseudo-Class

• A pseudo-class is a specific state of an element.

A pseudo-class may be used to modify the
behavior of elements based upon user
interactions.
 It is used to change the style of <p> and <a>
elements when the mouse hovers over them or
 When the <a> element is clicked
 26

Pseudo-Class

• There is a drawback with pseudo-classes as

depicted in figure 7 (see E-unit).
 The styles associated with the hover pseudo-class
apply to all <a> elements.
 If there is a requirement to change the hover
behavior of some, but not all of the <a> elements,
selectors can be used with pseudo-classes.
 27

Figure 8 Pseudo-Class
Here are hover styles for two
different classes of elements. The
format for setting up a selector
along with a pseudo-class is shown
highlighted in yellow. Note the
use of the “.” separating the
element name and the name of
the selector, followed by the “:”
symbol between the name of the
class and the pseudo-class. The
specific class to be used across an
element is specified using the
class attribute. These statements
are shown highlighted in yellow.
 28

Divisions and the Box Model

• The <div> element, along with semantic

elements, is used to format, style, organize, and
group content to be placed on a webpage.
 Placement of block elements is dictated by the box
model principle.
 29

Divisions and the Box Model

• HTML elements fall into two categories:

 Block elements
 Inline elements

• Each block element, such as <p> and <div>, is

displayed on a separate line.
• Inline elements, such as <span> and <em>, work
with text in the same line.
 30

Divisions and the Box Model

• Elements may be nested. When an element, such

as a <p> element, is nested inside another
element, such as the <section> element, some
CSS styles flow from the “parent” element to the
“child” element (in this case, from the <section>
to the <p> element) via inheritance.
 Not all styles are inheritable.
 31

Divisions and the Box Model

• Creating an HTML document is conceptually

similar to writing a document.
 Prior to HTML5, page content was broken down
into smaller components or divisions.
 A division was set up using the <div> element,
which was a two-sided element.
 The <div> element was a block element, with each
<div> element starting on a separate line.
 32

Divisions and the Box Model

• The <div> element still works in HTML5, but it has

largely been supplanted by newer semantic
elements, all of which are block elements. The
names of semantic elements indicate the meaning
of the content maintained in an element, such as:
 <header>
 <main>
 <nav>
 <footer>
 <section>
 33

Divisions and the Box Model

• With the introduction of semantic elements, the

use of <div> elements in documents has
decreased.
 Now the <div> element is used to group multiple
elements together to apply common styling.
 34

Centering Elements

• In the original HTML specification, there was a

two-sided element called <center>. All elements
nested between the <center> and </center> tags
were rendered centered within their context.
 However, the HTML4 standards deprecated the
<center> element.
 Philosophically speaking, HTML documents should
only contain content.
 Presentational specifications should be provided
using CSS styles.
 35

Centering Elements
Figure 10
In HTML5, the
text-align property
is set to “center”
to align text within
an element.
 36

Centering Elements:
Figure 11 Complicated Example
In this example <nav>,
<section>, and an
<aside> elements are
specified.
•The <nav> element is
to be left aligned
•The <section>
element is to be
centered
•The <aside> element
is to be right aligned.
 37

Centering Elements:
Complicated Example
• In figure 11, the CSS file shows that the <nav> and
<section> elements are given a width property
and floated left.
 The <aside> element is floated to the right.
 NOTE: All elements are provided with a padded
property to ensure that element content does not
“stick” to the border.]
 38

Centering

• In the HTML code, the <section> element is nested

inside a <div> element with a class attribute value
of a selector in the CSS file that sets the text-align
property to “center.”
 Figure 12 shows that the text inside the <div>
element is centered. The <section> element,
however, is not centered within the page.
Figure 12
 39

Centering Elements

• Centering elements within a document can be

accomplished using a number of different
techniques.
 Rather than trying to use centering properties to
center- align an element, it is placed in a container
element that centers its child elements.
 40

Centering Elements

• As elements in a page are children of the <body>

element, changes can be made to the properties
of the <body> element, and other elements in the
document will inherit them since because they
are child elements of the <body> element.
 41

Centering Elements
Figure 13
• In figure 13: yellow highlight
 The style sets the border property, which
is used to depict the edges of the
<body>element and is specified to verify
that centering is occurring correctly.
 The width property states that this
selector takes up 80% of its available
space.
 42

Centering Elements
Figure 13
• In figure 13: yellow highlight
 The margin property is set to “auto.”
When the margin property is set to
“auto,” it centers the <body> element
within its container, which is the
document.
 Then the width property states that the
<body> element must take up 80 percent
of the webpage. The text-align property
ensures that the contents of <body>
element are centered.
 43

Centering Elements
Figure 13
• In figure 13: blue highlight
 One change has been made to the <nav>
and <aside> selectors. The <nav>
element is floated to the left of the
<body> element.
 The <nav> element inherits the text-align
property of the <body> element, and this
text inside this element is centered.
 44

Centering Elements
Figure 13
• In figure 13: blue highlight
 Setting the text-align property to “left”
overrides the property setting of the
parent <body> element and ensures that
test inside the <nav> element is left
aligned.
 The text-align property of the <aside>
element is also changed to “left.” The
<aside> element is floated to the right,
but to ensure that the text inside is not
centered, the text-align property is
changed.
 45

Centering Elements
Figure 13
• In figure 13: green highlight
 It contains styles for the <section>
element. It is no longer floated, and its
float property setting is commented out.
 Instead, its display property is set to
“inline-block.” This ensures that the
element does not start on a new line,
which is the default for block elements,
such as the <section> element.
 46

Centering Elements
Figure 13
• In figure 13: green highlight
 Since there is no float property
specified, it uses the property settings
specified for its parent <body> element.
 It uses the text-align property of the
<body> element to place itself inside its
container, and the <section> element
now appears to be centered inside the
<body> element.
 47

Centering Elements
Figure 14

To left align the text

inside the <section>
element, is text-align
property is set to
“left.”
See figure 14 for an
example
 48

Box Model

• The box model is a set of rules used by the

browser to determine the amount of space taken
up by an element on the page.
 An element on a webpage may be viewed as a box
since it has specific width and height properties.
 Even if the width and height properties are not
specified for an element, the browser determines
these properties before rendering it a browser
window.
 49

Width & Height

• The width and height properties are used to

determine the amount of space taken up by the
element to hold content.
 The padding property specifies the space added to
the element around the content.
 When a padding property is set, it is used to
“cushion” the element on the top, bottom, left,
and right. Individual padding properties are
specified using the padding-right, padding-left,
padding-top, and padding-bottom settings.
 50

Width & Height

• The border property specifies the border to be

placed around the content after padding has been
applied.
 The margin property does not affect the space
taken up by an element. Instead, it specifies the
space to be left between two elements.
 51

Embedded Style

• Figure 16 in the E-unit illustrates two <p>

elements that are block elements styled using an
embedded style.
 Embedded styles were used to keep the code simple.
 The width is set to 100px and the height to 50px.
 Padding is set to 10px, so 10 pixels will be left blank
on the top, bottom, left, and right of the <p>
element.
 A one-pixel border is applied.
 52

Embedded Style

• This figure below shows the file rendered in the

Chrome browser.
 It shows the layout settings for the <p> element.
 It shows that the padding and border are applied to
each side of the content element, along with the
margin. Figure 17
 53

Position-Related Properties

• The float property places elements at their

natural position or to the left or right of the
parent container.
 Aside from using the float property to place elements
on a page, there is another property called position.
 Position is a property that can be used to alter
placement of elements.
 This property is used in conjunction with top,
bottom, left, and right property settings.
 54

Position-Related Properties

• The position property can be used to move an

element to an absolute position within the page,
overriding the float property value.
 It may be used to move it relative to its current
position.
 55

Position-Related Properties

• See figure 18 in the E-unit. It shows a document

with embedded styles.
 The <body> element is set to have a border to see
its edges in the browser window.
 The margin property is used to center its position
on the page, and its background-color property is
changed.
 56

Position-Related Properties

• The first <p> element is displayed on the page

with a border to makes its dimensions visible, and
a padding property has been specified to ensure
that the content of the <p> element does not
“stick” to the border of the element.
 57

Position-Related Properties

• There are two class selectors. The “pos_relative”

selector states that position should be set to
“relative,” and a left property is set to 50 pixels.
 The background color property is also set.
 The “pos_absolute” class selector sets position to
“absolute” and changes the left, top, and
background properties.
 58

Position-Related Properties

• The browser view of the code is shown beneath

the HTML code. In the HTML code, the first <p>
element uses no class selector and is displayed in
its natural location within the <body> element.
 It is flush with the left edge of the <body> element
and is fully contained inside it.
 59

Position-Related Properties

• The second <p> element uses the “pos_relative”

style. This causes it to be positioned “relative”
with a left property.
 The relative positioning ensures that the element is
moved from its natural position.
 Its top and bottom property are not set, so it only
moves toward the left by 50 pixels.
 60

Position-Related Properties

• Its width property stays at its natural value, and it

now protrudes beyond the right edge of the
<body> element’s right edge.
 It also appears to be placed above the <body>
element as is evidenced by the background color of
the “pos_relative” selector.
 61

Position-Related Properties

• The third <p> element uses absolute positioning.

When absolute positioning is used, the natural
positioning of the element is no longer used, and
its space in the container element is not
preserved.
 Therefore, the border set for the <body> element is
placed after the first <p> elements have been
rendered on screen, leaving this <p> element
outside the border.
 62

Positioning Overlapping Elements

• CSS properties may cause elements to overlap.

Consider the code shown in figure 19 of the E-unit,
along with the browser view of the code.
 The embedded styles set up the <p> elements to
have a height and width of 100 pixels, along with a
border.
 The four class selectors set up styles that position
themselves absolutely at specified positions using
the position, left, and top properties.
 63

Positioning Overlapping Elements

• In the HTML code, they are used in the order of

p1, p2, p3, and p4.
 The browser view shows that the elements are
rendered in the order that they are coded in the
document.
 As they are laid out, they overlap one another.
 64

Positioning Overlapping Elements

• See figure 20. The order in which

elements are laid out in a
document in an overlap situation
may be modified using the z-
index property.

 The z-index property is a property provided as an

integer value and may be negative, 0, or positive.
 65

Positioning Overlapping Elements

• The z-index property only comes

into play when there are elements
with values specified for the
position property.
 When elements with different z-index values are
processed, higher values rise to the top and are
rendered visible.
 Elements with lower z-index values are pushed
beneath elements with higher values. The default
value of this property is 0.
 66

Positioning Overlapping Elements

• For a second example see figure 21 in the e-unit.

The z-index settings for the four selectors have
been changed, and they are now rendered in
order of the values maintained in the z-index
property, instead of being rendered in the order
that they are coded in the HTML document.
 The font-size property of the <p> element has
been changed, along with the text-align property
to make the text maintained in the <p> element
visible in the browser view.
 67

Box-Sizing Property

• Elements are sized when they are placed on a

page.
 The size of an element is based upon the height,
width, padding, border, and margin properties of
the element.
 68

Box-Sizing Property

• The only time the width property correctly

estimates the space taken up by an element on
the page is when the element’s margin and
padding properties are set to zero.
 When they are omitted, they default to zero, too.
 Therefore, when placing elements on a page, the
complete size of the element needs to be
calculated.
 69

Box-Sizing Property
Figure 22
• This is a simplified version of an
earlier visual where centering
elements within a page were
demonstrated.
 To keep the code simple, the
padding and margin properties
have been removed.
 70

Box-Sizing Property
Figure 22
• The code highlighted in yellow
sets the width property of each
of the three elements maintained
in the <body> element.
• The width has been specified as a
percentage value, and the sum of
the three width properties is 100
percent.
 71

Box-Sizing Property

• This figure shows the browser Figure 23

view of the code.

 Even though the sum of the width
properties of the three elements
contained in the <body> element
(<nav>, <section>, and <aside>
elements) is 100%, the <aside>
element overflowed to the next
line because the space taken by
the <nav> and <section> elements
was more than the <aside>
element requested.
 72

Box-Sizing Property

• The reason for this action is that Figure 23

the width property does not

factor in the padding and margin
properties of each of the
elements.
• Each of the elements is displayed
with a border, which adds to the
space taken by the element on
the page.
 73

Box-Sizing Property

• CSS3 introduced a new property called the box-

sizing property. Box-sizing is a property that
allows the developer to place elements correctly
on a page without having to calculate the actual
width.
 The default value for this property is “content-
box.”
 When used with the default value, it sizes elements
based upon their content.
 74

Box-Sizing Property

• When this property is set to “border-box,” the

width property incorporates the content, border,
and padding values (but not the margin property).
 It is used to correctly estimate the space needed to
place the element on the page.
 In border-box, the width and height properties
include the content, the padding, and the border,
but not the margin.
 75

Box-Sizing Property

• Code is the same as that shown in the previous

example. The only difference is that now the box-
sizing property is set.
 This property may be set for the <nav>, <section>,
and <aside> element separately.
 76

Box-Sizing Property

• This is shown in the code

as a comment.
 It is more convenient to set it for all elements in
the page using the code shown in lines 11 to 13.
 The “*” is a placeholder for all elements,
indicating that for all elements, the width
property must incorporate content, borders, and
padding.
 77

De-bugging CSS

• Using CSS to Style Content: When a webpage uses

CSS to style content, it can become difficult to
see the various style settings at work in a page.

 For example, it is important to consider the code

shown in figure 24 in the E-unit.
 78

De-bugging CSS

• Styles are set for the <body>, <section>, and <p>

element. When the code is rendered in a browser
window, it is a combination of the styles applied
at each level of the element hierarchy in the
inheritance sequence.
 As can be seen from the browser view, the text-
align property from the <body> element, the color
property from the <section> element, and the
border from the blue_border selector are applied
to the <p> element.
 79

De-bugging CSS: Google Chrome

• After displaying the page in a window in the

Google Chrome browser window, the CSS settings
for the page can be made visible.
 80

De-bugging CSS: Google Chrome

 81

De-bugging CSS: Firefox

• To view debugging information, click on the Tools

menu option, and select “Web Developer” and
“Inspector.” (If the menu bar is not visible, right-
click on the title bar, and select the “Menu bar”
option.)
 82

De-bugging CSS: Firefox

• See below, this is the browser view of the HTML

code, along with the Inspector window. As can be
seen, the CSS rules apply to the element shown,
along with the properties inherited from parent
elements
 83

Review
• What do iD selectors begin with?
• What is a set of rules used by the browser to
determine the amount of space taken up by an
element on the page?
• What does box-sizing allow the developer to do?