Scribd
Upload
9 views

ITP102 WEEK 8 to 9 Introductio to CSS

This document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose, benefits, and syntax. It covers different types of CSS selectors and methods for adding CSS to HTML documents, including inline, internal, and external CSS. The document aims to equip learners with the ability to define CSS, compare selectors, and create a simple web page using CSS.

Uploaded by

Joshua Madera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

ITP102 WEEK 8 to 9 Introductio to CSS

This document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose, benefits, and syntax. It covers different types of CSS selectors and methods for adding CSS to HTML documents, including inline, internal, and external CSS. The document aims to equip learners with the ability to define CSS, compare selectors, and create a simple web page using CSS.

Uploaded by

Joshua Madera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Week 7 & 8

Introduction to
Cascading Style Sheets (CSS)

Prepared by:
ITP102 Faculty
At the end of the lesson, the learner
will be able to:
• Define Cascading Style Sheets;
• Compare and contrast the different CSS selectors;
and
• Create a simple web page using CSS.
What is 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.
(w3schools.com)
Why use CSS?
CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices and
screen sizes.

HTML was NEVER intended to contain tags


for formatting a web page.

CSS removed the style formatting from the


HTML page.
Benefits of CSS
 Solves a big problem
 Saves a lot of time
 Provide more attributes
CCS Syntax
A CSS rule consists of a selector and a
declaration block.

CSS Syntax:
CCS Syntax (continuation)

where:
 Selector: Selector indicates the HTML
element you want to style. It could be any
tag like <h1>, <title> etc.
 Declaration Block: The declaration
block can contain one or more
declarations separated by a semicolon.
Each declaration contains a property
name and value, separated by a colon.
CCS Syntax (continuation)

 Property: A Property is a type of


attribute of HTML element. It could be
color, border etc.
 Value: Values are assigned to CSS
properties.
Example:

 p is a selector in CSS (it points to the


HTML element you want to style: <p>).
 color is a property, and red is the
property value
 text-align is a property, and center is
the property value
CSS Selector
CSS selectors are used to select the
content you want to style. Selectors are the
part of CSS rule set. CSS selectors select
HTML elements according to its id, class,
type, attribute etc. (javatpoint.com)
Different types of CSS Selectors
 CSS Element Selector
 The element selector selects the HTML element
based on the element name. (select elements
based on name, id, class)
Different types of CSS Selectors
(continuation)
 CSS Id Selector
 The id selector selects the id attribute of
an HTML element to select a specific
element. An id is always unique within
the page so it is chosen to select a single,
unique element.
 It is written with the hash character (#),
followed by the id of the element.
Different types of CSS Selectors
(continuation)
 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.
Different types of CSS Selectors
(continuation)
 CSS Universal Selector
 The universal selector is used as a
wildcard character (*). It selects all the
elements on the pages.
Different types of CSS Selectors
(continuation)
 CSS Group Selector
 The grouping selector is used to select all
the elements with the same style
definitions.
 Grouping selector is used to minimize the
code. Commas are used to separate each
selector in grouping.
Different types of CSS Selectors
(continuation)
 CSS Group Selector (continuation)
All CSS Selectors
Selector Example Example Description
#id #firstnam Selects the element with
e id="firstname"
.class .intro Selects all elements with
class="intro"
element.class p.intro Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element, div, p Selects all <div> elements and
element all <p> elements
Video Tutorial
https://www.youtube.com/watch?
v=ZNskBxLVOfs&list=PLP9IO4UYNF0UCaUSF
3XNZ1U9f01E5h5PM
How to add CSS
CSS is added to HTML pages to format the
document according to information in the
style sheet. There are three ways to insert
CSS in HTML documents:
 Inline CSS
 Internal CSS
 External CSS (javatpoint.com)
Inline CSS
Inline CSS is used to apply CSS on a single
line or element.
Internal CSS
Internal CSS is used to
apply CSS on a single
document or page. It can
affect all the elements of
the page. It is written
inside the style tag
within head section of
html.
External CSS
External CSS is used to apply CSS on
multiple pages or all pages. Here, we write all
the CSS code in a css file. Its extension must
be .css for example style.css.
References:
 https://www.w3schools.com/css/
 https://www.tutorialspoint.com/css/index.ht
m
 https://www.javatpoint.com/css-tutorial
Thank
you!

You might also like