cascading style sheets (css) - xuanhien.files.wordpress.com · cascading style sheets (css)...
TRANSCRIPT
![Page 1: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/1.jpg)
CASCADING STYLE SHEETS (CSS)
![Page 2: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/2.jpg)
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.
![Page 3: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/3.jpg)
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.
![Page 4: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/4.jpg)
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>
![Page 5: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/5.jpg)
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>
![Page 6: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/6.jpg)
Embedded Style Sheet
Ex:
<style type=“text/css”>
body {background-color:#ff0000;}
h1 {font-size: 36px; font-weight: bolder;
color: #F000AA;}
</style>
![Page 7: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/7.jpg)
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>
![Page 8: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/8.jpg)
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.
![Page 9: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/9.jpg)
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 …}
![Page 10: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/10.jpg)
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>
![Page 11: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/11.jpg)
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.
![Page 12: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/12.jpg)
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.
![Page 13: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/13.jpg)
IDs and Classes
Ex:
<head>
<style>
#par { text-align: center; color: red }
</style>
</head>
Apply style to id element:
<p id=“par”>Content </p>
![Page 14: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/14.jpg)
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; …}
![Page 15: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/15.jpg)
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>
![Page 16: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/16.jpg)
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}
![Page 17: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/17.jpg)
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] :
![Page 18: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/18.jpg)
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]
![Page 19: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/19.jpg)
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}
![Page 20: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/20.jpg)
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;
![Page 21: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/21.jpg)
background
Background Images
![Page 22: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/22.jpg)
Background Images
background-position:[value of points]
![Page 23: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/23.jpg)
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>
![Page 24: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/24.jpg)
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)}
![Page 25: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/25.jpg)
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.
![Page 26: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/26.jpg)
Floating an Element
![Page 27: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/27.jpg)
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.
![Page 28: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/28.jpg)
Floating an Element
![Page 29: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/29.jpg)
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
![Page 30: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/30.jpg)
Floating an Element
![Page 31: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/31.jpg)
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
![Page 32: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/32.jpg)
Working with the Box Model
The padding between the element'scontent and the box border
The content of the element itself
![Page 33: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/33.jpg)
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.
![Page 34: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/34.jpg)
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.
![Page 35: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/35.jpg)
Styles for Margin and Padding
![Page 36: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/36.jpg)
Styles for Border
border-width : [value];
border-color : [value of color]
![Page 37: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/37.jpg)
Styles for Border
border-style :[value]
border :[width style color ]
![Page 38: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/38.jpg)
Width and Height Styles
![Page 39: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/39.jpg)
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; }
![Page 40: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/40.jpg)
Styles for position of elements
position:[absolute,relative];
top: [value];
left: [value];
bottom: [value];
right: [value];
![Page 41: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/41.jpg)
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; }
![Page 42: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/42.jpg)
Styles for position of elements
![Page 43: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/43.jpg)
Color Table of HTML and CSS
The principle of color:
Any color is combined by three maincolor: red, green and blue.
![Page 44: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/44.jpg)
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
![Page 45: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and](https://reader034.vdocuments.site/reader034/viewer/2022052306/5f237f04024cb547f1115526/html5/thumbnails/45.jpg)
Color Table of HTML and CSS