Cascading Style

Sheets
(CSS )
“Add style to your web pages”
ITEINC ENDTERM-Learning Topic3 by: Marites D. Manganti, MSCS CHMSC - College of Computer Studies
 CSS Definition
Course Contents CSS Advantages

CSS Syntax

Types of Selectors

Multiple Style Rules

Grouping Selectors

Inserting CSS

The Box Model

ITEINC ENDTERM MDM
 Course Objectives:
Definition of CSS
The students will be able to:
 Demonstrate understanding in the Basic
of CSS and its functionality and
application.
 Identify and familiarize the Syntax in
writing HTML and CSS Source Code.
 Create a different Webpage which
applies the styles: Inline, Internal, and
External Style CSS
ITEINC ENDTERM MDM
Prerequisites and Requirements
You should be familiar with:

Basic word processing and using of any text

editor/HTML and CSS Editor
How to create directories and files.
How to navigate through different directories.
Internet browsing using popular browsers like
Internet Explorer, Google Chrome or Firefox.
Developing simple Web Pages using HTML or
XHTML.
ITEINC ENDTERM MDM
 CSS Definition
Definition of CSS
 CSS stands for Cascading Style Sheets
 Styles - define how to display HTML elements
 Styles are normally stored in Style Sheets
Definition:
 Cascading Style Sheets (CSS) – is a style sheet language used for describing the
look and formatting of a document written in a markup language used in the
web.
 CSS is a simple design language intended to simplify the process of making web
pages presentable.
 CSS handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
layout designs, variations in display for different devices and screen sizes as
well as a variety of other effects.
 CSS specifications are maintained by the World Wide Web Consortium (W3C)
ITEINC ENDTERM MDM
 CSS Advantages
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
6
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want. Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website can
be presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.
ITEINC ENDTERM MDM
CSS SYNTAX
A style rule is made of 5 parts:
1. Selector- A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc. / Customized variable
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.
4. Declaration - example is “ selector { property: value } “
5. Declaration Block – example is “ h1 { color: #36C; font-
weight: normal; letter-spacing: .4em; } “
ITEINC ENDTERM MDM
CSS SYNTAX

ITEINC ENDTERM MDM

Types of Selectors
The Universal Selectors
Rather than selecting elements of a specific type, the universal
selector quite simply matches the name of any element type −
• { color: #000000; }

This rule renders the content of every element in our document in

black.
The Descendant Selectors
Suppose you want to apply a style rule to a particular element only
when it lies inside a particular element. As given in the following
example, style rule will apply to <em> element only when it lies
inside <ul> tag.
ul em { color: #000000; }
ITEINC ENDTERM MDM
Types of Selectors
The Class Selectors
You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.
.black { color: #000000; }
This rule renders the content in black for every element with class attribute set
to black in our document. You can make it a bit more particular. For example −
h1.black { color: #000000; }
This rule renders the content in black for only <h1> elements with class attribute
set to black. You can apply more than one class selectors to given element.
Consider the following example −
<p class = "center bold"> This paragraph will be styled by the classes
center and bold. </p>
ITEINC ENDTERM MDM
 Types of Selectors
Class Selector
The class selector is used to specify a style for a group of elements. Unlike the
id selector,
the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same
class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-
aligned:

.center {text-align:center;} <h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

p.center {text-align:left;} <p class="left">Center-aligned paragraph.</p>

*Do NOT start a Class name with a number!

ITEINC ENDTERM MDM
Types of Selectors
The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.
#black { color: #000000; }
This rule renders the content in black for every element with id attribute set
to black in our document. You can make it a bit more particular. For example
−This rule renders the content in black for only <h1> elements
with id attribute set to black.
h1#black { color: #000000; }
The true power of id selectors is when they are used as the foundation for
descendant selectors, For example −
#black h2 { color: #000000; }
In this example all level 2 headings will be displayed in black color when
those headings will lie with in tags having id attribute set to black.
ITEINC ENDTERM MDM
 Types of Selectors
Sample of ID Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with id="wrapper":
#wrapper For example, to identify a
{
text-align:center; paragraph as “head”, use
border:1px solid red; the code:
Width: 200px;
Height: 100px <div id=“wrapper”>… </div>
}

*Do NOT start an ID name with a number!

ITEINC ENDTERM MDM
Types of Selectors
The Child Selectors
You have seen the descendant selectors. There is one more type of
selector, which is very similar to descendants but have different
functionality. Consider the following example −
body > p { color: #000000; }
This rule will render all the paragraphs in black if they are direct child
of <body> element. Other paragraphs put inside other elements like
<div> or <td> would not have any effect of this rule.
The Attribute Selectors
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all the input elements having a type
attribute with a value of text −
input[type = "text"] { color: #000000; }
ITEINC ENDTERM MDM
Property & Value
The property is the style attribute you want to
change. Each property has a value:

 Properties are separated from their respective

values by colons :
 Pairs are separated from each other by
semicolons ;
ITEINC ENDTERM MDM
Declaration & Declaration Block
Definition: Each CSS line that includes property and value
 Each declaration consists of a property and a value
 Each declaration Block consists of Multiple Style Rules

ITEINC ENDTERM MDM

Multiple Style Rules
You may need to define multiple style rules for a single
element. You can define these rules to combine multiple
properties and corresponding values into a single block as
defined in the following example −
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon
(;). You can keep them in a single line or multiple lines. For better
readability, we keep them in separate lines.
ITEINC ENDTERM MDM
Grouping Selectors
You can apply a style to many selectors if you like. Just separate
the selectors with a comma, as given in the following example −
h1, h2, h3 { you can combine the various id selectors
together as shown below −
color: #36C; #content, #footer,
font-weight: normal; #supplement {
letter-spacing: .4em; position: absolute;
margin-bottom: 1em; left: 510px;
text-transform: lowercase; width: 200px; }
}

This define style rule will be applicable to h1, h2 and h3 element

as well. The order of the list is irrelevant. All the elements in the
selector will have the corresponding declarations applied to them.
ITEINC ENDTERM MDM
 Ways of Inserting CSS
There are three ways to associate/inserting styles with your HTML
document.
1. Inline Style
2. Internal Style
3. External Style
--Most commonly used methods are inline CSS and External CSS.
CSS Rules Overriding
Here is the rule to override any Style Sheet Rule.
1. Any inline style sheet takes highest priority. So, it will override any rule defined in internal
<style>...</style> tags or rules defined in any external style sheet file.
2. Any rule defined in internal style sheet <style>...</style> tags will override rules defined in any
external style sheet file.
3. Any rule defined in external style sheet file takes the 2nd lowest priority, and rules defined in this file
will be applied only when above two rules are not applicable.
4. The Lowest Priority is the Browser default, without styles, whatever styles that the browser have, it will
be applicable to the page design
ITEINC ENDTERM MDM
 Ways of Inserting CSS- Inline CSS - The style Attribute
An Inline CSS is used to apply a unique style to a single HTML element. An inline CSS
uses the style attribute of an HTML element. Here is the generic syntax:
<element style = "...style rules...."> Attributes associated with style rules in Inline Style
Example HTML Code – Inline Style Sheet Attribute Value Description
<!DOCTYPE html> style style rules The value of style attribute is a combination of
<html> style declarations separated by semicolon (;).
<head> <title> This is my First CSS Code - Inline Style </title>
</head>
<!--this part is the content of the HTML document where the style is inserted inside the selectors or tags used -Inline style
sheet -->
<body style="background-color: tomato;">
<!-- this style applies a tomato color to your HTML body background. -->
<h1 style="color: blue; margin-left: 40px;"> This is a heading. </h1> Let’s Try
<!-- this style applies a blue color to your heading1 <h1> tag. --> this Code!
<p style="color: green; font-size: 20px;"> This is a paragraph. </p>
<!-- this style applies a green color to your paragraph <p> tag. -->
</body>
</html>
ITEINC ENDTERM MDM
 CSS EXERCISE1:
Inline Style Sheet Activity
Create a customized webpage using the data in
your Resume Activity. Apply basic styles in CSS
using Inline Style and include pictures with
applied styles in CSS. You are allowed to use any
of the style/properties in CSS. Templates are not
allowed. Be creative!
Save it in your folder in google drive link that I have provided with
[CSSActivity1-LastnameFname-InlineStyle.html]

We can do
this!
ITEINC ENDTERM MDM
 Ways of Inserting CSS- Internal Style or
Embedded CSS - The <style> Element

An Internal CSS is used to define a style for a single HTML

page. An internal CSS is defined in the <head> section of an HTML
page, within a <style> element.. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be
applied to all the elements available in the document.
Attributes associated with <style> elements are −
Attribute Value Description
type text/css Specifies the style sheet language as a
content-type (MIME type). This is
required attribute.
media Screen, tty Tv, projection Specifies the device the document
Handheld, print will be displayed on. Default value
Braille, aural, all is all. This is an optional attribute.
ITEINC ENDTERM MDM
 Ways of Inserting CSS- Internal Style or
Embedded CSS - The <style> Element
Example HTML Code – Internal Style Sheet
<!DOCTYPE html> /*this style applies a blue color to your heading1 <h1> tag.*/
<html> }
<head> <title> This is my First CSS Code - Internal Style p { color: green;
</title> font-size: 20px;
<style type = "text/css" media = "all"> /*this style applies a green color to your
/* inside this Style Tag are the formatting design of your paragraph <p> tag.*/
HTML Body. */ }
/* inside a Forward Slash + Asterisk is a multiple line </style>
comment </head>
and closed with asterisk + Forward Slash */
body{ <!--this part is the content of the HTML document where the
background-color: tomato; style will be applied -->
/*this style applies a tomato color to your HTML <body> Let’s Try
body background.*/ <h1>This is a heading</h1> this Code!
} <p>This is a paragraph.</p>
h1 { color: blue; </body>
margin-left: 40px; </html>

ITEINC ENDTERM MDM

 CSS EXERCISE2:
Internal Style Sheet Activity
Create a customized webpage using your
Autobiography. Apply basic styles in CSS using
Internal Style Sheet and include pictures with
applied styles in CSS. You are allowed to use any
of the style/properties in CSS. Templates are not
allowed. Be creative!
Save it in your folder in google drive link that I have provided with
[CSSActivity2-LastnameFname-InternalStyle.html]

We can do
this!
ITEINC ENDTERM MDM
Ways of Inserting CSS - External Style CSS –
The <link> Element

The <link> element can be used to include an external stylesheet file in your
HTML document. An external style sheet is a separate text file
with .css extension. You define all the Style rules within this text file and then
you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file:
<head> <link href=“MyCSSStyle.css" rel="stylesheet"></head>
Attributes associated with <style> elements are:
Attribute Value Description

href Your saved .css file points to the location of the external style sheet

rel stylesheet must be set to "stylesheet" for linking style sheets

type text/css must be set to "text/css" for linking to cascading style sheets

ITEINC ENDTERM MDM

Ways of Inserting CSS - External Style CSS –
The <link> Element
Example HTML Code – External Style Sheet
/* this is an example external css. Save this as /* this is an example of an HTML File. Save this as
MyCSSStyle.css */ ExternalStyle.html */
/* ----------------------------------------------------------*/ /* ----------------------------------------------------------*/
body { <!DOCTYPE html>
background-color: powderblue; <html>
/*this style applies a powderblue color to your body <head> <title> This is my First CSS Code - External Style
tag.*/ </title>
} <link href="MyCSSStyle.css" rel="stylesheet"
h1, h2, h3 { type="text/css">
color: #36C; <!--this part is the link to your external style -->
font-weight: normal; </head>
letter-spacing: .4em;
margin-bottom: 1em; <!--this part is the content of the HTML document where
text-transform: lowercase; the external style will be applied -->
/*this style applies multiple styles/format to your h1, h2,& <body> Let’s Try
h3 tags.*/ <h1> This is heading1 </h1> this Code!
} <h2> This is heading2 </h2>
p { color: green; <h3> This is heading2 </h3>
font-size: 20px; <p>This is a paragraph.</p>
/*this style applies a green color to your paragraph <p> </body>
tag.*/ </html>
} ITEINC ENDTERM MDM
 CSS EXERCISE3:
External Style Sheet Activity
Create a customized webpage using your data in
your Resume activity. Apply basic styles in CSS
using External Style Sheet and Link your .css file
to your HTML document. You can make use of the
sample activity in html.You are allowed to use any
of the style/properties in CSS. Please
include pictures.Templates are not allowed.
Save it in your folder in google drive
link that I have provided with We can do
[CSSActivity3-LastnameFname-ExternalStyle.html]
[LastnameFname-MyCSSStyle.css] -no spacing in filename
this!
ITEINC ENDTERM MDM
 Course Objectives:
Definition of CSS
The students will be able to:
 Demonstrate understanding on the
application of design and layout using
the box model concept.
 Create webpages that apply the design
and layout

ITEINC ENDTERM MDM

Prerequisites and Requirements
You should be familiar with:

Basic of CSS- ways of inserting styles in a

webpage.
HTML Tags

ITEINC ENDTERM MDM

The Box Model
(CSS )
“Add style to your web pages”
ITEINC ENDTERM-Learning Topic3 by: Marites D. Manganti, MSCS CHMSC - College of Computer Studies
The CSS Box
Definition of Model
CSS
 All HTML elements can be considered as boxes. 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 : margins, borders, padding, and the
actual content.

ITEINC ENDTERM MDM

The CSS Box
Definition of Model
CSS
 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
ITEINC ENDTERM MDM
margin is transparent
The CSS Box
Definition of Model
CSS
 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
The box model allows us to add a border  Margin - Clears an area
around elements, and to define space between
elements.
outside the border. The
ITEINC ENDTERM MDM
margin is transparent
The CSS Box
Definition of Model
CSS
Width and Height of an Element Computation of the Box model:
 In order to set the width and height of an element 320px (width)+ (10px+10px)=20px
correctly in all browsers, you need to know how the box (left + right padding) + (5px
model works. +5px)=10px(left + right border)
 When you set the width and height properties of an + 0px (left + right margin)
element with CSS, you just set the width and height of the = 350px
content area. To calculate the full size of an element, you
must also add padding, borders and margins.
This <div> element will have a
total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
ITEINC ENDTERM MDM
CSS has properties for specifying the margin
for each side of an element:
Example shorthand
margin-top
margin-right property/values of 35
margin-bottom Margin
margin-left p{
margin-top: 100px;
All the margin properties can have the margin-bottom: 100px;
following values: margin-right: 150px;
margin-left: 80px;
 auto - the browser calculates the margin }
 length - specifies a margin in px, pt, cm,
p { margin: 25px 50px 75px 100px;}
etc. Top-Right-Bottom-Left
 % - specifies a margin in % of the width of P {margin: 25px 50px 75px; }
the containing element top margin is 25px
 inherit - specifies that the margin should right and left margins are 50px
bottom margin is 75px
be inherited from the parent element
ITEINC ENDTERM MDM
p { margin: 25px 50px; }
top and bottom margins are 25px
right and left margins are 50px
The padding property is a shorthand property for the
following individual padding properties:
padding-top 36
padding-right
padding-bottom
padding-left

So, here is how it works:

If the padding property has four values:
Example shorthand
padding: 10px 20px 30px 50px; property of padding.
top padding is 10px
right padding is 20px div {
bottom padding is 30px
left padding is 50px
padding: 10px 20px 30px 50px;
ITEINC ENDTERM MDM }
References:

Online Sources:
https://www.w3schools.com/css/default.asp
https://www.tutorialspoint.com/css/index.htm
https://www.webucator.com/how-to/how-
create-css-external-style-sheet.cfm
Css-tricks.com
Let’s learn
more!
ITEINC ENDTERM MDM
 Doumo arigatou gozaimasu!

Empowered!

ITEINC ENDTERM MDM