HTML. Project 8. Creating Style Sheets. Project #8

Size: px

Start display at page:

Download "HTML. Project 8. Creating Style Sheets. Project #8"

Priscilla Horton
7 years ago
Views:

1 HTML Project #8 Project 8 Creating Style Sheets

2 Project Objectives Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet HTML Project 1: Introduction to HTML 2

3 Project Objectives Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet HTML Project 1: Introduction to HTML 3

4 Project Objectives Use the <link> tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Understand how to define style classes HTML Project 1: Introduction to HTML 4

5 Three Types of Style Sheets External Used to change the style of multiple Web pages in a Web site Is contained within a separate text file so that any HTML file can use it by linking to it within the <head> tags Embedded Used to change the style of a single Web page Is contained within the <head> tags of the Web page Inline Used to change the style of a single tag in a Web page Is contained within the tag it is changing HTML Project 1: Introduction to HTML 5

6 Precedence of Style Sheets Inline > Embedded > External "Precedence" means order of importance Therefore, an Inline style sheet for a tag will override the style specified for that tag by any Embedded or External style sheet HTML Project 1: Introduction to HTML 6

7 Creating an Inline Style Sheet Open your HTML file in Notepad Use the style attribute of the tag you want to stylize: <tag style = "property: value; property: value; property: value"> spacing around colon ( : ) does not make a difference Only alters the appearance of a single tag Place a semicolon ( ; ) after each attribute:value pair A semicolon is not needed after the last pair To apply the same changes to every <tag of a given type> in a Web page, use an Embedded Style Sheet. HTML Project 1: Introduction to HTML 7

8 Properties The properties that are used with CSS differ slightly from the attributes used with tags For example, when setting the font for a paragraph: HTML: <font size = "5" color = "#000000" face = "arial"> <p> This text will be formatted with size 5, color black, and face arial. </p> </font> CSS: <p style = "font-face: arial; font-size: 11pt; color: # > </p> Note that with CSS, you can use the pt-size instead of HTML's 1-7 size system. This text will be formatted with size 11 pt, color black, and face arial. HTML Project 1: Introduction to HTML 8

9 Properties For a list of properties, you can use Some common properties you may use include: color: name or hexadecimal code font-style: normal, italic, or oblique font-size: 1pt (Font size is limit less) font-family: font HTML Project 1: Introduction to HTML 9

10 Creating an External Style Sheet Open Notepad Type the default properties you want each tag to have in this format: tag name {property: value; property: value; property: value} Place a semicolon ( ; ) after each attribute:value pair A semicolon is not needed after the last pair, but remember to close with a brace ( } ) Click File Save As and type the filename you want followed by ".css" HTML Project 1: Introduction to HTML 10

11 Creating an External Style Sheet In order to put comments into a external style sheet you must use: /* */ <! > /* Comment */ Not  /* */ <! > HTML Project 1: Introduction to HTML 11

12 Example of an External Style Sheet body {margin: 8pt} h1 {color: #f00000} h3 {color: #3333CC} p {font-family: Arial; font-size: 11pt} Puts an 8pt margin between the body of the page and the browser window All h1 tags will be dark blue All h3 tags will be blue All p tags will have Arial as a font and a font size of 11pt *Note: Any of these specifications may be overwritten for individual tags with Inline Style Sheets HTML Project 1: Introduction to HTML 12

13 Linking to an External Style Sheet Within the <head> tags of your Web page, type: <link rel ="stylesheet" type = "text/css" href = "styles1.css" /> change the href value to the name of your style sheet, but always use the.css extension *Remember to link any other pages of your Web site to the same External Style Sheet if you want them to match. HTML Project 1: Introduction to HTML 13

14 Use of an External Style Sheet Before applying Style Sheet: After applying Style Sheet from previous slide: HTML Project 1: Introduction to HTML 14

15 Adding an Embedded Style Sheet <head> <title>cascading Style Sheets</title> <style type = "text/css">  </style> </head> An Embedded Style Sheet is typed in the same format as an External Style Sheet Include it within the <head> tags of your Web page Since this style sheet contains the same properties and values as the previous example, it will have the same affect on a Web page Enclose within comment tags so that browsers that cannot display styles will ignore this code HTML Project 1: Introduction to HTML 15

16 More Properties There is also a subproperty for the anchor tag a:hover *No spaces This allows you to make the appearance of a link change when the user "hovers" the mouse over it If this is inserted into an Embedded or External Style Sheet: a:hover {background: #3333FF; color: #FFFFFF} A link will look like this by default: And like this when the mouse is over it: HTML Project 1: Introduction to HTML 16

17 Viewing and Printing Framed Web Pages Click File Print When the Print dialog box is displayed, Click the Options tab Click As laid out on screen Click the Print button Otherwise, printing may only print one frame at a time HTML Project 1: Introduction to HTML 17

18 Project Summary Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet HTML Project 1: Introduction to HTML 18

19 Project Summary Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet HTML Project 1: Introduction to HTML 19

20 Project Summary Use the <link> tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Understand how to define style classes HTML Project 1: Introduction to HTML 20

21 Project 8 Complete HTML Project #8

{color:blue; font-size: 12px;}

{color:blue; font-size: 12px;} CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied: