Scribd
Upload
2 views

CSS-compressed (1)

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling HTML documents and the different types of CSS (inline, internal, and external). It explains CSS syntax, commonly used properties, the box model, and various CSS selectors. The learning objectives include understanding how CSS works, modifying HTML webpages, and organizing content using CSS positional properties.

Uploaded by

joresapabalate65
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS-compressed (1)

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling HTML documents and the different types of CSS (inline, internal, and external). It explains CSS syntax, commonly used properties, the box model, and various CSS selectors. The learning objectives include understanding how CSS works, modifying HTML webpages, and organizing content using CSS positional properties.

Uploaded by

joresapabalate65
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

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.

You might also like