Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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

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

2 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 ( … ), insert the 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 tags properties. Define as many properties as desired, separating each property with a semicolon. Type the closing }

3 Cascading Style Sheets H1 {text-align:center;background:green;color:red;font:normal 20pt Lithos Regular} P {text-align:justify; text-indent:8pt; font:10pt Verdana} …………………. ……………………

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

5 <-- H1 {color:red; font:20pt Verdana} P {color:blue; font:14pt Lithos Regular} --> Defining Styles for Classes Assign classes to the elements in the HTML document by defining the class within the element e.g. 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.

6 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. …..

7 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., Inline elements usually do not begin on a new line, and can only contain other inline elements, e.g. and.

8 Introduction ….. ….. ……………

9 Custom Inline tags (SPAN) Syntax is similar to block-level custom tags. SPAN.initialcap {font-size:200%} SPAN.allcaps {font-variant:small-caps} Introduction A t the beginning, you thought this course would be difficult. A t the beginning, you thought this course would be difficult.

10 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 its 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.

11 Creating Local Styles Within the HTML tag that you want to format, type STYLE=property:value Separate multiple properties with semicolons ……………………………………… Some Styling Possibilities Setting Font family: Font-family: familyname1,familyname2 where 1 and 2 are your first and second choices respectively.

12 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

13


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

Similar presentations


Ads by Google