CASCADING STYLE SHEETS (CSS)
Introducing CSS
A style sheet (CSS) is a set of declarationsdescribing the layout and appearance of adocument.
CSS enable you to specify link styles, fonts,margins, tables, colors, sizes, alignmentsand much more throughout your entire webpage.
When change to the CSS file, they willautomatically update all of the pages onyour web site.
Introducing CSS
You can apply styles to a Web site in threeways:
Inline styles
Embedded style sheet
External style sheet
Each approach has its own advantages anddisadvantages, you can combine three wayin developing your Web sites.
Inline Styles
An inline style is a style that is applieddirectly to an element through the use of thefollowing style attribute.
Ex:
<h1 style="text-align: center; color: red”>
Sunny Acres
</h1>
<tagName Style=”property1:value1;property2: value2;…”>
Content
</tagName>
Embedded Style Sheet
Embedded style sheet: applies to thecontent of entire web page.
The coding is placed between the <HEAD>and </HEAD> tags within your HTML page.
<head>
<style>
tagName {property1: value1; property2: value2 …}
</style>
</head>
Embedded Style Sheet
Ex:
<style type=“text/css”>
body {background-color:#ff0000;}
h1 {font-size: 36px; font-weight: bolder;
color: #F000AA;}
</style>
Embedded Style Sheet
You can apply that same style to severalelements by entering the elements in acomma separated list before the list of styleproperties.
Ex:
<style>
H1, h2{text-align: center; color: red}
</style>
External Style Sheet
A external style sheet is a text file thatcontains style declarations. The file can thenbe linked to any all pages on the web site,allowing the same styles to be applied to theentire site.
The file name extension indicates thelanguage of the style sheet. The extensionfor CSS style sheets is .css.
External Style Sheet
Style.css file
Ex:
Body{font-family: Arial; font-size:12px}
H1{font-family:Arial;font-size:16px;color:red}
P{font-weight: normal; color: blue}
tagName {property1: value1; property2: value2 …}
External Style Sheet
Apply CSS file for HTML pages: Place a linkto your style.css file within HTML pagebetween <HEAD> and </HEAD> tags
Syntax:
<Head>
<Link Rel=StyleSheet Type=”text/css”Href=”StyleSheet file.css”>
</Head>
External Style Sheet
You can link a single style sheet to multipledocument in your Web site
Ex:
<head>
<link rel="stylesheet" type="text/css" href="styles1.css" />
<link rel="stylesheet" type="text/css" href="styles2.css" />
</head>
You can also link a single document to severalstyle sheets.
IDs and Classes
CSS ID: When you want to apply a style toa specific element, you can mark theelement with the id attribute.
To create a style for that marked element,apply the style declaration
#id {style rule}
id is the value of the element's idattribute
style rule stands for the styles applied tothat specific element.
IDs and Classes
Ex:
<head>
<style>
#par { text-align: center; color: red }
</style>
</head>
Apply style to id element:
<p id=“par”>Content </p>
IDs and Classes
CSS Class:
HTML require each id be unique value canonly be used once in a document.
You can mark a group of elements with acommon identifier using the classattribute.
Syntax:
.ClassName{property1:value1; property2: value2; …}
IDs and Classes
Ex:
<head>
<style>
.clssname { text-align: center; color: red }
</style>
</head>
Apply style to elements:
<p class=“clssname”>Paragraph </p>
<h1 class=“clssname”>Heading1</h1>
Color in HTML and CSS
Defining Text and Background Colors
The style to define the background color is
background-color: color
The style to define the Text color is
Color: color
Ex:
H1{background-color: red; color: #FFAA5C}
Fonts and Text Styles
font-family :[ arial, verdana, sans-serif];
font-style : [italic, normal, oblique ]
font-variant : [normal, small-caps]
font-weight : [normal, bold]
font-size : [?pt, ?em,?%, ?px]
font [font-style | font-variant | font-weight |font-size | font-family] :
Fonts and Text Styles
text-indent:[px]
text-align:[left,right,center,justify]
text-decoration:[underline,overline,line-through]
letter-spacing :[px]
text-transform:[capitalize,uppercase,lowercase, none]
Fonts and Text Styles
Combining all text formatting in a singlestyle:
EX:
font: italic small-caps bold 16pt/24pt Arial,sans-serif
{font: font-style font-variant font-weight font-
size/line-height font-family}
Background Images
Background image:
background-image: url(ur1)
EX:
Style=“background- image:url(background.jpg)”
Background image option:
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background
Background Images
Background Images
background-position:[value of points]
Style for Links
States of hyperlinks
a:link
a:visited
a:active
a:hover
EX: <style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {font-size:24; color:red;}</style>
Styles for bullets
Styles for bullets:
List-style:circle
List-style: disc List-style: square List-style: decimal List-style: lower-alpha List-style: upper-alpha List-style: upper-roman List-style: lower-roman
list-style-image: url (images/bullet.gif)}
Floating an Element
Floating an element causes the element tomove out of the normal document flow onthe page, moving to a position along the leftor right margins of the parent element.
The other elements on the Web page thatare not floated are then moved up to occupythe position previously occupied by thefloating element.
Floating an Element
Floating an Element
Syntax:
float: position
Where position is:
None (default to turn off floating)
Left/Right
You can also stack floating elements tocreate a column effect in page layout.
Floating an Element
Floating an Element
If you want to prevent an object fromwrapping around a floating element.
To prevent an element from wrapping, applythe clear style
Syntax: clear: position
position is none (the default), left, right,or both.
The element not to be displayed until theright margin of the parent element isfloating objects
Floating an Element
Working with the Box Model
The box model describes the structure ofpage elements as they are laid out on theWeb page, each element is composed of thefour sections
The margin between the element andother page content.
The border of the box containing theelement content
Working with the Box Model
The padding between the element'scontent and the box border
The content of the element itself
Styles for Margin and Padding
Styles Margin : The margin clears an areaaround an element. It includes top, right,bottom, and left margin which can bechanged independently using separateproperties.
Styles for Margin and Padding
The padding clears an area around thecontent of an element. It includes top, right,bottom, and left margin which can bechanged independently using separateproperties.
Styles for Margin and Padding
Styles for Border
border-width : [value];
border-color : [value of color]
Styles for Border
border-style :[value]
border :[width style color ]
Width and Height Styles
Styles for position of elements
Ex:
h1 {border-width: thick; border-style: dotted;
border-color: gold; }
h2 {border-width: 20px; border-style: outset;
border-color: red; }
p {border-width: 1px; border-style: dashed;
border-color: blue; }
ul {border-width: thin; border-style: solid;
border-color: orange; }
Styles for position of elements
position:[absolute,relative];
top: [value];
left: [value];
bottom: [value];
right: [value];
Styles for position of elements
EX:
#box1 { position:absolute; top: 50px; left: 50px; }
#box2 { position:absolute; top: 50px; right: 50px; }
#box3 { position:absolute; bottom:50px; right: 50px; }
#box4 { position:absolute; bottom:50px;left:50px; }
Styles for position of elements
Color Table of HTML and CSS
The principle of color:
Any color is combined by three maincolor: red, green and blue.
Color Table of HTML and CSS
Use hex #rrggbb
rr: red
gg : green
bb : blue
White RGB=(255,255,255)=#FFFFFF
Black RGB=(0,0,0)=#000000
Yellow RGB=(255,255,0)= #FFFF00
Red RGB=(255,0,0)=#FF0000
Blue RGB=(0,0,255)=#0000FF
Color Table of HTML and CSS