DAY 4. Coding External Style Sheets

Transcription

1 DAY 4 Coding External Style Sheets

2 LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and apply an inline style sheet to a single HTML tag. I can describe and apply classes to define multiple different styles to a single HTML tag.

3 Adding Style Sheets to the Blue Cell Project

4 Project 8: Creating Style Sheets 4

5 Project 8: Creating Style Sheets 5

6 Project 8: Creating Style Sheets 6

7 Adding an Embedded Style Sheet

8 ADDING AN EMBEDDED STYLE SHEET Download all files from my classroom website! We ll add an Embedded Style Sheet to the Menu Page of the Web site Open the Menu Page in the browser and in Notepad: a:/proj8folder/menu.htm

9 Project 8: Creating Style Sheets 9

10 ADDING AN EMBEDDED STYLE SHEET Some of the Styles to use in the Menu Page: Changing the paragraph style Changing the hyperlink style Changing the font face (family) and size Setting a link to change color when the mouse hovers over it

11 ADDING AN EMBEDDED STYLE SHEET Setting the Paragraph Style Some variations for indenting: Setting a fixed size in points, pixels, inches, or centimeters p {text-indent: 20pt} Setting a relative size with percents (relative to size of screen) p {text-indent: 10%} Project 8: Creating Style Sheets

12 ADDING AN EMBEDDED STYLE SHEET Setting a Style for All Links Selectors for various link states: a:link a:visited a:active Selectors for all three link states (set all to the same style): a

13 ADDING AN EMBEDDED STYLE SHEET Using Text Decoration Property Values of text-decoration Property blink - causes text to blink on and off line-through - places a line in the middle of the text overline - places a line above the text underline - places a line under the text

14 ADDING AN EMBEDDED STYLE SHEET Using Text Decoration (continued) Can do multiple styles together: {text-decoration: underline overline} Can apply to any type of text, including links

15 ADDING AN EMBEDDED STYLE SHEET Using the Font-Family Property Defines font face for use in Web page Specifying more than one font-family If first is not available on the user computer, the second will be used: {font-family: Verdana, Garamond} If font name has spaces, must use quotes: {font-family: Times New Roman }

16 ADDING AN EMBEDDED STYLE SHEET Setting the Link Hover Style a:hover Defines the way a link appears when the mouse pointer points to (hovers over) a link Example a:hover {background: black; color: white}

17 ADDING AN EMBEDDED STYLE SHEET Using Style Tags and the Comment Code Recall: Syntax of Embedded Style Sheets <style> <!-- style statements here --> </style> Comment Code!

18 ADDING AN EMBEDDED STYLE SHEET Using Style Tags and the Comment Code The Comment Code hides any script language that a browser cannot interpret Ensures that, if a browser doesn t support CSS, the comment lines take effect, and the browser will not try to interpret the code within the comments

19 ADDING AN EMBEDDED STYLE SHEET In the Menu Page, replace this tag <!-- Insert embedded style sheet here --> with the following code: <style type="text/css"> <!-- p {text-indent: 20pt}

20 --> </style> ADDING AN EMBEDDED STYLE SHEET a {text-decoration: none; font-family: Verdana, Garamond; font-size: 12pt; color: black} a:hover {background: black; color: white}

21 Project 8: Creating Style Sheets 21

22 Project 8: Creating Style Sheets 22

23 Adding an External Style Sheet

24 ADDING AN EXTERNAL STYLE SHEET External Style Sheet Used to control the style of multiple Web pages or an entire Web site Assures a consistent style to all Web pages, as they all link to the external style sheet Created as a separate file (.css extension) All the Web pages in the site link to this file

25 ADDING AN EXTERNAL STYLE SHEET Some of the Styles to define: the body style the paragraph style the hyperlink style the table, table header, and caption styles

26 ADDING AN EXTERNAL STYLE SHEET Setting the Body Style Setting the margins all around the entire body of the linked Web pages: body {margin: 20pt} Setting only parts of the margins: body {margin-left: 20pt; margin-top: 10%}

27 ADDING AN EXTERNAL STYLE SHEET Setting the Table and Caption Styles Setting a format for an entire table: table {font-family: Verdana, Garamond; font-size: 11pt; border-color: black; border-style: double}

28 ADDING AN EXTERNAL STYLE SHEET Setting the Table and Caption Styles Setting a format for the table headings: th {background-color: #66CBFF; text-align: left} Setting a format for the table caption: caption {font-size: 8pt; font-style: italic}

29 ADDING AN EXTERNAL STYLE SHEET Creating an External Style Sheet Open a new file in Notepad: Save it as: a:/proj8folder/styles1.css

30 Type the following code: body {margin: 8pt} ADDING AN EXTERNAL STYLE SHEET a {text-decoration: none; color: black} p {font-family: Verdana, Garamond; font-size: 11pt}

31 ADDING AN EXTERNAL STYLE SHEET table {font-family: Verdana, Garamond; font-size: 11pt; border-color: black; border-style: double} th {background-color: #66CBFF; text-align: left} caption {font-size: 8pt; font-style: italic}

32 32 CREATING AN EXTERNAL STYLE SHEET Project 8: Creating Style Sheets

33 Linking to an External Style Sheet

34 LINKING TO AN EXTERNAL STYLE SHEET Linking to an External Style Sheet All Web pages that are to have the styles defined in an external style sheet must be linked to it Links are placed within the <head> tags of the HTML document General Format: <link rel="stylesheet type="text/css" href="styles1.css">

35 LINKING TO AN EXTERNAL STYLE SHEET Linking to an External Style Sheet <link rel="stylesheet type="text/css" href="styles1.css"> Recall: rel attribute: defines the relationship of the linked document (i.e. a style sheet) type attribute: indicates the content and language used in the linked document href attribute: indicates the name and location of the linked style sheet

36 LINKING TO AN EXTERNAL STYLE SHEET We ll add a link to the External Style Sheet to the the four other pages of the Web site Start with the Contacts page Open the Contacts Page in the browser and in Notepad: a:/proj8folder/contact.htm

37 LINKING TO AN EXTERNAL STYLE SHEET In the Contacts Page, replace this tag <!-- Insert link statement here --> with the following code: <link rel="stylesheet type="text/css" href="styles1.css">

38 LINKING TO AN EXTERNAL STYLE SHEET 38 Project 8: Creating Style Sheets

39 Project 8: Creating Style Sheets 39

40 LINKING THE REMAINING HTML FILES TO AN EXTERNAL STYLE SHEET In the remaining pages (Products, Question, and Welcome), replace this tag <!-- Insert link statement here --> with the following code: <link rel="stylesheet type="text/css" href="styles1.css"> Don t forget to save each file!

41 Adding an Inline Style Sheet

42 ADDING AN INLINE STYLE SHEET Inline Style Sheet Used to define the style of an individual HTML tag Take precedence over other defined styles We ll add one to the final paragraph of the Welcome page General Format: <p style="font-style: italic; font-size: 8pt">

43 ADDING AN INLINE STYLE SHEET Open the Welcome Page in the browser and in Notepad: a:/proj8folder/welcome.htm

44 ADDING AN INLINE STYLE SHEET In the final paragraph before the </body> tag, add the following text: <p style="font-style: italic; font-size: 8pt">This Web site is developed and maintained by our <strong><a href="mailto: staff </a></strong>. Please all site questions and comments to us.</p> Project 8: Creating Style Sheets

45 45 ADDING AN INLINE STYLE SHEET Project 8: Creating Style Sheets

46 Finishing the Blue Cell Project

47 VIEWING THE FRAMED WEB PAGES Open the Index (index.htm) file in Notepad (this is the frame definition file) Open the Index (index.htm) file in the browser Project 8: Creating Style Sheets

48 Project 8: Creating Style Sheets 48

49 Project 8: Creating Style Sheets 49

50 DAY 5 CSS Khan intro er-programming/html-css/intro-to-css/p/css-basics

51 DAY 6-8 Project

52 DAY 9 Review

53 DAY 10 Test