Cascading Style Sheets References Dietel Dietel Nieto Chapter

• Local: Embedded within individual HMTL tags. • Internal: Created within HEAD tags

<HTML><HEAD><TITLE>Cascading Style Sheets</TITLE> <STYLE> H 1 {text-align: center; background: green; color: red; font: normal

Ø You can define properties for several tags at once by separating each tag

<STYLE> <-H 1 {color: red; font: 20 pt “Verdana”} P {color: blue; font: 14

Identifying particular tags • Rather than creating a whole class of HTML tags, you

Creating Custom HTML tags • There are 2 generic tags that can be combined

<STYLE> <!-DIV. intro {background: aqua} DIV. main {background: blue} H 1 {text-align: center; background:

Custom Inline tags (SPAN) • Syntax is similar to block-level custom tags. <STYLE> SPAN.

External Styles • Created in a separate file and saved with a ‘. css’

Creating Local Styles v Within the HTML tag that you want to format, type

Ø To create Italics: font-style: italic Ø To remove Italics: font-style: normal Ø To

Slides: 13

Download presentation

Cascading Style Sheets References: Dietel, Dietel & Nieto. Chapter 14 HTML for the World wide web Elizabeth Castro Chapters 13 -16

• Local: Embedded within individual HMTL tags. • Internal: Created within HEAD tags of same document. • External: Similar structure to internal, but saved as a separate ‘. css’ file. Creating Internal Styles Ø Between the opening and closing HEAD tags (<HEAD>…</HEAD>), insert the <STYLE> tag. Ø Type the name of the tag whose property you wish to define such as H 1 or P. Ø Type an opening ‘ { ‘ to mark the beginning of the tag’s properties. Ø Define as many properties as desired, separating each property with a semicolon. Ø Type the closing ‘ } ’

<HTML><HEAD><TITLE>Cascading Style Sheets</TITLE> <STYLE> H 1 {text-align: center; background: green; color: red; font: normal 20 pt “Lithos Regular”} P {text-align: justify; text-indent: 8 pt; font: 10 pt “Verdana”} </STYLE> </HEAD> <BODY> <H 1>…………………. <P>………… </BODY></HTML>

Ø You can define properties for several tags at once by separating each tag with a comma, i. e. H 1, H 2, H 3 {color: red; } Ø To define styles for an embedded tag, you type the parent tag first and separate it from the child tag with a space, and define the properties, i. e. H 1 EM {color: red} Hiding Styles from old browsers Add ‘ before the closing STYLE tag.

<STYLE> <-H 1 {color: red; font: 20 pt “Verdana”} P {color: blue; font: 14 pt “Lithos Regular”} --> </STYLE> Defining Styles for Classes • Assign classes to the elements in the HTML document by defining the class within the element e. g. <H 1 CLASS=intro> • In the STYLE section of the page, define the properties for the class • H 1. intro {color: blue} • Note that you can only define classes for internal and external style sheets.

Identifying particular tags • Rather than creating a whole class of HTML tags, you can identify particular tags, and apply styles to them as well as apply Java. Script to them. • This is done by adding an ID attribute to the tag. <STYLE> <!-P#intro {color: blue; font: italic bold} --> </STYLE> <BODY> <H 1>…. . <P ID=intro>…. . </BODY>

Creating Custom HTML tags • There are 2 generic tags that can be combined with classes and ID to create custom HTML tags. • These are DIV and SPAN. • DIV is for Block-level elements, while SPAN is for inline elements. • Block-level elements usually begin on a new line, and may contain other block-level or inline elements, e. g. <P>, <H 1> • Inline elements usually do not begin on a new line, and can only contain other inline elements, e. g. <B> and <FONT>.

<STYLE> <!-DIV. intro {background: aqua} DIV. main {background: blue} H 1 {text-align: center; background: green} --> </STYLE> </HEAD> <BODY> <DIV CLASS=“intro”> <H 1>Introduction</H 1>…. . <P>…. . </DIV> <DIV CLASS=“main”> <P>……………</P> </DIV>

Custom Inline tags (SPAN) • Syntax is similar to block-level custom tags. <STYLE> SPAN. initialcap {font-size: 200%} SPAN. allcaps {font-variant: small-caps} </STYLE></HEAD> <BODY> <H 1>Introduction<H 1> <SPAN CLASS=“initialcap”>A</SPAN> <SPAN CLASS=“allcaps”>t the beginning, you thought this course would be difficult. </SPAN> At the beginning, you thought this course would be difficult.

External Styles • Created in a separate file and saved with a ‘. css’ extension • Ideal for giving all the pages on your website the same look and feel. • Each page would get it’s style from the external style sheet. • When a change is made in an external style sheet, all the pages that reference it are automatically updated. Creating an External Style Sheet • • • Create a new text document Type the name of the tag whose properties you wish to define Type the ‘ { ‘ Define as many properties as desired as for Internal styles Type the closing ‘ } ‘ , and save the file with a ‘. css’ extension.

Creating Local Styles v Within the HTML tag that you want to format, type v STYLE=“property: value” v Separate multiple properties with semicolons <BODY> <P STYLE=“background: yellow; color: red”> …………………… </P> Some Styling Possibilities Setting Font family: Ø Font-family: familyname 1, familyname 2 where 1 and 2 are your first and second choices respectively.

Ø To create Italics: font-style: italic Ø To remove Italics: font-style: normal Ø To create Bold formatting: font-weight: bold Ø To remove Bold formatting: font-weight: normal Ø Setting font size: Define absolute or relative size such as fontsize: 20 pt or font-size: larger. You may also set the percentage e. g. font-size: 150% Ø Setting line height (amount of space between each line in a paragraph): line-height: n where n is the number that would be multiplied by the font size to obtain the desired line height Ø Setting Text Colour: colour name or hexadecimal representation Ø To align text: text-align: left, right or center Ø Underlining text: text-decoration: underline Ø To remove underlining: text-decoration: none