Lesson 6:

CSS
Part I

Romel Griego
Instructor I
Department of Industrial and Information Technology
 CSS

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are
to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once
• External stylesheets are stored in CSS
files
 CSS Solved a Big Problem

• HTML was NEVER intended to contain tags for

formatting a web page!

• HTML was created to describe the content of

a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 CSS Solved a Big Problem

• When tags like <font>, and color attributes

were added to the HTML 3.2 specification, it
started a nightmare for web developers.
Development of large websites, where fonts
and color information were added to every
single page, became a long and expensive
process.
 CSS Solved a Big Problem

• To solve this problem, the World Wide Web

Consortium (W3C) created CSS.

• CSS removed the style formatting from the

HTML page!

• The style definitions are normally saved in

external .css files.
CSS Syntax
CSS Syntax
 CSS Syntax

• The selector points to the HTML element you

want to style.

• The declaration block contains one or more

declarations separated by semicolons.

• Each declaration includes a CSS property

name and a value, separated by a colon.
 CSS Syntax

• Multiple CSS declarations are separated with

semicolons, and declaration blocks are
surrounded by curly braces.

p {
color: red;
text-align: center;
}
CSS Selectors
 CSS Selectors

CSS selectors are used to "find" (or select) the

HTML elements you want to style.

We can divide CSS selectors into five categories:

 CSS Selectors

1. Simple selectors (select elements based on name,

id, class)
2. Combinator selectors (select elements based on a
specific relationship between them)
3. Pseudo-class selectors (select elements based on a
certain state)
4. Pseudo-elements selectors (select and style a part
of an element)
5. Attribute selectors (select elements based on an
attribute or attribute value)
The CSS element Selector
 The CSS element Selector

The element selector selects HTML elements based on

the element name.

Here, all <p> elements on the page will be center-

aligned, with a red text color:

p {
text-align: center;
color: red;
}
The CSS id Selector
 The CSS id Selector

The id selector uses the id attribute of an HTML

element to select a specific element.

The id of an element is unique within a page, so the id

selector is used to select one unique element!

To select an element with a specific id, write a hash (#)

character, followed by the id of the element.
 The CSS id Selector

The CSS rule below will be applied to the HTML

element with id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector
 The CSS class Selector

The class selector selects HTML elements with a

specific class attribute.

To select elements with a specific class, write a period

(.) character, followed by the class name.

.center {
text-align: center;
color: red;
}
 The CSS class Selector

You can also specify that only specific HTML elements

should be affected by a class.

In this example only <p> elements with class="center"

will be red and center-aligned:

p.center {
text-align: center;
color: red;
}
 The CSS class Selector

In this example 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>
The CSS Universal Selector
 The CSS Universal Selector

The universal selector (*) selects all HTML elements on

the page.

The CSS rule below will affect every HTML element on

the page:

* {
text-align: center;
color: blue;
}
The CSS Grouping Selector
 The CSS Grouping Selector

The grouping selector selects all the HTML elements

with the same style definitions.

Look at the following CSS code (the h1, h2, and p

elements have the same style definitions):
 The CSS Grouping Selector

h1 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
 The CSS Grouping Selector

It will be better to group the selectors, to minimize the

code. To group selectors, separate each selector with a
comma.

In this example we have grouped the selectors from the

code above:

h1, h2, p {
text-align: center;
color: red;
}
 All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with
id="firstname"
.class .intro Selects all elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all
<p> elements
How To Add CSS
 Three Ways to Insert CSS

There are three ways of inserting a style

sheet:

• External CSS
• Internal CSS
• Inline CSS
1. External CSS
 1. External CSS

With an external style sheet, you can

change the look of an entire website by
changing just one file!

Each HTML page must include a reference

to the external style sheet file inside the
<link> element, inside the head section.
 1. External CSS

An external style sheet can be written in any text

editor, and must be saved with a .css extension.

The external .css file should not contain any

HTML tags.

Here is how the "mystyle.css" file looks:

1. External CSS: "mystyle.css"
2. Internal CSS
 2. Internal CSS

An internal style sheet may be used if one single

HTML page has a unique style.

The internal style is defined inside the <style>

element, inside the head section.

Internal styles are defined within the <style>

element, inside the <head> section of an HTML
page:
3. Inline CSS
 3. Inline CSS

An inline style may be used to apply a unique

style for a single element.

To use inline styles, add the style attribute to the

relevant element. The style attribute can contain
any CSS property.

Inline styles are defined within the "style"

attribute of the relevant element:
Multiple Style Sheets
 Multiple Style Sheets
Assume that an external style sheet has the following
style for the <h1> element:
h1 {
color: navy;
}

Then, assume that an internal style sheet also has the

following style for the <h1> element:
h1 {
color: orange;
}
 Multiple Style Sheets

If the internal style is defined after the link to the

external style sheet, the <h1> elements will be "orange"
Cascading Order
 Multiple Style Sheets
What style will be used when there is more than one
style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual"

style sheet by the following rules, where number one
has the highest priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head
section)
3. Browser default
CSS Comments
 CSS Comments
CSS comments are not displayed in the browser, but
they can help document your source code.

Comments are used to explain the code, and may help

when you edit the source code at a later date.

Comments are ignored by browsers.

/* */
 HTML and CSS Comments
From the HTML tutorial, you learned that you can add
comments to your HTML source by using the
<!--...--> syntax.

In the following example, we use a combination of

HTML and CSS comments:
CSS Colors
 CSS Colors
Colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.

CSS/HTML support 140 standard color names.

<h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
CSS Backgrounds
 CSS Backgrounds
The CSS background properties are used to add
background effects for elements.

In these chapters, you will learn about the following

CSS background properties:
 CSS Backgrounds
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• Background (shorthand property)

body {
background-color: lightblue;
}
Opacity / Transparency
 Opacity / Transparency

The opacity property specifies the

opacity/transparency of an element. It can take a
value from 0.0 - 1.0. The lower value, the more
transparent:
 Opacity / Transparency
div {
background-color: green;
opacity: 0.3;
}

Transparency using RGBA

div {
background: rgba(0, 128, 0, 0.3) /* Green
background with 30% opacity */
}
CSS Borders
 CSS Borders
The CSS border properties allow you to specify the
style, width, and color of an element's border.

The border-style property specifies what kind of

border to display.

The following values are allowed:

 CSS Borders
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect
depends on the border-color value
• ridge - Defines a 3D ridged border. The effect
depends on the border-color value
 CSS Borders
• inset - Defines a 3D inset border. The effect
depends on the border-color value
• outset - Defines a 3D outset border. The effect
depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to

four values (for the top border, right border, bottom
border, and the left border).
CSS Margins
 CSS Margins
Margins are used to create space around elements,
outside of any defined borders.

The CSS margin properties are used to create space

around elements, outside of any defined borders.

With CSS, you have full control over the margins.

There are properties for setting the margin for each
side of an element (top, right, bottom, and left).
 Margin - Individual Sides
CSS has properties for specifying the margin for
each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left
 Margin - Individual Sides
All the margin properties can have the following
values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the
containing element
• inherit - specifies that the margin should be
inherited from the parent element

Tip: Negative values are allowed.

 Margin - Shorthand Property
To shorten the code, it is possible to specify all the
margin properties in one property.

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
 Margin - Shorthand Property
margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

margin: 25px 50px;

• op and bottom margins are 25px
• right and left margins are 50px
 Margin - Shorthand Property
margin: 25px;
• all four margins are 25px
 The auto Value
• You can set the margin property to auto to
horizontally center the element within its container.
• The element will then take up the specified width,
and the remaining space will be split equally
between the left and right margins.

div {
width: 300px;
margin: auto;
border: 1px solid red;
}
 The inherit Value
This example lets the left margin of the <p class="ex1">
element be inherited from the parent element (<div>):

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}
CSS Padding
 CSS Padding
Padding is used to create space around an element's
content, inside of any defined borders.

The CSS padding properties are used to generate space

around an element's content, inside of any defined
borders.

With CSS, you have full control over the padding. There
are properties for setting the padding for each side of
an element (top, right, bottom, and left).
 Padding - Individual Sides
CSS has properties for specifying the padding for each
side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left
 Padding - Individual Sides
All the padding properties can have the following
values:

• length - specifies a padding in px, pt, cm, etc.

• % - specifies a padding in % of the width of the
containing element
• inherit - specifies that the padding should be
inherited from the parent element

Note: Negative values are not allowed.

 Padding - Individual Sides
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
 Padding - Shorthand Property
To shorten the code, it is possible to specify all the
padding properties in one property.

The padding property is a shorthand property for the

following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left
 Padding - Shorthand Property
padding: 25px 50px 75px 100px
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px

padding: 25px 50px 75px;

• top padding is 25px
• right and left paddings are 50px
• bottom padding is 75px
 Padding - Shorthand Property
padding: 25px 50px;
• top and bottom paddings are 25px
• right and left paddings are 50px

padding: 25px;
• all four paddings are 25px
CSS Height, Width and Max-width
 CSS Height, Width and Max-width

The CSS height and width properties are used

to set the height and width of an element.

The CSS max-width property is used to set the

maximum width of an element.
 CSS Setting height and width

• The height and width properties are used to

set the height and width of an element.

• The height and width properties do not

include padding, borders, or margins. It sets
the height/width of the area inside the
padding, border, and margin of the element.
 CSS height and width Values
The height and width properties may have the
following values:
• auto - This is default. The browser calculates the
height and width
• length - Defines the height/width in px, cm, etc.
• % - Defines the height/width in percent of the
containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its
parent value
 Setting max-width
The max-width property is used to set the maximum
width of an element.

The max-width can be specified in length values, like

px, cm, etc., or in percent (%) of the containing block, or
set to none (this is default. Means that there is no
maximum width).
 Setting max-width
The problem with the <div> above occurs when the
browser window is smaller than the width of the
element (500px). The browser then adds a horizontal
scrollbar to the page.

In this situation, using max-width will improve the

browser's handling of small windows.
The CSS Box Model
 The CSS Box Model
In CSS, the term "box model" is used when talking
about design and layout.

The CSS box model is essentially a box that wraps

around every HTML element. It consists of: content,
padding, borders and margins. The image below
illustrates the box model:
 Explanation of the different parts:
• Content - The content of the box, where text and
images appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The
margin is transparent
The box model allows us to add a border around
elements, and to define space between elements.
 Width and Height of an Element
In order to set the width and height of an element
correctly in all browsers, you need to know how the box
model works.

Important: When you set the width and height

properties of an element with CSS, you just set the
width and height of the content area. To calculate the
total width and height of an element, you must also
include the padding and borders.
 Width and Height of an Element
Example:
This <div> element will have a total width of 350px and
a total height of 80px:

div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
 Here is the calculation:
320px (width of content area)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
= 350px (total width)

50px (height of content area)

+ 20px (top padding + bottom padding)
+ 10px (top border + bottom border)
= 80px (total height)
 Here is the calculation:
The total width of an element should be calculated like
this:

Total element width = width + left padding + right

padding + left border + right border

The total height of an element should be calculated

like this:

Total element height = height + top padding + bottom

padding + top border + bottom border
CSS Outline
 CSS Outline
• An outline is a line drawn outside the element's
border.
• An outline is a line that is drawn around elements,
OUTSIDE the borders, to make the element "stand
out".
 CSS Outline

CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline
 CSS Outline Style

The outline-style property specifies the style of

the outline, and can have one of the following
values:
• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline
 CSS Outline Style

• ridge - Defines a 3D ridged outline

• inset - Defines a 3D inset outline
• outset - Defines a 3D outset outline
• none - Defines no outline
• hidden - Defines a hidden outline
CSS Text
 CSS Text

The color property is used to set the color of the

text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

The default text color for a page is defined in the

body selector.
 CSS Text

body {
color: blue;
}

h1 {
color: green;
}
 Text Color and Background Color
In this example, we define both the background-
color property and the color property:
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}
CSS Fonts
 Font Selection is Important
• Choosing the right font has a huge impact on how
the readers experience a website.

• The right font can create a strong identity for your

brand.

• Using a font that is easy to read is important. The

font adds value to your text. It is also important to
choose the correct color and text size for the font.
 Generic Font Families
In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of
each letter. They create a sense of formality and
elegance.
• Sans-serif fonts have clean lines (no small
strokes attached). They create a modern and
minimalistic look.
• Monospace fonts - here all the letters have the
same fixed width. They create a mechanical look.
 Generic Font Families
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the

generic font families.
Difference Between Serif and
Sans-serif Fonts
 The CSS font-family Property
• In CSS, we use the font-family property to specify
the font of a text.
• If the font name is more than one word, it must
be in quotation marks, like: "Times New Roman".
• The font-family property should hold several font
names as a "fallback" system, to ensure
maximum compatibility between
browsers/operating systems.
 The CSS font-family Property
• Start with the font you want, and end with a
generic family (to let the browser pick a similar
font in the generic family, if no other fonts are
available). The font names should be separated
with a comma.

.p1 {
font-family: "Times New Roman", Times,
serif;
}
CSS Icons
 How To Add Icons

• The simplest way to add an icon to your HTML page,

is with an icon library, such as Font Awesome.
• Add the name of the specified icon class to any
inline HTML element (like <i> or <span>).
• All the icons in the icon libraries below, are scalable
vectors that can be customized with CSS (size, color,
shadow, etc.)
 Font Awesome Icons
To use the Font Awesome icons, go
to fontawesome.com, sign in, and get a code to add in
the <head> section of your HTML page:
<script
src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>

Note: No downloading or installation is required!

 Bootstrap Icons
To use the Bootstrap glyphicons, add the following line
inside the <head> section of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.
3.7/css/bootstrap.min.css">

Note: No downloading or installation is required!

 Google Icons
To use the Google icons, add the following line inside
the <head> section of your HTML page:
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Mat
erial+Icons">

Note: No downloading or installation is required!

CSS Links
 CSS Links

Links can be styled with any CSS property

(e.g. color, font-family, background, etc.).

a {
color: hotpink;
}
 CSS Links

In addition, links can be styled differently

depending on what state they are in.

The four links states are:

1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked
 CSS Links

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}
 CSS Links

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
 CSS Links

When setting the style for several link states,

there are some order rules:

• a:hover MUST come after a:link and a:visited

• a:active MUST come after a:hover
 Text Decoration

The text-decoration property is mostly used to

remove underlines from links:

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}
 Text Decoration

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
 Different types of cursors
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
 Different types of cursors
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>
CSS Lists
CSS Lists
 HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are

marked with bullets

• ordered lists (<ol>) - the list items are marked

with numbers or letters
 HTML Lists and CSS List Properties

The CSS list properties allow you to:

• Set different list item markers for ordered lists

• Set different list item markers for unordered
lists
• Set an image as the list item marker
• Add background colors to lists and list items
 Different List Item Markers

The list-style-type property specifies the type of

list item marker.

The following example shows some of the

available list item markers:

ul.a {
list-style-type: circle;
}
 Different List Item Markers

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
 An Image as The List Item Marker

The list-style-image property specifies an image

as the list item marker:

ul {
list-style-image: url('sqpurple.gif');
}
 Position The List Item Markers

The list-style-position property specifies the

position of the list-item markers (bullet points).

"list-style-position: outside;" means that the

bullet points will be outside the list item. The
start of each line of a list item will be aligned
vertically. This is default:
 Position The List Item Markers

"list-style-position: inside;" means that the bullet

points will be inside the list item. As it is part of
the list item, it will be part of the text and push
the text at the start:
Position The List Item Markers

outside inside
 Remove Default Settings

The list-style-type:none property can also be

used to remove the markers/bullets. Note that
the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to
<ul> or <ol>
THANK YOU
FOR JOINING
TODAY'S CLASS.
Romel Griego
Instructor I
Department of Industrial and Information Technology
[email protected]