57
Cascading Style Sheets Part 1 Presentation by Audrey Altman Exercises from CSS: The Missing Manual
| Date post: | 16-Jan-2016 |
| Category: |
Documents |
| Upload: | curtis-marshall |
| View: | 213 times |
| Download: | 0 times |
Cascading Style Sheets
Part 1
Presentation by Audrey AltmanExercises 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: http://www.csszengarden.com/
Today’s agenda
1. How to make CSS-friendly HTML2. CSS syntax3. Cascades4. Formatting words and letters
HOW TO MAKE CSS-FRIENDLY HTMLLesson 1
In the dark days before CSS, I had to use workarounds to make my HTML look decent…
…<table> tags for layout
…<h2> instead of <h1> to avoid giant headings
…special tags like <font> <b> <i> <br />
…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 <table> for actual data tables
• Use <div> and </div> to subdivide page into logical elements
• Use <span> and </span> for inline divisions
• Use <h1> only once per page; use <h2> for subheadings; use <h3> for sub-subheadings, etc.
• Use <strong> instead of <b>
• Use <em> instead of <i>
• Use <br /> 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. <body>– Objects are organized in a tree structure
DOM Tree Structure<html> <head> <title>HTML and CSS </title> </head> <body> <h1> HTML and CSS </h1> <p> I’m a lean, mean HTML machine! </p> <p> My CSS will make my HTML <em> so beautiful! </em></p> </body></html>
html
head
title
body
h1 p p
em
Document Object Model (DOM)
• Everything in an HTML document is divided into objects – Objects are expressed with tags, ie. <body>– 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 SYNTAXLesson 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 <head> section
<html> <head> <title> The Reddest Radish </title> <style type=“text/css”> h1 { color:red; font-weight: bold; } …
</style> </head>
External Stylesheet(good for styling multiple pages)
• Stylesheet goes in a separate CSS file that is referenced in the <head> section
<html> <head> <title> The Reddest Radish </title> <link rel=“stylesheet” type=“text/css” href=“mystylesheet.css” /> </head>
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
<html> <head> <title> The Reddest Radish </title> </head>
<body> <h1 style=“color: red; font-weight:bold;”> The Reddest Radish </h1>
…
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
<body> <h1> The Reddest Radish </h1> <p> Once upon a time… </p> <p> The rabbit was hungry… </p> <p> Copyright 2012 </p></body>
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.
<body> <h1> The Reddest Radish </h1> <p class= “special”> Once upon a time… </p> <p class=“special”> The rabbit was hungry… </p> <p> Copyright 2012 </p></body>
.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 (#)
<body> <h1> The Reddest Radish </h1> <p> Once upon a time… </p> <p> The rabbit was hungry… </p> <p id=“copyright”> Copyright 2012 </p></body>
#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
strong
ul
li
li
li
HTML family tree
body
h1
strong
div
h2
strong
p
strong
ul
li
li
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
strong
ul
li
li
li
strong {background-color: red;}
body
h1
strong
div
p
strong
p
strong
ul
li
li
li
p strong {background-color: red;}
body
h1
strong
div class = “intro”
p class = “intro”
span
p
span
span
.intro {background-color: red;}
.intro span {background-color: red;}
body
h1
strong
div class = “intro”
p class = “intro”
span
p
span
span
div .intro span
body
h1
strong
div class = “intro”
p class = “intro”
span
p
span
span
div.intro span
body
h1
strong
div class = “intro”
p class = “intro”
span
p
span
span
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:– http://www.w3schools.com/cssref/default.asp – Click on any property to learn about its possible
attributes
CASCADESLesson 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
<body> <h1> <strong> BOOGIE! </strong> </h1></body>
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 point10 points
100 points
1000 points
What color will the paragraph be?
<p class=“special” id=“copyright”> Copyright 2012 </p>
p { color: black;}.special { color: blue;}#copyright { color: green;}
Now what color will the paragraph be?
<p class=“special” id=“copyright” style=“background-color:red”> Copyright 2012 </p>
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.
<p class=“intro”> I want a bagel. <span class=“shout”> NOW! </span></p>
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 LETTERSLesson 4
Open css_practice_1.html
• Note how the programmer divided the page into logical sections with <div> tags, and labeled these sections with id’s.
Code: set up stylesheets
• Link to external stylesheets– In the head, under the title, write:<link href="reset.css" rel="stylesheet" type="text/css" /><link href="layout.css" rel="stylesheet" type="text/css" />
• Create internal stylesheet– After the link to the external stylesheets, write:<style type=“text/css”>
</style>
• 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: headersh1 {
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:<p class="byline">By Jean Graine de Pomme </p>
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. Layout2. Navigation3. Images4. Tables5. Integrating CSS and JavaScript
![Fractional Cascading Fractional Cascading I: A Data Structuring Technique Fractional Cascading II: Applications [Chazaelle & Guibas 1986] Dynamic Fractional.](https://static.documents.pub/doc/80x56/56649ea25503460f94ba64dd/fractional-cascading-fractional-cascading-i-a-data-structuring-technique-fractional.jpg)
