Cascading Style Sheets Part 1 Presentation by Audrey Altman Exercises from CSS: The Missing Manual

CSS is awesome because… It’s easy to write (once you get the hang of it) You can apply one CSS stylesheet to all your pages It’s easy to edit It loads fast It frees you to make you HTML more search engine-friendly (more on that later) It makes your HTML look sooooo good – Examples:

Today’s agenda 1.How to make CSS-friendly HTML 2.CSS syntax 3.Cascades 4.Formatting words and letters

HOW TO MAKE CSS-FRIENDLY HTML Lesson 1

In the dark days before CSS, I had to use workarounds to make my HTML look decent… … tags for layout … instead of to avoid giant headings …special tags like …doing my design and layout in Photoshop, then splicing it back together on my HTML page

Now that I have CSS, my HTML reflects the logical structure of my web page! Only use for actual data tables Use and to subdivide page into logical elements Use and for inline divisions Use only once per page; use for subheadings; use for sub-subheadings, etc. Use instead of Use sparingly Make sure every opening tag has a closing tag This makes my HTML cleaner and search engine-friendly. Oh joy!

Remember that HTML follows the Document Object Model (DOM)…

Document Object Model (DOM) Everything in an HTML document is divided into objects – Objects are expressed with tags, ie. – Objects are organized in a tree structure

DOM Tree Structure HTML and CSS HTML and CSS I’m a lean, mean HTML machine! My CSS will make my HTML so beautiful! html head title body h1pp em

Document Object Model (DOM) Everything in an HTML document is divided into objects – Objects are expressed with tags, ie. – Objects are organized in a tree structure Objects have attributes Objects can be accessed using methods CSS helps you to assign design attributes to objects

CSS SYNTAX Lesson 2

With CSS, we will say two basic things: “Hey computer, I’m CSS!” – Internal stylesheet – External stylesheet – Inline style “Hey computer, make that look like this!” – Declaration block Stylesheets are comprised of declaration blocks. Easy peasy lemon squeezy!

Internal Stylesheet (good for styling one page) Stylesheet goes in the section The Reddest Radish h1 { color:red; font-weight: bold; } …

External Stylesheet (good for styling multiple pages) Stylesheet goes in a separate CSS file that is referenced in the section The Reddest Radish h1 { color: red; font-weight: bold; } … mystylesheet.css

Inline Style (for special occasions) Style is given to a single object in the HTML body using the style attribute The Reddest Radish The Reddest Radish …

CSS Declaration Block Browsers ignore spaces and tabs within the declaration block.

Tag selector Apply style to every instance of an HTML tag on a webpage The Reddest Radish Once upon a time… The rabbit was hungry… Copyright 2012 body { background-color: blue; } h1 { color: red; font-weight: bold; } p { font-family: Arial; }

Class selector Apply style to every HTML object with a given class More than one HTML object can have the same class name In a CSS declaration block, class names start with a period (.) – The period must be followed by a letter – Class names are case-sensitive, and can only consist of letters, numbers, hyphens, and underscores. The Reddest Radish Once upon a time… The rabbit was hungry… Copyright 2012.special { margin-left: 40px; }

ID selector Apply style to a single HTML object Only one HTML object can have a given ID In a CSS declaration block, ID names start with a pound sign (#) The Reddest Radish Once upon a time… The rabbit was hungry… Copyright 2012 #copyright { text-align: center; }

Inheritance Some CSS properties applied to one tag are passed on to nested tags Some properties are not inherited: – borders, padding, and margin, – text decoration – background images – layout properties such as height, width, and float

body h1 strong div h2 strong p ul li HTML family tree

body h1 strong div h2 strong p ul li div {background-color: red;}

Descendent selectors Apply style to selectors within selectors p strong { background-color: red; } //apply style to all strong’s within first headings (h1) red ul li a {background-color: red ;} //apply style to all links (a) within list items (li) within unordered lists (ul) p.intro {color: red;} //apply style to all paragraphs (p) with an “intro” class attribute p.intro {color: red;} //apply style to all tags with an “intro” class attribute within paragraphs (p).intro strong {color: red;} //apply style to all links (a) within tags with an “intro” class attribute

body h1 strong div p strong p ul li strong {background-color: red;}

body h1 strong div p strong p ul li p strong {background-color: red;}

body h1 strong div class = “intro” p class = “intro” span p.intro {background-color: red;}

.intro span {background-color: red;} body h1 strong div class = “intro” p class = “intro” span p

div.intro span body h1 strong div class = “intro” p class = “intro” span p

div.intro span body h1 strong div class = “intro” p class = “intro” span p

Group and universal selectors Group selector – You can apply style to a group of selectors (separated by commas) Universal selector (*) – You can apply a style to every object on the page at once. h1, h2, p,.special, #copyright { font-family: Arial; } * { color: blue; }

Psuedo-Classes a:link selects any link a user hasn’t visited yet. a:visited selects any link a user has clicked before. a:hover lets you change the look of a link as the mouse passes over it. a:active lets you determine how a link looks as a user clicks. It covers the brief nanosecond when someone’s pressing the mouse button, before releasing it.

Properties List of CSS properties: – – Click on any property to learn about its possible attributes

CASCADES Lesson 3

When styles collide… Sometimes elements are affected by more than one style command – Conflicting inheritances: different styles inherited from several generations of ancestors – Conflicting specificity: different tag, class, id, and/or inline styles applied to a single element The cascade governs which style gets precedence when there’s a conflict

Inheritance: who wins? Nearest ancestor beats other ancestors Directly applied style beats all ancestors BOOGIE! body { color: blue; font-size: medium; } h1{ color: green; font-size: large; } strong { color: yellow; } What size will the word “BOOGIE!” be? What color will the word “BOOGIE!” be?

Specificity: who wins? You can use a combination of tag, class, and ID selectors, along with inline style. If your commands are contradictory… Tag selectors are overridden class selectors, ID selectors, and inline style Class selectors override tag selectors, but are overridden by ID selectors and inline style. ID selectors override both tag and class selectors, but are overridden by inline style. Inline style overrides tag, class and ID selectors. 1 point 10 points 100 points 1000 points

What color will the paragraph be? Copyright 2012 p { color: black; }.special { color: blue; } #copyright { color: green; }

Now what color will the paragraph be? Copyright 2012 p { color: black; }.special { color: blue; } #copyright { color: green; }

Tiebreaker: the last style wins When two elements with the same specificity are applied to an element, the last style wins. I want a bagel. NOW! p.shout {color: blue;}.intro span {color: red;} What color will the word “NOW!” be?

The ultimate win Insert !important after any property to shield it from specificity-based overrides. a { color: teal !important; }

Start with a clean slate Browsers apply their own styles to tags. To avoid cross- browser inconsistencies, start with a CSS reset like this one: html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } ol { margin-left: 1.4em; list-style: decimal; } ul { margin-left: 1.4em; list-style: square; } img { border: 0; }

FORMATTING WORDS AND LETTERS Lesson 4

Open css_practice_1.html Note how the programmer divided the page into logical sections with tags, and labeled these sections with id’s.

Code: set up stylesheets Link to external stylesheets – In the head, under the title, write: Create internal stylesheet – After the link to the external stylesheets, write: If each stylesheet assigns a different color to the h1 tag, which style will win?

Open css_practice_1.html in your web browser.

Colors, font-size, font-family colors – can be words, hexidecimals, or RGB color: red; color: #FF0000; color: rgb(255, 0, 0); font-size – Keywords: xx-small, x-small, small, medium, large, x-large, xx-large font-size: small; – Pixels: height of letter font-size: 36px; – Percentages: percentage of base font size determined by browser font-size: 150%; – ems: same as percentage, but 1.0 = 100% font-size: 1.5em; font-family – Not all browsers support all fonts, so it’s good to have some back-ups. List your first choice first, followed by your second, etc. font-family: Tahoma, "Lucida Grande", Arial, sans-serif;

Code: body In the internal style sheet you just created: Note how the body’s descendants inherit these properties. body { color: #102536; font-family: Tahoma, "Lucida Grande", Arial, sans-serif; font-size: 62.5%; }

Margins to adjust space inbetween elements (more on this next week)

Code: headers h1 { font-size: 2.4em; color:#14556B; } h2 { font-size: 1.5em; color: #993; margin-bottom: 5px; } Note how these directly applied styles override the inherited styles from the body.

Formatting words To italicize, add a font-style property – font-style: italic; – font-style: normal; To make text bold, add a font-weight property – font-weight: bold; – font-weight: normal; Letter and word spacing adjusts space between letters and words – use pixels, ems, or percentages – positive or negative numbers – word-spacing: 2em; – letter-spacing: -1px;

Formatting paragraphs Line height adjusts space between lines of text – use pixels, ems, or percentages – line-height: 1.5em; Indent the first line of a paragraph – text-indent: 25px; – text-indent: 5em; Align text to the left, right, or center: – text-align: left; – text-align: center;

Code: paragraphs p { font-size: 1.2em; margin-top: 5px; margin-bottom: 0; text-indent: 2em; line-height: 150%; margin-top: 0; margin-bottom: 5px; } How can we make the byline paragraph look different?

Code: byline.byline { color: #73afb7; font-size: 1.5em; margin-bottom: 10px; font-weight: bold; letter-spacing: 1px; font-variant: small-caps; text-indent: 0; } Add a class attribute to the first paragraph in the content div: By Jean Graine de Pomme Then add the following declaration blocks to your internal stylesheet:

lists List style type changes the look of the bullet for unordered lists, and of the number or letter for ordered lists – list-style-type: circle; – list-style-type: none; List style image allows you to use an image file in place of a bullet or number – list-style-image: url(images/bullet.gif);

We have two unordered lists (ul) on our page. We want to give them different styles. What should we use as selectors in our declaration blocks?

Code: lists #mainNav ul { font-size: 1.2em; list-style-type: none; margin-left: 0; padding-left: 0; text-transform: uppercase; text-align:center; } #mainNav li { margin-bottom: 10px; } #content ul { font-size: 1.2em; list-style-type: square; } #content li { margin-bottom: 5px; }

Next week’s agenda 1.Layout 2.Navigation 3.Images 4.Tables 5.Integrating CSS and JavaScript