CHAPTER 3:
Cascading Style
Sheet (CSS)
Prepared for:
CSC264 – Introduction to Web and
Mobile Application
OVERVIEW OF THIS CHAPTER
In this chapter, you will learn
about:
Introduction to CSS
Adding style with CSS
Responsive Design with CSS
Media Queries
Grid View
INTRODUCTION TO CSS
What is the purpose of a
CSS? Untuk cantikkan
Is used to present the web pages with
colors, layout, and fonts to the
users.
Why used it?
Advantages of CSS:
saves time, pages load faster, easy
maintenance,
multiple device compatibility.
INTRODUCTION TO CSS
Three (3) ways to write CSS :
1) Inline CSS : In line
<p style=“color:red; font-size:20px;”> Write it in start tag of the
This is a paragraph. HTML elements
</p>
2) Internal CSS
:
<head>
<style>
p{ Write it in head of the web
c page
o
l
}o <body>
</style>r <p> This is a paragraph. </p>
</head> : </body>
r
e
INTRODUCTION TO CSS
Three (3) ways to write CSS :
3) External CSS :
<head>
<link rel=“ stylesheet ” type=“text/css”
href=“mystyle.css”>
</head>
1. We used external CSS from CSS file created
outside of the web page
2. To used it inside the HTML file, we need to link it
using
link tag
3. Need to save the CSS file as .css extension
ADDING STYLE WITH CSS
CSS comprises of three parts :
Selector: is an HTML tag at which a style will be applied.
Property: is a type of attribute of HTML tag.
Value: assigned to properties.
selector {
property:value;
}
Html element
selector table {
border:1px solid black;
}
property value
TYPES OF SELECTORS
The HTML Element selector:
The syntax for the selector (e.g. <h1>, <table>, <p>,
etc.) :
h1 {
color:#32a8a4;
font-size:30px;
}
Browser
HTML file
CSS file
TYPES OF SELECTORS
The Class selector:
The syntax for the
selector :
.className {
property:value;
}
Browser
Must write class on
the
HTML file
HTML file
CSS file
TYPES OF SELECTORS
The ID selector:
The syntax for the
selector :
#IDName {
property:value;
}
Browser
Must write ID on
HTML file the HTML
file
CSS file
GROUPING SELECTORS
Apply style to multiple selectors:
Must put comma to separate the multiple
selectors.
For HTML h1, h2, h3 {
elements : property:value;
}
For .class1, .class2, .class3 {
property:value;
class : }
For ID #IDName1, #IDName2, #IDName3 {
property:value;
: }
GROUPING SELECTORS
Example of ID and class grouping selectors:
Browser
HTML file
CSS file
CSS MEASUREMENT UNITS
Measurement units that supported by CSS:
Unit Description Example
Defines a measurement as a percentage relative to p {
% another value, typically an enclosing element. line-height: 125%;
}
div {
cm Defines a measurement in centimeters. margin-bottom: 2cm;
}
A relative measurement for the height of a p {
em font in em spaces. (1em = 12pt; thus, 2em letter-spacing: 7em;
}
would be 24pt).
p {
in Defines a measurement in inches. word-spacing: 0.15in;
}
Defines a measurement in points. A point is body {
pt defined as 1/72nd of an inch. font-size: 18pt;
}
p {
px Defines a measurement in screen pixels. padding: 25px;
}
CSS LINKS
Set different properties to the hyperlink using CSS:
Below is the properties that can be added to the
hyperlink :
Style Description
:link Signifies unvisited hyperlinks
:visited Signifies visited hyperlinks
Signifies an element that currently has the
:hover
user’s mouse pointer hovering over it
:active Signifies an element on which the user is
currently clicking
CSS LINKS
Set different properties to the hyperlink using CSS:
This link will change color when
click
and when mouse hover it
MULTIPLE-COLUMN
The CSS multiple-column layout:
Allow easy definition of multiple columns of text (just like in
newspapers:
Example:
Multiple
-
column
MULTIPLE-COLUMN
The Multiple-column properties:
Style Description
Specifies the number of columns an
column-count
element should be divided into
column-gap Specifies the gap between columns
column-width Specifies the width of each columns
column-rule-style
Specifies the style of the rule (line)
between
columns
column-rule-width
Specifies the width of the rule (line)
between
columns
column-rule-color Specifies the color of the rule (line)
between columns
MULTIPLE-COLUMN
HTM L file
CSS file
Browser
RESPONSIVE DESIGN
Why used
RESPONSIVE DESIGN CSS?
Creating web sites which automatically
adjust themselves to look good on
all devices
There are many devices (phones, tablets,
laptops,
desktops, giant TV screens)
There are many delivery
applications/browser (Firefox, Chrome,
Safari, IE, Opera, Edge)
Orientation : vertical or horizontal?
THE VIEWPORT
The viewport is the user’s visible area of a web page
The viewport varies with the device, and will be smaller on
a mobile phone than on a computer screen
The web page will be automatically fit to the screen pf any
devices with the help of <meta> tag
The general format for <meta> tag :
<meta name="viewport" content="width=device-width;
initial-scale=1.0;">
• The <meta> viewport element gives the browser
instructions on how to control the page’s dimensions and
scaling
• The width=device-width part sets the width of the page to follow
the screen-width of the device (will vary depending on the
devices)
• The initial-scale=1.0 part sets the initial zoom level when the
page is
first loaded by the browser
THE VIEWPORT
<meta> tag must be put in the
head
of the web page
MEDIA QUERIES
Using media queries in CSS:
Media query is used to create different layouts depending on the
size of the viewport (the screen of the devices)
Each devices have different viewport (screen sizes, e.g. width),
which is shown below:
Large HD Desktop / TV
Screen Normal Desktop Tablets Smart
phones
MEDIA QUERIES
Media queries basics:
The simplest media query syntax looks
like this:
@media media-type and (media-feature-rule){ CSS
rules/coding put here
}
• The media-type tells the browser what kind of
media this code is for (e.g. print, or screen)
• The media-feature-rule is the target of the devices
(usually used screen sizes) that the CSS coding
will be applied to (e.g. width:600px)
• The CSS rules is the style for any HTML
elements in
the webpage (e.g. color:black; font-size:10px;)
MEDIA QUERIES
Media Types:
Have four (4) types
which are:
Media Types Description
all Suitable for all devices
Intended for paged material and documents
print
(presentation of the content for print) viewed
on a screen in print preview mode.
screen Intended primarily for screens
speech Intended for speech synthesizers
MEDIA QUERIES
Media Feature rules:
Target a media feature with a rule
Two (2) features can be used in this media
queries :
Width and Height (used min- or max-)
@media screen and (max-width:600px){ body{
color:blue;
}
}
Orientation (used landscape or
portrait)
@media (orientation:landscape){ body{
color:purple;
}
}
HTML file
MEDIA QUERIES
CSS file
Browser
Mobile Phone
s
GRID VIEW
What is
GRID-VIEW?
Many web pages are based on a grid-view,
which means that the page is divided
into columns
GRID VIEW
Using grid-view in CSS:
It is very helpful when designing web pages and makes it
easier to place HTML elements on the page
A responsive grid-view often has 12 columns, and has a total
width of 100% and will shrink or expand as you resize the
browser window
• Example :
GRID VIEW
Ensure all
HTML
elements have
the box-sizing
property set
Example (using 2 columns): to border-box.
HTML file
Browser
CSS file
GRID VIEW
Define grid-view by screens :
To define responsive grid-view for any devices, need to use 12
columns to have more control over the web page.
1) Need to calculate the percentage for
one column : 100 % / 12 columns =
8.33%
2) Make one class for each of the 12 columns, class=“col-” and a
number defining how many columns the section should span:
GRID VIEW
Example of grid-view by
screens :
CSS file
HTML file
For
desktop
For mobile
phone
GRID VIEW
Example of grid-view by
screens :
Desktop
Mobile Phone
GRID VIEW
Example of grid-view by screens :
The size of the picture depend on the
columns and screen sizes of the
devices
