8 - style sheets new
DESCRIPTION
style sheetsTRANSCRIPT
![Page 1: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/1.jpg)
HTMLHTMLComprehensive Concepts and TechniquesComprehensive Concepts and Techniques
Shelly Cashman SeriesShelly Cashman Series
Instructor: Erwin Donavan OngInstructor: Erwin Donavan Ong
![Page 2: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/2.jpg)
![Page 3: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/3.jpg)
StyleStyle
A style is a rule that defines the A style is a rule that defines the appearance of an element on a Web appearance of an element on a Web page.page.
![Page 4: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/4.jpg)
Style SheetStyle Sheet
Style sheet is a series of rules that Style sheet is a series of rules that defines the style of for a Web page or an defines the style of for a Web page or an entire Web site.entire Web site.
With a style sheet, you can alter the With a style sheet, you can alter the appearance of a web page, by changing appearance of a web page, by changing characteristics such as font family, font characteristics such as font family, font size, margins and links specifications.size, margins and links specifications.
![Page 5: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/5.jpg)
Cascading Style SheetsCascading Style Sheets
CSS allows a web developer to write CSS allows a web developer to write code statements that controls that control code statements that controls that control the style of elements on a web page.the style of elements on a web page.
CSS is not HTML; it is a separate CSS is not HTML; it is a separate language used to enhance the display language used to enhance the display capabilities of HTML.capabilities of HTML.
![Page 6: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/6.jpg)
3 types of style sheets:3 types of style sheets:
![Page 7: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/7.jpg)
Inline Style SheetInline Style Sheet
You add a style to an individual HTML You add a style to an individual HTML tags, such as heading or paragraph. The tags, such as heading or paragraph. The style changes that specific tag, but does style changes that specific tag, but does not affect other tags in the document.not affect other tags in the document.
![Page 8: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/8.jpg)
Embedded Style SheetEmbedded Style Sheet
You add the style sheet within the You add the style sheet within the <head> tags of the HTML documents to <head> tags of the HTML documents to define the style for the entire Web pagedefine the style for the entire Web page
![Page 9: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/9.jpg)
Linked Style Sheet or Linked Style Sheet or External Style SheetExternal Style Sheet
You create a text file that contains all of You create a text file that contains all of the styles you want to apply and then the styles you want to apply and then save the text file with the file save the text file with the file extension, .css. You then add a link to extension, .css. You then add a link to this external style sheet into any web this external style sheet into any web page in the web site.page in the web site.
This gives you the most flexibility.This gives you the most flexibility.
![Page 10: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/10.jpg)
Sample Embedded Style Sample Embedded Style SheetSheet
![Page 11: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/11.jpg)
Adding an Embedded Style Adding an Embedded Style SheetSheet
![Page 12: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/12.jpg)
Sample External Style Sample External Style SheetSheet
![Page 13: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/13.jpg)
Style Statement FormatStyle Statement Format
A style statement is made up of a A style statement is made up of a selector and a declaration that defines selector and a declaration that defines the style for one or more propertiesthe style for one or more properties
Example:Example:
<h1 style=“font-family: Garamond; font-<h1 style=“font-family: Garamond; font-color: navy”>color: navy”>
![Page 14: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/14.jpg)
<html><head><title>Intra-Wall Manang Chicken Sample Website</title></head><body><img src=chicken.jpg align=middle/><br/><br/><h1 style="font-family: arial black"> Hello! Welcome to the official website of Intramuros
famous Manang Chicken!</h1><p>Manang Chicken is opened for business since 1890.bla bla bla</p><p>Call 922-2222 for delivery</p><h1>Erwin Donavan Ong</h1></body></html>
![Page 15: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/15.jpg)
![Page 16: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/16.jpg)
Style Sheets allow you to control many different property values for various elements in a Web page.
Next slide shows the six main properties and related options that
you can control.
![Page 17: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/17.jpg)
Property NameProperty Name Options that can be controlled:Options that can be controlled:
backgroundbackground Color, image, positionColor, image, position
borderborder Color, style, widthColor, style, width
fontfont Family, size, style, variant, Family, size, style, variant, weightweight
listlist Image, position, typeImage, position, type
MarginMargin Length, percentageLength, percentage
texttext Alignment, decoration, Alignment, decoration, indentation, spacing, white indentation, spacing, white spacespace
![Page 18: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/18.jpg)
Inline Style SheetsInline Style Sheets
Inline style sheet is used to define the Inline style sheet is used to define the style of an individual HTML tagstyle of an individual HTML tag
Inline style sheet takes precedence over Inline style sheet takes precedence over both embedded and external style sheetsboth embedded and external style sheets
Example:Example:
<p style=“font-style: italic; font-size: 8pt”><p style=“font-style: italic; font-size: 8pt”>
![Page 19: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/19.jpg)
Embedded Style SheetEmbedded Style Sheet
Embedded style sheet is used to control Embedded style sheet is used to control the style of a single web page.the style of a single web page.
Use the <style> </style> tagsUse the <style> </style> tags You insert the style tag inside the <head> You insert the style tag inside the <head>
tagtag
![Page 20: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/20.jpg)
Embedded Style Sheet Embedded Style Sheet ExampleExample
<head><head>
<title>Sample webpage</title><title>Sample webpage</title>
<style type=“text/css”><style type=“text/css”>
p {text-indent: 8pt}p {text-indent: 8pt}
a {text-decoration: none; a {text-decoration: none;
font-family: Verdana;font-family: Verdana;
font-size: 14pt;font-size: 14pt;
font-color: navy}font-color: navy}
a:hover {background: navy;a:hover {background: navy;
color: white}color: white}
</style></style>
</head></head>
![Page 21: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/21.jpg)
Sample CodeSample Code<html><head><title>Sample Image Maps</title><style type="text/css">body{margin-left: 50px;}p{color:blue ; font-family: verdana, arial, sans-serif; font-size:
medium;}h1{color:red ; font-family: verdana, arial, sans-serif; font-size:
large; text-align:center;}</style></head><body><h1>A Basic Page</h1><p>Cascading style sheets were developed by Hakon Lie and Bert Bos, working
for the World Wide Web Consortium. The idea was to separate
presentation-the way the page looks-from structure-the way the page is
organized.</p><p>Using cascading style sheets, you separate the style elements of the page
(the font, size, color, spacing, etc.) and put them in a style section.
Then if you decide later that you want to make a change, you have to deal
with only one place, rather than hunting down all the places where you
used the old font tags.</p></body></html>
![Page 22: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/22.jpg)
External Style SheetsExternal Style Sheets
External style sheets are the most External style sheets are the most comprehensive form of style sheet and comprehensive form of style sheet and can be used to control the consistency can be used to control the consistency and look of many web pages within a and look of many web pages within a web siteweb site
Adding an external style sheet to a web Adding an external style sheet to a web page involves two-step process: creating page involves two-step process: creating an external style sheet and linking the an external style sheet and linking the style sheetstyle sheet
![Page 23: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/23.jpg)
Sample External Style Sample External Style SheetsSheets
a {text-decoration: none;a {text-decoration: none;
color: blue}color: blue}
p {font-family: Verdana, Garamond;p {font-family: Verdana, Garamond;
font-size: 11pt}font-size: 11pt}
table {font-family: Verdana, Garamond;table {font-family: Verdana, Garamond;
font-size: 11pt}font-size: 11pt}
![Page 24: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/24.jpg)
The format is similar to the embedded style sheets except that the <style> tag is no longer needed.
To create an external style sheet, enter all of the style statements in a text file using Notepad or another text editor and then save the text file with a .css extension.
Let us assume that the above code is named as style1.css
![Page 25: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/25.jpg)
link for external style link for external style sheetsheet
This link tag is placed inside the <head> This link tag is placed inside the <head> tag in exchange for the embedded which tag in exchange for the embedded which is the <style> tagis the <style> tag
![Page 26: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/26.jpg)
Sample link for external Sample link for external style sheetstyle sheet
<head><head>
<title>Sample webpage</title><title>Sample webpage</title>
<link rel=“stylesheet” type=“text/css” <link rel=“stylesheet” type=“text/css” href=“styles1.css”>href=“styles1.css”>
</head></head>Note: rel means relationshipNote: rel means relationship
Type means the contentType means the content
![Page 27: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/27.jpg)
Working with Classes in Working with Classes in Style SheetsStyle Sheets
The purpose of classes is if in case you The purpose of classes is if in case you want the style of the first paragraph to be want the style of the first paragraph to be different from the succeeding paragraph, different from the succeeding paragraph, you can define specific elements using you can define specific elements using the attribute the attribute classclass
![Page 28: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/28.jpg)
Defining and using classes in a style sheet is a two-step process. First, any elements that belongs to the class are marked by adding the tag:
class=“classname”
where the classname is the identifier or name of the class. To define a class the includes any beginning paragraphs, for example, you would enter the code:
<p class=“beginning”>
which means that the class is specific to that paragraph only. After you have named the classes, you can use the names in a selector and define a specific style for the class. In Embedded style sheet for example, you add the ff:
p: beginning {color: red;
font: 20pt}
![Page 29: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/29.jpg)
<html><head><title>Embedded Style Sheet - Sample classes</title><style type="text/css">
p.beginning {color:red; font-size: 20pt}
p.middle {color:green; font-weight: bold; font-style: obligue; font-size: 16pt}
p.end {color: navy; font-weight: bolder; font-variant: small-caps; font-style: normal; font-size: 12pt}
</style></head>
![Page 30: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/30.jpg)
<body>
<p class="beginning">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris rutrum metus nec lorem. Mauris ipsum nisl, rutrum
non, dapibus eget, semper et, nulla. Mauris scelerisque purus quis quam. In cursus pharetra nisi. Nullam porta.
Donec nec tellus egestas elit feugiat rutrum. Aenean libero. Nullam posuere volutpat metus. Nulla et nunc at nisi
</p>
<p class="middle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris rutrum metus nec lorem. Mauris ipsum nisl, rutrum
non, dapibus eget, semper et, nulla. Mauris scelerisque purus quis quam. In cursus pharetra nisi. Nullam porta.
Donec nec tellus egestas elit feugiat rutrum. Aenean libero. Nullam posuere volutpat metus. Nulla et nunc at nisi
</p>
<p class="end">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris rutrum metus nec lorem. Mauris ipsum nisl, rutrum
non, dapibus eget, semper et, nulla. Mauris scelerisque purus quis quam. In cursus pharetra nisi. Nullam porta.
Donec nec tellus egestas elit feugiat rutrum. Aenean libero. Nullam posuere volutpat metus. Nulla et nunc at nisi
</p>
</body></html>
![Page 31: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/31.jpg)
Convert the codes in the previous slides using the External Style Sheets
![Page 32: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/32.jpg)
CSS FONT PROPERTIESCSS FONT PROPERTIES
Font-familyFont-family
Ex:Ex:
h2{font-family: garamond, palatino, h2{font-family: garamond, palatino, georgia, times, serif ;}georgia, times, serif ;}
![Page 33: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/33.jpg)
CSS FONT PROPERTIESCSS FONT PROPERTIES
Font-familyFont-family Font-size (small, medium, large)Font-size (small, medium, large)
Ex:Ex:
h2{font-family: garamond, palatino, h2{font-family: garamond, palatino, georgia, times, serif ; font-size:small; }georgia, times, serif ; font-size:small; }
![Page 34: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/34.jpg)
CSS FONT PROPERTIESCSS FONT PROPERTIES
Font-familyFont-family Font-size (small, medium, large)Font-size (small, medium, large) Font-style (italic, normal)Font-style (italic, normal)
Ex:Ex:
h2{font-family: garamond, palatino, h2{font-family: garamond, palatino, georgia, times, serif ; font-size:small; georgia, times, serif ; font-size:small; font-style: italic;}font-style: italic;}
![Page 35: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/35.jpg)
CSS FONT PROPERTIESCSS FONT PROPERTIES
Font-familyFont-family Font-size (small, medium, large)Font-size (small, medium, large) Font-style (italic, normal)Font-style (italic, normal) Font-weight (normal,bold)Font-weight (normal,bold)Ex:Ex:h2{font-family: garamond, palatino, h2{font-family: garamond, palatino,
georgia, times, serif ; font-size:small; georgia, times, serif ; font-size:small; font-style: italic;}font-style: italic;}
![Page 36: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/36.jpg)
CSS TEXT PROPERTIESCSS TEXT PROPERTIES
Line-heightLine-height
Ex:Ex:
p{font-family: garamond, palatino, georgia, p{font-family: garamond, palatino, georgia, times, serif ; line-height:1.5; }times, serif ; line-height:1.5; }
![Page 37: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/37.jpg)
CSS TEXT PROPERTIESCSS TEXT PROPERTIES
Line-heightLine-height Text-align (left,right,cente,justify)Text-align (left,right,cente,justify)
Ex:Ex:
p{font-family: garamond, palatino, georgia, p{font-family: garamond, palatino, georgia, times, serif ; line-height:1.5; text-times, serif ; line-height:1.5; text-align:center; }align:center; }
![Page 38: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/38.jpg)
CSS TEXT PROPERTIESCSS TEXT PROPERTIES
Line-heightLine-height Text-align (left,right,cente,justify)Text-align (left,right,cente,justify) Text-indentText-indent
Ex:Ex:
p{font-family: garamond, palatino, georgia, p{font-family: garamond, palatino, georgia, times, serif ; line-height:1.5; text-times, serif ; line-height:1.5; text-align:center; text-indent:5% ;}align:center; text-indent:5% ;}
![Page 39: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/39.jpg)
CSS TEXT PROPERTIESCSS TEXT PROPERTIES
Text-decoration (underline, overline, line-Text-decoration (underline, overline, line-through, blink)through, blink)
Ex:Ex:
p{font-family: garamond, palatino, georgia, p{font-family: garamond, palatino, georgia, times, serif ; text-decoration: underline;}times, serif ; text-decoration: underline;}
![Page 40: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/40.jpg)
CSS TEXT PROPERTIESCSS TEXT PROPERTIES
Text-decoration (underline, overline, line-Text-decoration (underline, overline, line-through, blink)through, blink)
Letter-spacing (px)Letter-spacing (px)
Ex:Ex:p{font-family: garamond, palatino, georgia, p{font-family: garamond, palatino, georgia,
times, serif ; text-decoration: underline; times, serif ; text-decoration: underline; letter-spacing=15px ;}letter-spacing=15px ;}
![Page 41: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/41.jpg)
CSS IMAGE PROPERTIESCSS IMAGE PROPERTIES
Margin (px)Margin (px) Padding (px)Padding (px)
Ex:Ex:
Img{ margin:10px; padding:10px ;}Img{ margin:10px; padding:10px ;}
![Page 42: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/42.jpg)
CSS BACKGROUND CSS BACKGROUND PROPERTIESPROPERTIES
Backgound-repeat (repeat , no-repeat)Backgound-repeat (repeat , no-repeat) Background-position Background-position
(top,bottom,left,right,center)(top,bottom,left,right,center)
Ex:Ex:Body{ background-image:url(pic.jpg) ; Body{ background-image:url(pic.jpg) ;
background-repeat:no-repeat; background-repeat:no-repeat; background-position:center ;}background-position:center ;}
![Page 43: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/43.jpg)
CSS BACKGROUND CSS BACKGROUND PROPERTIESPROPERTIES
Backgound-repeat (repeat , no-repeat)Backgound-repeat (repeat , no-repeat) Background-position Background-position
(top,bottom,left,right,center)(top,bottom,left,right,center) Background-colorBackground-color
Ex:Ex:Body{ background-image:url(pic.jpg) ; Body{ background-image:url(pic.jpg) ;
background-repeat:no-repeat; background-background-repeat:no-repeat; background-position:center ; background-color:red;}position:center ; background-color:red;}
![Page 44: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/44.jpg)
CSS BACKGROUND CSS BACKGROUND PROPERTIESPROPERTIES
Backgound-repeat (repeat , no-repeat)Backgound-repeat (repeat , no-repeat) Background-position Background-position
(top,bottom,left,right,center)(top,bottom,left,right,center) Background-colorBackground-color Background-attachment (fixed ,scroll)Background-attachment (fixed ,scroll)
Ex:Ex:Body{ background-image:url(pic.jpg) ; Body{ background-image:url(pic.jpg) ;
background-repeat:no-repeat; background-background-repeat:no-repeat; background-position:center ; background-color:red;}position:center ; background-color:red;}
![Page 45: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/45.jpg)
CSS LINK PROPERTIESCSS LINK PROPERTIES
A:link{ color:gray; text-decoration: none ;}A:link{ color:gray; text-decoration: none ;} A:visited{ color:blue; text-decoration: A:visited{ color:blue; text-decoration:
none ;}none ;} A:hover { color: red; text-decoration: A:hover { color: red; text-decoration:
underline ;}underline ;}
![Page 46: 8 - Style Sheets NEW](https://reader033.vdocuments.site/reader033/viewer/2022051415/55cf94c7550346f57ba452d4/html5/thumbnails/46.jpg)