8 - Style Sheets NEW

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



</p>

<p class="end">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris rutrum metus nec lorem. Mauris ipsum nisl, rutrum



</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 ;}


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; }


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;}


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; }


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; }


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% ;}


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;}


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 ;}



(top,bottom,left,right,center)(top,bottom,left,right,center) Background-colorBackground-color


background-repeat:no-repeat; background-background-repeat:no-repeat; background-position:center ; background-color:red;}position:center ; background-color:red;}



(top,bottom,left,right,center)(top,bottom,left,right,center) Background-colorBackground-color Background-attachment (fixed ,scroll)Background-attachment (fixed ,scroll)


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 ;}

8 - Style Sheets NEW

Documents

style of elements

style elements

style tag

style changes

style sheetstyle sheet

embedded style sheetyou

external style sheetyou

external style sheetsexample