Scribd
Upload
61 views

Chap 03 - Cascading Style Sheet (CSS)

This document provides an overview of CSS (Cascading Style Sheets) and responsive design. It discusses introducing CSS and the three ways to write CSS code. It also covers adding style with CSS selectors, properties, and values. The document details different types of CSS selectors like element, class, and ID selectors. It describes grouping selectors and CSS measurement units. It summarizes CSS links, multiple columns, responsive design, viewports, and media queries for creating responsive layouts across different screen sizes.

Uploaded by

Ain Najihah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views

Chap 03 - Cascading Style Sheet (CSS)

This document provides an overview of CSS (Cascading Style Sheets) and responsive design. It discusses introducing CSS and the three ways to write CSS code. It also covers adding style with CSS selectors, properties, and values. The document details different types of CSS selectors like element, class, and ID selectors. It describes grouping selectors and CSS measurement units. It summarizes CSS links, multiple columns, responsive design, viewports, and media queries for creating responsive layouts across different screen sizes.

Uploaded by

Ain Najihah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

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

You might also like