1. CHAPTER 4 CREATING STYLES AND LAYOUTS WITH CSS

2. CHAPTER OBJECTIVES Create ID-based styles Position content with CSS Format text with CSS Identify CSS syntax Use the CSS Properties panel Create a font family Create an external style sheet Modify a style sheet using code Attach a style sheet Add a Web page using CSS layouts Copy and paste elements among pages Organize style sheets Create a CSS report Chapter 4: Creating Styles and Layouts with CSS2

3. HOUSEKEEPING If you don’t have a Ch. 4 directory, create one. Read the project on pg 242 Chapter 4: Creating Styles and Layouts with CSS3

4. WHAT ARE STYLE SHEETS? Rules used to control the formatting and layout of pages as well as individual elements and text in a web page. Creates consistency. Style sheets that are attached to web pages allows all elements to be formatted in the same way. CSS is the W3C preferred method for page layout and font. Chapter 4: Creating Styles and Layouts with CSS4

5. PLAN AHEAD Define formatting and layout using styles – style sheets allow you to do both Create your own styles and style sheets – When saving these, you have to specify if it is an INLINE – in the section of the code INTERNAL - in the section of the code EXTERNAL – a separate.css file that contains CSS code Evaluate style sheets – Run a CSS report that will show you conflicting rules with your style sheets. Chapter 4: Creating Styles and Layouts with CSS5

6. CSS SYNTAX 3 parts Selector – What? Such as h1 Property – How? Such as font-size Value – How much? Such as xx-large 3 selectors Element – paragraph, lists, heading, body text, etc. Class – Repeats several times such as to format headings within a block of code (resume) ID – Single instance..once per page.. Footer or header..etc. Chapter 4: Creating Styles and Layouts with CSS6

7. PRIORITY Style rules are ordered by specificity: Inline styles – 1 st priority Internal styles – 2 nd priority External styles – 3 rd priority Chapter 4: Creating Styles and Layouts with CSS7

8. GETTING STARTED Do pages 246-248 to open the site we are going to be working on. Chapter 4: Creating Styles and Layouts with CSS8

9. DEFINING AN ID-BASED STYLE Before you can create an ID-based style, you must first create the ID. (masthead, top_nav, page_content, & footer) If you will notice, these styles were created when the page was created. They are listed in the Apply Styles panel, but with no formatting. So, let’s go fix that by doing pages 249-253 Notice as you are modifying the style, look at the bottom of the dialog box and you will see the changes being made! SAVE these often, just in case! Chapter 4: Creating Styles and Layouts with CSS9

10. DEFINING AN ID-BASED STYLE Chapter 4: Creating Styles and Layouts with CSS10

11. CLASS-BASED STYLE Positioning elements is easy with a class-based style. Do pages 254-256 Chapter 4: Creating Styles and Layouts with CSS11

12. USING THE CSS PROPERTIES PANEL You can modify styles using the CSS properties panel instead of opening the modify style dialog box. These changes are applied automatically. Do pages 256-259 Chapter 4: Creating Styles and Layouts with CSS12

13. CREATING AN EXTERNAL STYLE SHEET CSS allows you to store the style rules for an element is a CSS file and the content inthe HTML files. The separation of these two gives you greater flexibility when making changes. Purpose driven style sheets – Layout guidelines for web sites General page guidelines You can then attach the style sheets to a web page or an entire web site. Do pages 260-261. Chapter 4: Creating Styles and Layouts with CSS13

14. CREATING AN EXTERNAL STYLE SHEET Chapter 4: Creating Styles and Layouts with CSS14

15. CREATING A FONT FAMILY Using a consistent font family provides visitors to your site a common experience. Font Family – collection of similar font styles that a browser can apply to a web site. 3 types of fonts are preferred Serif – have strokes at the end of the letter’s lines Sans-serif – DO NOT have strokes Monospace – resemble old-style computer fonts...Not commonly used Do pages 262-265 Chapter 4: Creating Styles and Layouts with CSS15

16. CREATING A FONT FAMILY Chapter 4: Creating Styles and Layouts with CSS16

17. ENTERING CSS CODE Include headings and comments that explain the sheet and its rules. Intellisense – prompts you with shortcut menus of suggested selectors and options based on what you are typing. Do pages 266-270. See next slide for what your pages look like now! Chapter 4: Creating Styles and Layouts with CSS17

18. ATTACHING A STYLE SHEET Chapter 4: Creating Styles and Layouts with CSS18 Your pages should look like this now!

19. USING PRE-BUILT CSS LAYOUTS Expression Web will provide blank pages that use a CSS layout that includes DIVS for all page elements that are defined by ID-based styles. When you use CSS to create a new page, two files wil open, an HTML page and a style sheet that includes the ID-based styles, which are blank. Do pages 271-280 Chapter 4: Creating Styles and Layouts with CSS19

20. ATTACHING MULTIPLE STYLE SHEETS We want the artist.html page to be consistent with the other site pages, right? We have to attach multiple style sheets, the galisteo_styles.css, page_styles.css and artist_styles.css. Do pages 280-282. See next slide for what the artist page should look like. Chapter 4: Creating Styles and Layouts with CSS20

21. ATTACHING MULTIPLE STYLE SHEETS Chapter 4: Creating Styles and Layouts with CSS21

22. ADDING A HYPERLINK Do pages 283-286 Chapter 4: Creating Styles and Layouts with CSS22

23. ORGANIZING STYLE SHEETS ORGANIZATION is very important! Keeping all style sheets in one folder (as we do images) makes them easy to locate. Do pages 284-286 Chapter 4: Creating Styles and Layouts with CSS23

24. CREATING A CSS REPORT Creating a CSS report shows you errors, etc. DO NOT FIX the errors you see here that relate to unused styles...they may be used for future pages and content. Do pages 286-289 Chapter 4: Creating Styles and Layouts with CSS24

25. CREATING A CSS REPORT Chapter 4: Creating Styles and Layouts with CSS25

26. PREVIEWING THE SITE Chapter 4: Creating Styles and Layouts with CSS26

27. CH 4 IS DONE!! Homework Who wants to be a Computer Genius? www.scsite.com/ew3/learn Labs Create an EXTREME SPORTS web site that has at least 3 pages, and 3 different style sheets. Style sheets 1 for layout of pages 1 for main division (header, body, nav, footer) 1 for anything else (certain page, etc.) Be creative !! Chapter 4: Creating Styles and Layouts with CSS27