CASCADING STYLE SHEETS
THE PURPOSE OF CSS
If HTML is the content and meaning
➡ CSS helps to convey that meaning
Allows developers to separate the content from
layout and design
Content and design inherently different in nature
➡ Change in content does not require change in design
WHAT IS CSS?
CSS stands for Cascading Style Sheet.
Typical CSS file is a text file with an
extention.css and contains a series of
commands or rules. These rules tell the
HTML how to display.
*To create a style sheet, create a file using Notepad (PC) or Text
Edit (Mac), save it as a .css document and start writing the CSS
code (see right).
CSS BENEFITS
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
Inline css
Document Level css
External css
ATTACHING A STYLE SHEET
Attach a style sheet to a page by adding the code to the <head>
section of the HTML page. There are 3 ways to attach CSS to a
page:
1. External Style Sheet: Best used to control styling on multiple
pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal (DOCUMENT)Style Sheet: Best used to control styling
on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is
used directly within HTML tags.
<p style=“color: red”>Some Text</p>
STYLE SPECIFICAITON FORMAT
Inline
Style = “ property_1:value_1;property_2:value2;”
Document
<style type=“text/css”>
Rule_list
</style>
CSS RULE STRUCTURE
A CSS RULE is made up of a selector
and a declaration. A declaration consists
of property and value.
selector {property: value;}
declaration
SELECTORS
A selector, here in green, is often an element of
HTML.
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }
PROPERTIES AND VALUES
body {background: purple;}
h1 {color: green; }
h2 {font-size: large;}
p {color: #ff0000;} /*hexadecimal for
red*/
Properties and values tell an HTML element how to display.
body {
*CSS code can be written in a
background: purple; linear format (above) or in a block
color: green; format (below).
}
GROUPING SELECTORS
Group the same selector with different declarations
together on one line.
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
Example of grouping selectors (both are correct):
h1 {
color: black;
font-weight: bold;
background: white;
}
GROUPING SELECTORS
Group different selectors with the same declaration on
one line.
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
Example of grouping selectors (both are correct):
h1, h2, h3 {color: yellow;}
COMMENTS IN CSS
• Explain the purpose of the coding
• Help others read and understand the code
• Serve as a reminder to you for what it all means
• Starts with /*and ends with*/
p {color: #ff0000;} /*Company Branding*/
CLASS SELECTOR
Class selector are used to allow different
occurrences of the same tag to use different style
specification.
P.normal {property-valuelist}
P.warning {property-value list }
<p class=“normal”>
A paragraph text is presentedin ‘normal’ </p>
<p class=“warning”>
A paragraph text is presents a warning message.</p>
GENERIC SELECTOR
.sale { property-value list }
<h3 class=“sale”>Weekend sale </h3>
<p class=“sale”>
….
…………
</p>
ID SELECTOR
#specific-id { property-value list }
#sec12 {font-size:20}
<h2 id=“sec12”> dsdkhd </h2>
UNIVERSAL SELECTOR
Apllies to all elements.
* {color:red;}
COLOR PROPERTIES
Color
Background-color
SPAN & DIV TAG
The <span> tag is used to group inline-elements
in a document.
The <span> tag provides no visual change by
itself.
The <span> tag is used for a part of a text or a
part of a document.
The <div> tag defines a division or a section in an
HTML document.
The <div> tag is used to group block-elements to
format them with CSS.
