STI West Negros University
FUNDAMENTALS OF
CSS
Prepared by:
Klent John J.
LEARNING OBJECTIVES
CO1 CO2
Elaborate on how CSS works Modify an HTML webpage using
within the HTML document various CSS properties
LEARNING OBJECTIVES
CO3
Organize an HTML webpage using
CSS positional properties
WHAT IS CSS?
INTRODUCTION
HTML provides the structure
while CSS supplies the style.
HTML + CSS HTML
CSS
Cascading Style Sheet
Let Breakdown Cascading Style Sheet
CASCADING
Ordered Application of
styles in the browser
STYLE SHEET
A collection of style codes.
CSS SYNTAX
OPENING CURLY BRACES
SELECTOR p{ VALUE
font-size: 30px;
} PROPERTY
CLOSING CURLY BRACES
CSS SYNTAX
p{
font-size: 30px;
color: red;
}
STI West Negros University
03
SEATWORK 1
Prepared by:
Klent John J.
3 TYPES OF CSS
INLINE
INTERNAL EXTERNAL
PRIORITIZATION
INLINE
INTERNAL
EXTERNAL
INLINE CSS
style direct to the HTML Element.
<p style="color: red">This is a paragraph.</p>
INTERNAL CSS
refers to when the CSS ruleset is
inside the HTML Document.
INTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
EXTERNAL CSS
refers to when the CSS ruleset is on
a separate .css file
EXTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html> style.css - separate file
p{
color: red;
}
HOW TO USE ID
OR CLASS
ATTRIBUTE FOR
CSS.
CALLING AN HTML ELEMENT USING ID
SYMBOL: #
CALLING AN HTML ELEMENT USING CLASS
SYMBOL: .
HTML ELEMENT
CSS
COMMONLY USED
CSS PROPERTIES
BACKGROUND-COLOR
Syntax:
background-color: color;
Example:
background-color: red;
background-color: blue;
CSS FOR BACKGROUND
background (shorthand property)
background-color
background-image
background-repeat
background-attachment
background-position
CSS FOR FONTS (FONT-FAMILY)
Generic Text Font Family: Serif, San-Serif, Monospace, Cursive, Fantasy
Difference between Serif and San-Serif
SYNTAX:
CSS FOR FONTS (FONT-STYLE)
Use to style the text: normal, italic or oblique
SYNTAX:
CSS FOR FONTS (FONT-WEIGHT)
property specifies the weight of a font: normal or bold
SYNTAX:
THE BOX MODEL
- REFERS TO HOW CSS SEES EVERY HTML ELEMENT AS IF IT IS IN ITS OWN BOX.
BORDER
border
border-left
border-right
border-top
border-bottom
BORDER-STYLE
dotted
solid
dashed
double
groove
ridge
inset
outset
BORDER-RADIUS
top-left
top-right
bottom-left
bottom-right
MARGIN
margin
margin-left
margin-right
margin-top
margin-bottom
PADDING
padding
padding-left
padding-right
padding-top
padding-bottom
STI West Negros University
DIFFERENT CSS
SELECTORS
Prepared by:
Klent John J.
CSS SELECTORS
Element or Tag Selector
ID Selector
Class Selector
Attribute Selector
Pseudo-Class Selector
ELEMENT OR TAG SELECTOR
Target all elements of a specific type
USAGE:
CLASS SELECTOR
Targets element with a specific class
USAGE:
ID SELECTOR
Target a specific element with a unique ID
USAGE:
ATTRIBUTE SELECTOR
Targets element with a specific attribute
USAGE:
PSEUDO-CLASS SELECTOR
Target a specific element in a specific state
USAGE:
STI West Negros University
THANK YOU
Klent John J.
