8 - Style Sheets NEW
Post on 27-Dec-2015
8 Views
Preview:
DESCRIPTION
Transcript
HTMLHTMLComprehensive Concepts and TechniquesComprehensive Concepts and Techniques
Shelly Cashman SeriesShelly Cashman Series
Instructor: Erwin Donavan OngInstructor: Erwin Donavan Ong
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.
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.
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.
3 types of style sheets:3 types of style sheets:
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.
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
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.
Sample Embedded Style Sample Embedded Style SheetSheet
Adding an Embedded Style Adding an Embedded Style SheetSheet
Sample External Style Sample External Style SheetSheet
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”>
<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>
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.
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
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”>
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
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>
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>
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
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}
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
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
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
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
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}
<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>
<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>
Convert the codes in the previous slides using the External Style Sheets
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 ;}
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; }
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;}
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;}
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; }
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; }
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% ;}
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;}
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 ;}
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 ;}
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 ;}
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;}
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;}
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 ;}
top related