Cascading Style Sheets References: Dietel, Dietel & Nieto. Chapter 14 HTML for the World wide web Elizabeth Castro Chapters 13 -16
Creating Internal Styles 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> 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 ‘<!--’ after the opening STYLE tag and --> before the closing STYLE tag.
Defining Styles for Classes <-- 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> <!-- P#intro {color:blue; font:italic bold} --> </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> <!-- DIV.intro {background:aqua} DIV.main {background:blue} H1 {text-align:center; background:green} --> </STYLE> </HEAD> <BODY> <DIV CLASS=“intro”> <H1>Introduction</H1>….. <P>….. </DIV> <DIV CLASS=“main”> <P>……………</P> </DIV>
At the beginning, you thought this course would be difficult. 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.
Creating an External Style Sheet 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.
Some Styling Possibilities Creating Local Styles Within 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 Possibilities Setting 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