CSS The Definitive Guide Chapter 2 & Review of some things in HTML5

 CSS allows rules that are simple to change, edit and apply. Example: h2 {color: gray;} By editing a single line of CSS you can change to colors of all your headings… Lets you the designer focus on the design!

 Look at page 24 ◦ Two fundamental parts: Selector ~ Defines which part of the document will be affected. And is on the left side Declaration ~ Found on the rights side and can contain a combination of CSS property and a value. Examples of elements of an HTML document: P, h3, em, a, h1, h2, h4, etc….

 Can contain one or more declarations  Always formatted as a property followed by a colon and then a value followed by a semicolon. ◦ p {font: medium Helvetica;} ◦ Remember~  the semicolon ; indicates that the declaration has been concluded.  Keywords are separated by a space, taken together they form the value of the property.

The most common criterion for choosing which elements to format is the element’s name or type. As an example you may want to make all h2 elements red. h2 { color: red; } The above is the style for that to happen. The above style is saved to name.css

Antoni Gaudí - Introduction name.css Antoni Gaudí Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. Barcelona celebrated the 150th anniversary of Gaudí's birth in La Casa Milà Gaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there. La Sagrada Família The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the most visited building in Barcelona.

Antoni Gaudí Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. Barcelona celebrated the 150th anniversary of Gaudí's birth in 2002.celebrated the 150th anniversary La Casa Milà Gaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there. La Sagrada Família The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the most visited building in Barcelona. (h2 shows up red)

Not all selectors need to specify an element’s name. If you want to apply formatting to an entire class of elements, regardless of which type of elements have been identified with that class, you’d want to leave the name out of the selector. Also you can choose a group of element names for a selector by using a comma to separate them.

 Lets look at a HTML5 document and the CSS that is applied using class.document

 Separated by spaces  CSS property font is the exception. ◦ Here a forward slash (/) is used to separate two specific keywords. ◦ Example:  H2 {font: large/150% sans-serif;}  The slash separates the keywords that set the element’s font size and line height. This is the only place the slash is allowed to appear in the font declaration.

 You can group selectors!  By placing multiple selectors on the left side of the rule and separating them with a comma, you can have the style on the right effect the multiple selectors given.  Example: ◦ h2, p {color: gray;}

 There is no limit on how many selectors you can group together.  Allows for compacting certain types of style assignments which makes for a shorter style sheet.  Universal selector is displayed as an asterisk * ◦ Example ~ *{color; red;} would make every single element in a document red

 Using semi colons at the end of each declaration is crucial when grouping.  Browsers ignore whitespace in style sheets Example: h1 {font; 18px Helvetica; color: purple; background: aqua;} Or H1 { font: 18px Helvetica; color: purple; background; aqua; }

 Allow you to assign styles in a way that is independent of document elements.  To use them takes planning  Using class selectors is the most common way to apply styles without worrying about the elements involved.  So remember in your html document you need to mark it up so class selectors will work.

Let’s look at the codethe code Below is class.css.about { color: red; }  To select elements to format based on their class: 1. Type. (that is a period) 2. With no intervening space, immediately type classname, where classname identifies the class to which you’d like to apply the styles.

1. Type # (a hash or pound sign) 2. With no intervening space, immediately type id, where id uniquely identifies the element to which you’d like to apply the styles.

.news {color: red; } would effect all elements with the news class, while h1.news {color: red;} would affect only the h1 elements with the news class.

If the css was written instead as #gaudi {color: red;}, only the text in the first article would be red, because it’s the only one with id=“gaudi”. Each id must be unique, so you can’t reuse that id on the article about Luis Domenech I Montaner. Let’s look

The name of the class was about which conveys the meaning of the content to which it’s applied rather than calling it red. It’s best to avoid creating a class name that describes how something looks, because you might change the styles later, like making the text green in this case. Classes add semantic value to your HTML5 like elements do.

 It is recommended to use classes whenever possible, because you can reuse them. But ultimately it is your choice.  Two issues that ID Selectors have: ◦ Their associated styles can’t be reused on other elements. An ID may appear on only one element in a page ◦ They are more specific than class selectors. This means if you ever need to override styling that was defined with an id selector, you’ll need to write a CSS rule that’s even more specific.

The CSS would be: p:first-line { color: red; } The first line in every paragraph would be red.

You can also select just the first letter or first line of an element and then apply formatting to that. Antoni Gaudí Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. Barcelona celebrated the 150th anniversary of Gaudí's birth incelebrated the 150th anniversary La Casa Milà Gaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there. La Sagrada Família The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the most visited building in Barcelona.

HTML5 first letter CSS document for the above HTML5 p:first-letter { color: red; }

 In CSS, you can pinpoint elements depending on their ancestors, their parents, or their siblings.  An ancestor is any element that contains the desired element regardless of the number of generations that separate them.

Review

Chapter 2: Creating and Editing a Web Page Using Inline Styles26

Chapter 2: Creating and Editing a Web Page Using Inline Styles27

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets28

 Content placed in a footer generally has to do with the company’s address, copyright, or contact information Chapter 2: Creating and Editing a Web Page Using Inline Styles30

Chapter 2: Creating and Editing a Web Page Using Inline Styles31

Chapter 2: Creating and Editing a Web Page Using Inline Styles32

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets33

Chapter 2: Creating and Editing a Web Page Using Inline Styles34

Chapter 2: Creating and Editing a Web Page Using Inline Styles35

 Please update your styles with groupings.  You must provide three groupings somewhere in your code. 1)Group selectors 2)Group declarations 3)Universal selector  Please provide an additional information page explaining Class selectors and ID selectors ◦ Must provide content for this additional page ◦ On this page please provide a CSS page that will make the first letter a different color. ◦ Please include one CSS using print media. I will be viewing it in Print preview to determine if you were successful.  Also please use the HTML5 elements we have discussed in class so far on each page.