cascading style sheets references: dietel, dietel & nieto. chapter 14 html for the world wide...

Cascading Style Sheets

References: Dietel, Dietel & Nieto. Chapter 14HTML 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 H1 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>

H1 {text-align:center;background:green;color:red;font:normal 20pt “Lithos Regular”}

P {text-align:justify; text-indent:8pt; font:10pt “Verdana”}

</STYLE>

</HEAD>

<BODY>

<H1>………………….

<P>……………………

</BODY></HTML>

You can define properties for several tags at once by separating each tag with a comma, i.e.

H1, H2, H3 {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.

H1 EM {color:red}

Hiding Styles from old browsers

Add ‘ before the closing STYLE tag.

<STYLE><--H1 {color:red; font:20pt “Verdana”}P {color:blue; font:14pt “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. <H1 CLASS=intro>• In the STYLE section of the page, define the properties for

the class • H1.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 JavaScript to them.

• This is done by adding an ID attribute to the tag.

<STYLE>



</STYLE>

<BODY>

<H1>…..

<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>, <H1>

• Inline elements usually do not begin on a new line, and can only contain other inline elements, e.g. <B> and <FONT>.

<STYLE>



</STYLE> </HEAD>

<BODY>

<DIV CLASS=“intro”>

<H1>Introduction</H1>…..

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

<H1>Introduction<H1>

<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 StylesWithin the HTML tag that you want to format, type STYLE=“property:value”Separate multiple properties with semicolons

<BODY>

<P STYLE=“background:yellow; color:red”>

………………………………………

</P>

Some Styling PossibilitiesSetting Font family: Font-family: familyname1,familyname2 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 font-

size:20pt 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: color: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

cascading style sheets references: dietel, dietel & nieto. chapter 14 html for the world wide...

Documents