Prepared by Mr. Renato L. Adriano II, CICT
WHAT IS CSS?
CSS stands for Cascading Style Sheets.
CSS was designed by Hakon Wium Lie.
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 style sheets are stored in CSS files.
WHY USE CSS?
Saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web
pages as you want.
Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
WHY USE CSS?
Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such
as PDAs and cell phones or for printing.
Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all
the HTML pages to make them compatible to future browsers.
CSS SYNTAX
▪ Selector points to the HTML element you want to style.
▪ The declaration block contains one or more declarations separated by
semicolons.
▪ Each declaration includes a CSS property name and a value, separated by a
colon.
▪ CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
CSS SELECTORS
CSS SELECTORS
CSS selectors are used to "find" (or select) HTML elements based on their:
▪ Element
▪ ID
▪ Class
▪ Attribute
▪ Grouping
▪ Universal
ELEMENT SELECTOR
ID SELECTOR
CLASS SELECTOR
AT T R I B U T E S E L E C T O R
GROUPING SELECTOR
UNIVERSAL SELECTOR
HOW TO INSERT CSS?
HOW TO INSERT CSS?
There are three ways of inserting a style sheet:
▪ Inline Style
▪ Internal Style Sheet
▪ External Style Sheet
INLINE STYLE
INTERNAL STYLE SHEET
EXTERNAL STYLE SHEET
CSS COLORS
CSS FONTS
CSS FONT-FAMILY
▪ The font style of a text is set with the font-family property.
▪ The font-family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next font,
and so on.
▪ Start with the font you want, and end with a generic family, to let the browser
pick a similar font in the generic family, if no other fonts are available.
▪ Note: If the name of a font family is more than one word, it must be in
quotation marks, like: "Times New Roman".
CSS FONT-STYLE
▪ The font-style property is mostly used to specify italic text.
▪ This property has three values:
▪ normal - The text is shown normally
▪ italic - The text is shown in italics
▪ oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
CSS FONT-SIZE
▪ The font-size property sets the size of the text.
▪ Being able to manage the text size is important in web design. However, you
should not use font size adjustments to make paragraphs look like headings,
or headings look like paragraphs.
▪ Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
FONT SIZE WITH PIXELS
FONT SIZE WITH EM
FONT WEIGHT
FO N T VA R I A N T
TEXT ALIGN
left, right or justify
C S S BAC KG RO U N D
BAC KGROUND COLOR
BAC KGROUND I MAG E
B A C KG R O U N D R E P E AT - X
( H O R I Z O N TA L )
B A C KG R O U N D R E P E AT - Y
(VERTICAL)
P O S I T I O N A N D AT TA C H M E N T
POSITION:
top
bottom
right
center
left
ATTACHMENT:
fixed
scroll
CSS LINKS
With CSS, links can be styled in many different ways.
FOUR LINK STATES
links can be styled differently depending on what state they are in.
The four links states are:
•
•
•
•
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user’s mouse over it
a:active - a link the moment it is clicked
NOTE: This must be declared in order.
FOUR LINK STATES
LINK TEXT DECORATION
LINK BACKGROUND COLOR
CSS LIST
The list-style-type property specifies the type of list item marker.
LIST ITEM MARKERS
ORDERED LIST
UNORDERED LIST
CSS CONTENT
The content property is used with the ::before and ::after pseudoelements, to insert generated content.
CSS CONTENT
Different types of contents:
▪ None - sets the content, if specified, to nothing.
▪ Normal - default value. Sets the content, if specified, to normal, which
default is "none" (which is nothing).
▪ String - sets the content to the text you specify.
▪ Counter - sets the content as a counter.
▪ Attr(attribute) - sets the content as one of the selector's attribute.
▪ Open-quote - sets the content to be an opening quote.
▪ Close-quote - sets the content to be a closing quote.
▪ No-open-quote - removes the opening quote from the content, if specified.
▪ No-close-quote - removes the closing quote from the content, if specified.
▪ Url(url) - sets the content to be some kind of media (an image, a sound, a
video, etc.).
▪ Inherit - inherits this property from its parent element.
none, normal and string
counter
attr(attribute)
open quote and close quote
no quote
url(url)
inherit
CSS BOX MODEL
All HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout. The CSS box model is essentially a
box that wraps around every HTML element. It consists of margins, borders,
padding, and the actual content. The image below illustrates the box model:
CSS BORDERS
The CSS border properties allow you to specify the style, width, and
color of an element's border.
thin or thick
INDIVIDUAL BORDER
PROPERTIES
BORDER RADIUS
The border-radius property defines the radius of the element's corners.
Tip: This property allows you to add rounded corners to elements!
CSS MARGINS
Margins are used to create space around elements, outside of any
defined borders.
MARGIN SHORTHAND
PROPERTY
C S S PA D D I N G
Padding is used to create space around an element's content, inside of
any defined borders.
PA D D I N G S H O R T H A N D
PROPERTY
CSS HEIGHT & WIDTH
The CSS height and width properties are used to set the height and
width of an element.
CSS POSITIONS
The position property specifies the type of positioning method used for
an element (relative, absolute, fixed, or sticky)
C S S F L O AT
The CSS float property specifies how an element should float.
CSS CLEAR
The CSS clear property specifies what elements can float beside the
cleared element and on which side.
CSS TRANSITION
CSS transitions allows you to change property values
smoothly, over a given duration.
transition
transition
BEFORE TRANSITION
AFTER TRANSITION
transition
transition
BEFORE TRANSITION
AFTER TRANSITION
C S S A N I M AT I O N
CSS allows animation of HTML elements without using
JavaScript or Flash!
from and to
animation: changeColor 3s linear 0s 1 normal;
from and to
BEFORE ANIMATION
AFTER ANIMATION
percentage
animation: changeColor 10s ease 1s infinite reverse;
percentage
percentage
animation: changePosition 4s ease 0s infinite alternate;
percentage
CSS DROP CAP
CSS DROP CAP
CSS DROP CAP
SAMPLE HTML & CSS
EXPECTED OUTPUT
CODE #1
OUTPUT #1
CODE #2
OUTPUT #2
CODE #3
OUTPUT #3
CODE #4
OUTPUT #4
CODE #5
OUTPUT #5
FINAL CODE
FINAL OUTPUT
END OF
L E S S O NE N D O F
CHAPTER