St.
Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CASCADING STYLE
SHEET PROPERTIES
Presented by Ma’am Yurie
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Learning Objectives
At the end of this lesson, you will be able to:
Demonstrate a proficient understanding of
various CSS properties, including but not
limited to color, font, margin, padding, and
positioning.
Gain insight into the hierarchical structure of
HTML documents and understand the
relationships between different elements.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSS COLORS
CSS uses color values to specify a color.
Typically, these are used to set a color either for
the foreground of an element (text) or for the
background of the element. They can also be
used to affect the color of borders and other
decorative effects.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSS COLORS
You can specify
your color values in
various formats.
Following table lists
all the possible
formats:
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSColors–Hex Code
A hexadecimal is a 6-digit representation of a
color. A hexadecimal value can be taken from
any graphics software.
#rrggbb
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Hex Code
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSS Colors–3-digit Hex Codes
The 3-digit hex code can only be used when both
the values are the same for each components.
So, if we have #ff00cc, it can be written like this:
#f0c.
# rgb
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
3-digit Hex Codes
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSS Colors–RGB Absolute
An RGB color value represents red, green, and
blue light sources. Each parameter defines the
intensity of the color between 0 and 255.
rgb(red, green, blue)
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
RGB Absolute
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSColors–RGBA Value
RGBA color values are an extension of RGB color values with
an alpha channel - which specifies the opacity for a color.
The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all)
rgba(red, green, blue, alpha)
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
RGBA Value
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSColors– Keyword
In CSS, a color can be
specified by using a
predefined color
name. CSS/HTML
support 140 standard
color names.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Keywords
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSColors– HSL Value
HSL stands for hue, saturation, and lightness. Hue is a degree on the
color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and
100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or
dark, 100% is white.
hsl(hue, saturation, lightness)
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HSL Value
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSBackground
CSS Background properties is used to define the background
effects of an element.
List of Background Properties
1. Background-color
2. Background-image
3. Background-repeat
4. Background-position
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Background-color
The background-color property specifies the background color of
an element. You can set the background color for any HTML
elements (wherever applicable)
1. Background-color
2. Background-image
3. Background-repeat
4. Background-position
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Background image
The background-image property specifies an
image to use as the background of an element.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Background-repeat & Background-position
By default, the background-image property repeats an image
both horizontally and vertically.
background-repeat: repeat-x; (horizontal)
background-repeat: repeat-y; (vertical)
background-repeat:no-repeat;
Position of an image can be set by using:
background-position: right top;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Shorthand Property
To shorten the code, it is also possible to specify all the background
properties in one single property.
When using the shorthand property, the order of the property
values is:
1. Background-color
2. Background-image
3. Background-repeat
4. Background-attachment
5. Background-position
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Shorthand Property
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSS Text
CSS Text properties is used to define the format
of a text.
1. Text Color
2. Text Alignment
3. Text Decoration
4. Text Transformation
5. Text Identation
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Text Color
Color property is used to set the color of the
text.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Text Alignment
The text-align property is used to set the horizontal alignment
of a text.
text-decoration-line: overline underline;
text-decoration-color: blue;
text-decoration-style:dashed;
text-decoration-thickness:5px;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Shorthand Property
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
text-transform:uppercase; (to all caps) text-
transform:lowercase; (to small) text-
transform:capitalize;(first letter cap)
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
CSSFont
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They
create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They
create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width.
They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Font Family
In CSS, we use the font-family property to specify the font of a
text.
The font-family property should hold several font names as a
"fallback" system, to ensure maximum compatibility between
browsers/operating systems.
font-family:"Times New Roman", Times, serif;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Font Style
The font-style property is mostly used to specify italic text.
font-style: normal;
font-style: italic;
font-style: oblique;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Font Weight
The font-weight property specifies the weight of a font:
font-weight: normal;
font-weight: bold;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Font Size
The font-size value can be an absolute, or relative size.
font-size: 40px;
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Font Size
The default size for normal text, like paragraphs, is 16px
(16px=1em).
To allow user store size the text (in the browser menu), many
developers use em instead of pixels.
The size can be calculated from pixels to em using this formula:
pixels/16=em
font-size:2.5em;/* 40px/16=2.5em */
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Use a Combination of Percent and Em
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Margin
The CSS margin properties are used to create space around
elements, outside of any defined borders.
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Shorthand Property
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
padding-top: 50px;
padding-right:30px;
padding-bottom:50px;
padding-left: 80px;
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
Shorthand Property
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML
DOCUMENT
TREE
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
CSS PROPERTIES
HTML Document Tree
We describe the elements in the tree like we would describe a
family tree.
There are ancestors, descendants, parents, children and
siblings.
It is important to understand the document tree because CSS
selectors use the document tree.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
SAMPLE HTML
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML Document Tree
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML Document Tree
Ancestor
An ancestor refers to any element that is connected but further up
the document tree - no matter how many levels higher.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML Document Tree
Descendant
Adescendant refers to anyelementthat isconnectedbutlower down
the document tree - no matter how many levels lower.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML Document Tree
Parent and Child
A parent is an element that is directly A child is an element that is directly
above and connected to an element below and connected to an element
in the document tree. in the document tree.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
HTML Document Tree
Sibling
A sibling is an element that shares the same parent with another element.
St. Vincent College of Cabuyao
Mamatid, City of Cabuyao, Laguna
THANK
YOU!
See you in our Next Lesson