css the definitive guide chapter 2 & review of some things in html5

CSS The Definitive GuideChapter 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 sideDeclaration ~ 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

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8" /><title>Antoni Gaudí - Introduction</title><link rel="stylesheet" href="name.css" />

</head><body><article id="gaudi">

<h1>Antoni Gaudí</h1> <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible

architecture.</p><p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/"

rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>

<section class="project"><h2 lang="es">La Casa Milà</h2><p>Gaudí's work was essentially useful. <span lang="es">La Casa

Milà</span> is an apartment building and <em>real people</em> live there.</p></section><section class="project">

<h2 lang="es">La Sagrada Família</h2><p>The complicatedly named and curiously unfinished Expiatory Temple

of the Sacred Family is the <em>most visited</em> building in Barcelona.</p></section>

</article>

</body></html>

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.La Casa MilàGaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there.La Sagrada FamíliaThe 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.

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 sheetsExample: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 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 whichconveys the meaning of the content to whichit’s applied rather than calling it red.

It’s best to avoid creating a class name thatdescribes how something looks, because youmight change the styles later, like making the text green in this case.

Classes add semantic value to your HTML5 likeelements 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í'sincredible architecture.Barcelona celebrated the 150th anniversary of Gaudí's birth in 2002.La Casa MilàGaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there.La Sagrada FamíliaThe complicatedly named and curiously unfinished Expiatory Templeof 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 Styles 26

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

Sheets 28

Content placed in a footer generally has to do with the company’s address, copyright, or contact information


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

Sheets 33

Please update your styles with groupings. You must provide three groupings somewhere in your code.

1) Group selectors2) Group declarations3) 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. <Header><nav><article><section><footer>

css the definitive guide chapter 2 & review of some things in html5

Documents