Chapter 2 Cascading Style Sheets Fundamentals

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES
TAGUIG CAMPUS
CHAPTER 2
Prepared by: Patrick Justin L. Ariado

01
CSS Overview
CSS Overview
• Used to define and customize the styles and layouts

for your web pages.
• This means you can create style sheets to alter the
design, layout, and responsiveness to different
screen sizes on various devices from computers to
smartphones.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 3

CSS Overview
• CSS describes how HTML elements are to be

displayed on screen and controls the layout of
multiple web pages all at once.
• CSS is a separate language with its own syntax.

02
Style Rules
Style Rules
• A style sheet is made up of one or more style

instructions (called rules or style rules) that describe
how an element or group of elements should be
displayed.
• Each rule selects an element and declares how it
should look.

Style Rules
• The two main sections of a rule are the selector that

identifies the element or elements to be affected,
and the declaration that provides the rendering
instructions.
• The declaration, in turn, is made up of a property
and its value, separated by a colon and a space.

Style Rules

Style Rules

Style Rules

Style Rules
3 Parts of a Style Rule
1. Selector − A selector is an HTML tag/element/etc.
at which a style will be applied.
2. Property − A property is a type of attribute of HTML
tag. Put simply, all the HTML attributes are
converted into CSS properties. They could be
color, border etc.
3. Value − Values are assigned to properties. For
example, color property can have value either red
or #F1F1F1 etc.

Note
• Technically, the semicolon is not required after the

last declaration in the block, but it is recommended
that you get into the habit of always ending
declarations with a semicolon.
• It will make adding declarations to the rule later that
much easier.

03
CSS Inclusions
CSS Inclusions
• There are 3 ways to include CSS to your HTML File.
1. Inline CSS
2. Embedded CSS / Internal CSS
3. External CSS

Inline CSS
Inline CSS involves applying styles directly to
individual HTML elements using the style attribute.
Inline CSS
CSS Inclusions
• The styles are written directly within the HTML tag,

and they take precedence over other CSS styles.
• To add multiple properties, just separate them with
semicolons.

Syntax
CSS Inclusions

Inline CSS
CSS Inclusions
• You can apply properties and values to a single

element using the style attribute in the element itself.

Embedded CSS /
Internal CSS
Internal CSS is placed within the <style> tags in the
<head> section of an HTML document.
Embedded CSS / Internal CSS
CSS Inclusions
• The styles defined inside the <style> tags will apply to

the entire document or the specific elements
targeted by the CSS selectors.
• Internal CSS is helpful when you want to apply styles
to specific elements within a single HTML document.
• It allows for better organization and separation of
styles from the HTML content.

Syntax
CSS Inclusions

Syntax
CSS Inclusions
• The <style> tags are placed within the <head>

section of the HTML document.
• The CSS code is written between the opening and
closing <style> tags.
• Inside the CSS code, you can specify one or more
CSS rules, which consist of selectors and declaration
blocks.

Syntax
CSS Inclusions
• CSS rules are written in the style rule format, where

selector specifies the HTML element(s) you want to
style, and property: value; defines the specific styles
you want to apply to those elements.
• Multiple CSS rules can be included, each separated
by a line break or semicolon.

Embedded CSS / Internal CSS
CSS Inclusions

External CSS
External CSS involves creating a separate CSS file
with a .css extension and linking it to the HTML
document using the <link> tag.
External CSS
CSS Inclusions
• The external CSS file contains all the styles for the
website, keeping the styles separate from the HTML
code.
• External CSS allows for easy maintenance,
reusability, and consistency across multiple HTML
pages.
• It is particularly useful for larger projects where you
want to keep the styles separate and manageable.

External CSS
CSS Inclusions
• The syntax for including an external CSS file in an

HTML document involves using the <link> tag in the
<head> section.

Syntax
CSS Inclusions

External CSS
CSS Inclusions
• The <link> tag is used to link the external CSS file to

the HTML document.
• The rel attribute specifies the relationship between
the HTML document and the linked file.
• In this case, rel="stylesheet" indicates that the linked
file is a stylesheet (CSS file).

External CSS
CSS Inclusions
• The type attribute specifies the MIME type of the

linked file.
• In the case of CSS, type="text/css" is used.

External CSS
CSS Inclusions
• The href attribute specifies the path or URL of the

external CSS file.
• In this example, href="styles.css" indicates that the
CSS file named "styles.css" is located in the same
directory as the HTML document.
• If the CSS file is in a different directory, you need to
specify the correct path.

Syntax
CSS Inclusions

Syntax
CSS Inclusions

Task Sheet 2

04
Document Object Model
Document Object Model (DOM)
• A programming interface for HTML and XML

documents.
• It represents the structure of a web page as a
hierarchical tree-like structure, where each element
in the HTML document is represented as a node in
the tree.
• The DOM allows you to programmatically access,
manipulate, and update the content, structure, and
style of a web page.
• The DOM represents the HTML document as a tree

structure, where each element, attribute, and text
node is a part of the tree.
• The topmost node is the document object, which
represents the entire HTML document.

• Each element, attribute, and text in the HTML

document is represented as a node in the DOM
tree.
• There are different types of nodes, such as element
nodes, attribute nodes, and text nodes.
• Element nodes represent HTML elements, attribute
nodes represent attributes of elements, and text
nodes represent the text content within elements.

• Nodes in the DOM have parent-child relationships

based on their hierarchical position in the HTML
document.
• An element node can have child nodes, which are
the elements or text nodes inside it, and it can also
have a parent node, which is the element that
contains it.

Sample DOM

05
CSS Selectors
Type/Element Selector
CSS Selectors
• It selects HTML elements based on their tag names.

For example, p selects all <p> elements.

Type/Element Selector
CSS Selectors

Class Selector
CSS Selectors
• Targets elements based on their class attribute. It

selects all elements that have a specific class name.

Class Selector
CSS Selectors

ID Selector
CSS Selectors
• Targets elements based on their ID attribute. It

selects a single element that has a specific ID.

ID Selector
CSS Selectors

Attribute Selector
CSS Selectors
• Targets elements based on their attribute values.

• It selects elements that have a specific attribute or
attribute value.

Attribute Selector
CSS Selectors

Descendant Selector
CSS Selectors
• Targets elements that are descendants of another

element.
• It selects elements that are inside another element,
regardless of their relationship.

Descendant Selector
CSS Selectors

Child Selector
CSS Selectors
• Targets direct child elements of another element.

• It selects elements that are immediate children of
another element.

Child Selector
CSS Selectors

06
Formatting Text
Fonts
Fonts

font-family

font-family
• Use the font-family property to specify a font or font

stack (known as list of fonts)

font-family

font-family
• All font names, with the exception of generic font

families, must be capitalized.
For example, use “Arial” instead of “arial”.
• Use commas to separate multiple font names.
• Notice that font names that contain a character
space (such as Duru Sans in the example) must
appear within quotation marks.

font-family
Font Limitations
• Browsers are limited to displaying fonts they have

access to.
• Even when you specify that the font should be
Futura in a style rule, if the browser can’t find it (for
example, if font is not installed on the user’s
computer or the provided web font fails to load),
the browser uses its default font instead.

font-family
Font Limitations
• Font Stacks allows us to provide a list of back-up

fonts, should our first choice not be available.
• If the first specified font is not found, the browser tries
the next one, and down through the list until it finds
one that works.

font-family
Generic Font Families
• Broad categories of fonts that are commonly

available across different operating systems and
devices.
• They serve as fallback options when specific fonts
are not available on a user's system.

font-family
serif: Fonts that have small decorative strokes at the

ends of characters.

font-family
Times New Roman

Georgia
Palatino
Baskerville
Garamond

font-family
sans-serif: Fonts without decorative strokes at the

ends of characters, known for their clean and
modern appearance.

font-family
Arial
Helvetica
Verdana
Calibri
Tahoma

font-family
monospace: Fonts where each character occupies

the same amount of horizontal space, providing a
fixed-width appearance.

font-family
Courier New
Consolas
Lucida Console
MS Gothic

font-family
cursive: Fonts that mimic handwriting or have a

flowing and script-like appearance.

font-family
Comic Sans MS
Brush Script
Mistral
Lucida Handwriting
Segoe Script

font-family
fantasy: Fonts that are decorative and often used for

special purposes, such as headings or logos.

font-family
Impact
Papyrus
Jokerman
Chiller
Ravie

font-family

font-size

font-size
You can specify text size in several ways:

• At a specific size using one of the CSS length units.

font-size
• When specifying a number of units, be sure the unit

abbreviation immediately follows the number, with
no extra character space in between.
• As a percentage value, sized up or down from the
element’s default or inherited font size.
• Using one of the absolute keywords (xx-small, x-
small, small, medium, large, x-large, xx-large).

font-size
• Using a relative keyword (larger or smaller) to nudge

the text larger or smaller than the surrounding text

CSS Units of Measurement
CSS3 provides a variety of units of measurement. They fall into two
broad categories:
absolute and relative.
Relative Units
• Relative units are based on the size of something

else, such as the default text size or the size of the
parent element.

Relative Units

Absolute Units
• Absolute units have predefined meanings or real-

world equivalents.

Absolute Units

Absolute Units
• Absolute units should be avoided for web page style

sheets because they are not relevant on computer
screens.
• However, if you are creating a style sheet to be used
when the document is printed, they may be just the
ticket.

font-weight

font-style

font

font
• Shorthand font property that compiles all the font-

related properties into one rule.

color

07
Colors
Colors
• There are two main ways to specify colors in style

sheets: with a predefined color name or, more
commonly, with a numeric value that describes a
particular RGB color.

Color Names
Colors
• The most intuitive way to specify a color is to call it

by name.
• Unfortunately, you can’t make up just any color
name and expect it to work.
• It has to be one of the color keywords predefined in
the CSS Recommendation.

CSS Color Recommendations
Colors

Colors

Colors

RGB Colors
Colors
• Names are easy, but as you can see, they are

limited.
• By far, the most common way to specify a color is by
its RGB value. It also gives you millions of colors to
choose from.

RGB Colors
Colors
• Computers create the colors you see on a monitor

by combining three colors of light: red, green, and
blue.
• This is known as the RGB color model.
• You can provide recipes for colors by telling the
computer how much of each color to mix in.

RGB Colors
Colors
• The amount of light in each color “channel” is

typically described on a scale from 0 (none) to 255
(full-blast), although it can also be provided as a
percent.
• The closer the three values get to 255 (100%), the
closer the resulting color gets to white.

RGB Color Model
Colors

HEX RGB Values
Colors
• For Hex RGB it is actually a series of three two-digit

numbers, one each for red, green, and blue.
• But instead of decimal (base-10, the system we’re
used to), these values are written in hexadecimal, or
base-16.

HEX RGB Values
Colors

Specifying RGB Values
Colors
• Actually, there are four formats for providing RGB

values in CSS and the 6-Digit Hex RGB Color is just
one of them.

Specifying RGB Values
Colors
• Use the background-color property to apply a

background color to any element.

Opacity
Opacity
Colors
• The value for opacity is a number between 0

(completely transparent) and 1 (completely
opaque).
• A value of .5 gives the element an opacity of 50%.
• The opacity setting applies to the entire element—
both the foreground and the background (if one
has been set).

Opacity
Colors

Opacity
Colors
• You can also use the other color format RGB().

• The first three values in the parentheses are regular
old RGB values.
• The fourth value is the transparency level.

Opacity
Colors

08
Thinking Inside the BOX
Flow Layout
Normal Flow, or Flow Layout, is the way that Block
and Inline elements are displayed on a page before
any changes are made to their layout.
Flow Layout
Inline Elements
• In normal flow, inline elements display in the inline

direction, that is in the direction words are displayed
in a sentence according to the Writing Mode of the
document.

Flow Layout
Block Elements
• Block elements display one after the other, as

paragraphs do in the Writing Mode of that
document.

Flow Layout
• Therefore, inline elements display one after the

other, starting on the left, and block elements start
at the top and move down the page.

The Box Model
The Box Model
• In Websites, the browsers see every element on the

page (both block and inline) as being contained in
a little rectangular box.
• You can apply properties such as borders, margins,
padding, and backgrounds to these boxes, and
even reposition them on the page.

The Box Model
• Every element in a document generates a box to

which properties such as width, height, padding,
borders, and margins can be applied.

The Element Box
• Every element in a document, both block-level and

inline, generates a rectangular element box.

The Element Box

The Element Box
Content Area
• At the core of the element box is the content itself.

• This is the actual content of the element, such as
text, images, or nested elements.

The Element Box
Inner Edges
• The edges of the content area are referred to as the

inner edges of the element box.
• The edge of the content area would be invisible in
the actual webpage.

The Element Box
Padding
• The padding is the area held between the content

area and an optional border.
• The padding is the space between the content and
the element's border.
• It provides spacing and separation between the
content and the border.

The Element Box
Border
• The border is a line (or stylized line) that surrounds

the element and its padding.
• The border is a line or set of lines that surrounds the
element's padding and content.
• Borders are optional.

The Element Box
Margin
• The margin is an optional amount of space added

on the outside of the border.
• The margin is the space outside the element's
border.
• It creates space between the element and
neighboring elements on the page.

The Element Box
Margin
• The margin is an optional amount of space added

on the outside of the border.
• The margin is the space outside the element's
border.
• It creates space between the element and
neighboring elements on the page.

The Element Box
Outer Edge
• The outside edges of the margin area make up the

outer edges of the element box.
• This is the total area the element takes up on the
page, and it includes the width of the content area
plus the total amount of padding, border, and
margins applied to the element.
• The edge of the content area also would be invisible
in the actual webpage.

The Element Box
• Each of the padding, border and margin can be

styled individually using CSS properties to achieve
the desired appearance and spacing.

Box Dimensions
Box Dimensions
• The default value of an element box is auto.

• The width and height of a block element is
calculated automatically by the browser.

Box Dimensions
• It will be as wide as the browser window or other

containing block element, and as tall as necessary
to fit the content.
• However, you can use the width and height
properties to make the content area of an element
a specific width or height.

Box Dimensions
• You can only specify the width and height for block-
level elements and non-text inline elements.

Box Dimensions

Box Dimensions
content-box
• Before applying the properties to your style rules, you

must know exactly which part of the element box
you are sizing.
• The width and height values are applied to the
content box only.

Box Dimensions
content-box
• This means that the resulting size of the visible

element will be the dimensions you specify plus the
amount of padding and borders that have been
added to the element.

Box Dimensions
content-box

Box Dimensions
content-box
• Knowing the resulting size of your elements is critical

to getting layouts to behave predictably.

Box Dimensions
border-box
• This method applies the width and height values to

the border box, which includes the content,
padding, and border.
• With this method, the resulting visible element box,
including padding and borders, will be exactly the
dimensions you specify.

Box Dimensions
border-box

Box Dimensions
content-box vs border-box

Specifying height
• In general practice, it is less common to specify the

height of elements.
• It is more in keeping with the nature of the medium
to allow the height to be calculated automatically,
allowing the element box to change based on the
font size, user settings, or other factors.

Overflow
Overflow
• Used when an element is set to a size that is too

small for its contents to specify what to do with the
content that doesn’t fit.

Overflow

Overflow

Overflow
visible
• The default value is visible, which allows the content
to hang out over the element box so that it all can
be seen.
hidden
• When overflow is set to hidden, the content that
does not fit gets clipped off and does not appear
beyond the edges of the element’s content area.

Overflow
scroll
• When scroll is specified, scrollbars are added to the
element box to let users scroll through the content.
• Be aware that when you set the value to scroll, the
scrollbars will always be there, even if the content fits
in the specified height just fine.

Overflow
auto
• The auto value allows the browser to decide how to
handle overflow.
• In most cases, scrollbars are added only when the
content doesn’t fit and they are needed.

Padding
The space between the content area and the border (or
the place the border would be if one isn’t specified).
Padding

Padding
• The padding-top, padding-right, padding-bottom,

and padding-left properties specify an amount of
padding for each side of an element.

Padding

Padding

Padding
• Specify padding in any of the CSS length units (em

and px are the most common) or as a percentage
of the width of the parent element.

Padding
• For percentage values the parent’s width is used as

the basis, even for top and bottom padding.
• If the width of the parent element changes, so will
the padding values on all sides of the child element,
which makes percentage values somewhat tricky to
manage.

Padding
Shorthand
• As an alternative to setting padding one side at a

time, you can use the shorthand padding property
to add padding all around the element.
• You can specify four, three, two, or one value for a
single padding property.

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Padding
Shorthand

Border
Line drawn around the content area or padding (optional).
border-style
Border
• The style is the most important of the border

properties because, according to the CSS
specification, if there is no border style specified, the
border does not exist.

border-style
Border

border-style
Border

border-style
Border

border-width
Border

border-width
Border

border-color
Border

All in 1 Property
Border

Rounded Corners
Border
• Rounded corners allow you to create visually

appealing elements by giving them a curved or
rounded edge instead of sharp corners.
• This can add a softer and more modern look to your
web design.
• The border-radius property is used to control the
roundness of corners in CSS.

Rounded Corners
Border

Rounded Corners
Border
• To round off the corner of an element, simply apply

one of the border-radius properties, but keep in
mind that you will see the result only if the element
has a border or a different background color than
the background of the page.

Rounded Corners
Border

Rounded Corners
Border

Margin
An optional amount of space that you can add on
the outside of the border.
Margins keep elements from bumping into one

another or the edge of the browser window.
Margin

Margin
• You can either specify an amount of margin to

appear on each side of the element or use the
margin property to specify all sides at once.
• The shorthand margin property works the same as
the padding shorthand.

Margin Collapse
• The top and bottom margins of neighboring

elements collapse.
• This means that instead of accumulating, adjacent
margins overlap, and only the largest value will be
used.
• Collapse will only occur in Flow Layout, which is the
default layout mode.

No Margin Collapse
• The only time top and bottom margins don’t

collapse is for floated or absolutely positioned
elements.
• Margins on the left and right sides never collapse, so
they’re nice and predictable.

No Margin Collapse
• No margin collapse in Flex, Grid, or Positioned

Layout.
• Margin collapse can stack and create a domino
effect of siblings effecting each other.

Margin

Chapter 2 Cascading Style Sheets Fundamentals

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 Cascading Style Sheets Fundamentals

Uploaded by

Copyright:

Available Formats

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

Prepared by: Patrick Justin L. Ariado

• Used to define and customize the styles and layouts

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 3

• CSS describes how HTML elements are to be

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 4

• A style sheet is made up of one or more style

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 6

• The two main sections of a rule are the selector that

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 7

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 8

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 9

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 10

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 11

• Technically, the semicolon is not required after the

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 12

• There are 3 ways to include CSS to your HTML File.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 14

• The styles are written directly within the HTML tag,

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 16

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 17

• You can apply properties and values to a single

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 18

• The styles defined inside the <style> tags will apply to

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 20

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 21

• The <style> tags are placed within the <head>

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 22

• CSS rules are written in the style rule format, where

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 23

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 24

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 26

• The syntax for including an external CSS file in an

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 27

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 28

• The <link> tag is used to link the external CSS file to

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 29

• The type attribute specifies the MIME type of the

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 30

• The href attribute specifies the path or URL of the

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 31

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 32

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 33

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 34

• A programming interface for HTML and XML

• The DOM represents the HTML document as a tree

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 37

• Each element, attribute, and text in the HTML

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 38

• Nodes in the DOM have parent-child relationships

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 39

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 40

• It selects HTML elements based on their tag names.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 42

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 43

• Targets elements based on their class attribute. It

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 44

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 45

• Targets elements based on their ID attribute. It

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 46

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 47

• Targets elements based on their attribute values.