1. Online Chapter 1 4 th Edition

2.  Review elements  Whitespace handling  Rule structure  Linking to an external style sheet  Alternate Style Sheets  Media Specific Style Sheets  Using @import Declaration  Reviewing some HTML5 (header)

3.  Elements are like little labels that describe the different parts of a web page.  It is customary to type your element names in all lowercase, although HTML5 isn’t picky here. But it is rare to find someone coding in uppercase.

4.  The basis of document structure.  In CSS elements take two forms: ◦ Replaced  Where the elements content is replaced by something that is not directly represented by document content. Ex: ◦ Nonreplaced  Their content is presented by the browser inside a box generated by the element itself.  Ex: Hi There

5. Each rule has two fundamental parts: ◦ Selector ◦ Declaration block (can have more than one)  Property  Value h1 { color: red; } Selector propertyvalue

6.  CSS treats spaces like HTML does  Spaces not recognized between rules or within rules  Blank lines will not have any programming effect

7.  Generates an element box within a line of text and do not break up the flow of the line.  Difference between inline elements in HTML vs. CSS ◦ Html restricts block-level elements from descending from inline-level elements. ◦ CSS there is no restriction on how display roles can be nested.

8. Remember this? ◦ Placed inside the head section of the HMTL document ◦ Must not be placed inside any other document. ◦ This statement causes the web browser to locate and load the style sheet sheet1.css ◦ The default value for the media attribute is all (some coders like to be explicit and by including this attribute.)

9.  Rel stands for “relation” – The relation is stylesheet  Type is always set to text/css ◦ Describes the type of data that will be loaded using the link tag  Href the value is the URL of your style sheet  Media rules regarding media types with each rule separated by a comma.

10. …  The style element is one way to include a style sheet  Style should always use the attribute type The value of the type is text/css (the same as the link element)  Should be closed with a closing  Referred to as the embedded style sheet or document style sheet

11.  There can be more than one linked style sheet associated with a document.  By linking more than one style sheet, the browser will combine the rules from each and apply them all to the document.  In our example we have a style sheet named: base.css preferred.css alternative.css (That would be three different style sheets)

12.  Allows the user to pick the style they want to use, and the browser would switch from one style sheet to another.  The user would select from the menu bar Use style and the user would pick the style they would want. Go to menu bar ~choose View (firefox) Page Style Choose options  Allows you to provide different themes for your site.

13. … Palau de la Musica

14. Create the following:  Use a base set of persistent styles that are applied regardless of the visitor’s preference.  This is the base.css style sheet. Img { border: 4px solid red; }

15.  Will loaded by default in addition to base.css When the visitor jumps to the page. Img { border-style: dashed; } (This was identified as the preferred style sheet in the link statement within the head section.)

16.  This style sheet is named alternate.css but you can name it what you want, as with the other style sheets above. Img { border-style: dotted; }

17.  You can designate a style sheet to be used only for a particular output, perhaps only for printing or only for viewing onscreen in the browser.  Allows the author to choose style sheets based on features of a given media type.  Media descriptors are used.  Three most common ◦ all, screen and print (The default value for the media attribute is media all, so declaring media =“all” is redundant. Some coders prefer to be explicit by always including media=“all”)

18. … Palau de la Musica … …

19. /*Print Style Sheet*/ @media print { img { display: none; } p { color: black; } Shows no images i.e. turns them off black and text

20.  It is not unusual for more than one style rule to apply to the same element, particularly on larger sites that require more effort to manage CSS.  So… a style’s location can break a tie BASIC RULE: the later the style appears, the more precedence or importance it has….

21.  Another way to load an external style sheet to the HTML document.  By placing @import url(sheets2.css) at the beginning of the style sheet that contain them, and there are no other constraints.  There can be more than one @import statement  Cannot use alternative style sheets

22.  Found inside the style container and must be placed before the other CSS rules or it won’t work. @import url(styles.css); /*import comes first */ H1 {color: gray;}

23. /*This is a CSS comment */ Use to make your coding clearer! Use to point out information! Use to help someone else understand your coding. You may start comments on their own line, inside a declaration block, or after a rule.

24. /* ----------------------------------------------------------------------- */ /* ----- This style sheet contains a variety of example CSS comments ----- */ /* ----------------------------------------------------------------------- */ /* :::: From Figure C (p.183) :::: */ /* GLOBAL NAVIGATION ------------------------------- */ /* MAIN CONTENT ------------------------------- */ /* SIGN-UP FORM ------------------------------- */ /* PAGE FOOTER ------------------------------- */

25.  Locate the reference to an external style sheet in the html5 page and click the file name. ◦ The style sheet should show up in a new browser window. You can copy it from there if you like!

26.  Use the CSS validator which will flag some syntax errors. Validate first! Then: ◦ Make sure to separate properties from their value with a colon : (not an equal sign as in HTML5) ◦ Be sure to complete each property/value pair (a declaration) with a semi-colon ; ◦ Don’t add spaces between numbers and their units ◦ Don’t forget to close your curly braces ◦ Don’t forget to close the closing

27.  CSS3 is the natural extension of the versions of CSS that preceded it.  CSS3 is more powerful than earlier versions of CSS and introduces numerous visual effects, such as drop shadows, text shadows, rounded corners, and gradients.

28. 

29.  The belongs in the head section and always after the meta element that specifies the character encoding.  Recommended title length is 60 characters including spaces. Because search engines usually cut them off in their results around there. Browsers display a varying amount of characters but no more than 60 in the title bar at the top of the browser before cutting off the text.

30.  Header element is one of four sectioning content elements  A page can have multiple header elements and their meaning can vary. ◦ A header at or near the top of the page may represent the header for the whole page. ◦ Often the head can include the pages main navigation and logo.

31.  Links within the nav may point to content within the page, to other pages or resources.  Use nav for only the documents most important groups of links, not all of them

32.  The real importance of external style sheets is the way in which they allow authors to put all of a site’s presentation information in one place, and point all of the documents to that place.