1 / 21

Tutorial 3: Designing a Web Page with CSS

Tutorial 3: Designing a Web Page with CSS. Session 3.1. Objectives. What is CSS? Define CSS syntax Learn about the authoring options Add comments to a CSS Defining color in CSS. What is CSS?.

aron
Télécharger la présentation

Tutorial 3: Designing a Web Page with CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 3: Designing a Web Page with CSS Session 3.1.

  2. Objectives • What is CSS? • Define CSS syntax • Learn about the authoring options • Add comments to a CSS • Defining color in CSS

  3. What is CSS? • Cascading Style Sheets is a style sheet language developed to control the presentation of markup language documents.

  4. Difference between HTML and CSS CSS HTML

  5. CSS Syntax • General Syntax of a CSS rule: selector { property1: value1; property2: value2; property3: value3; ... }

  6. CSS Syntax h2 { color: green; text-align: center; } body { background-color: black; }

  7. Grouping Selectors h1 {font-weight: normal; color: blue;} h2 {font-weight: normal; color: blue;} Can be grouped: h1, h2 {font-weight: normal; color: blue;}

  8. Authoring Options • Based on style locations • External Styles • Embedded Styles • Inline styles

  9. External Styles

  10. Embedded Styles

  11. Inline Styles

  12. Practice – Link to CSS files • Download Sunny Acres files. • Link holiday.htm to the hs_layout.css style sheet and the hs_styles.css style sheet.

  13. Writing Comments /* Chocolate Factory Style Sheet Author: Johnny Depp Date: 02/18/2013 */

  14. Practice - Comments • Add comments at the top of the hs_styles.css file.

  15. Defining a Color in CSS • Defining a color in CSS • RGB triplets • Hexadecimal numbers • http://www.w3schools.com/html/html_colors.asp • RGB triplet syntax: rgb(red, green, blue) • Hexadecimal number syntax: #redgreenblue

  16. Setting Foreground and Background Color • Background Color: background-color: color; where color is a color value. • Foreground Color (text color): color: color;

  17. Practice – Setting Background Colors and Text Colors • Create a style rule for the page for the body page, set the background color to white. • Create a style rule for unordered lists within the nav element that sets the background color to the value (248, 175, 175). For every hypertext link within the navigation list, create a style that sets the font color to white. • The owner has placed a promotional photo in a figure box. Set the background color of figure boxes to the color value (248, 175, 175).

  18. Including Opacity (only CSS3) rgba(red, green, blue, opacity) Examples: rgba(182, 156, 89, 0.7) rgba(45, 199, 205, 0.8)

  19. Practice – Setting Colors including Opacity • For h1 headings nested within the section element, create a style rule to: a) set the background color to the value (148, 51, 62) and b) set the font color to white for older browsers and to the color value (255, 255, 255) with an opacity of 80% for newer browsers. • For address elements nested within the footer element, create a style rule to a) set the background to the color (148, 51, 62) and b) set the font color to white for older browsers and to the value (255, 255, 255) with 80% opacity for newer browsers.

  20. Selecting a Color Palette: Too Tough?

  21. Selecting a Color Palette: Too Tough?

More Related