1 css background. 2 the big picture browsers follow an object model –first it creates a dom...
TRANSCRIPT
![Page 1: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/1.jpg)
1
CSS Background
![Page 2: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/2.jpg)
2
The Big Picture• Browsers follow an object model
– First it creates a DOM (document object model)
– Interprets the HTML and creates all page elements (sub objects)
• Uses CSS to apply properties to each sub-object in the DOM (where the CSS designates a property to apply)
• CSS stylesheets were first called “property sheets”
![Page 3: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/3.jpg)
3
CSS
• CSS = Cascading Styles Sheets
• A way to style HTML. – Whereas the HTML is the content, the
style sheet is the presentation of that document
• Everything was once organized with tables…
![Page 4: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/4.jpg)
4
Inspiration
• Zen Garden– http://www.csszengarden.com/
• Note Browser differences
![Page 5: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/5.jpg)
5
Why CSS
• Clean up the mess
• Most (older) sites use tables and font tags– None of which conveys semantic meaning
<font size=“+3” face = “helvetica” color = “red”>PageTitle</font>
• What good is a font tag to a speech-synthesis browser?
![Page 6: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/6.jpg)
6
Why CSS
• Search engines
• Increase accessibility
• Easier to maintain – Easier to make site wide changes
• Can be used site wide
![Page 7: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/7.jpg)
7
HTML vs. CSS<h2><font color=“purple”>This is purple</font><h2>
• This has to be applied EACH time
VS.
h2{color:purple;}
• This is universal to all selectors named h2
![Page 8: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/8.jpg)
8
Cascading…what does that mean?
• Provisions for conflicting rules• Priority:
– Browser default – External style sheet – Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element) – So - an inline style
• (inside an HTML element) has the highest priority – which means that it will override a style declared inside the
<head> tag, in an external style sheet, or in a browser (a default value).
![Page 9: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/9.jpg)
9
Cascading…what does that mean?• Provisions for conflicting rules (external)
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="../stylesheets/headerlinkstyles_subpages.css" rel="stylesheet" type="text/css" /><link href="../stylesheets/portfoliobase.css" rel="stylesheet" type="text/css" /><link href="../stylesheets/portfoliodescription.css" rel="stylesheet" type="text/css" />
<body> ---- this is where your webpage goes</body>
</html>
![Page 10: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/10.jpg)
10
Why CSS….more reasons• CSS = stylistic language• HTML = structural language• W3C – body that debates web standards
– Is removing stylistic elements from HTML– XHTML (current accepted standard)
• Some older stylistic HTML will be rendered obsolete and not supported
• <font>, <u>, <strike>, <center>• HTML might eventually be replaced by XML
– More powerful, more flexible –easily localized
– Does not declare styles
![Page 11: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/11.jpg)
11
XHTML is a W3C Recommendation
• XHTML 1.0 became a W3C Recommendation January 26, 2000.
![Page 12: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/12.jpg)
12
CSS and XHTML
• Web 2.0 – “Web 2.0 doesn't have a hard boundary,
but rather, a gravitational core”• http://www.oreillynet.com/pub/a/oreilly/tim/news
/2005/09/30/what-is-web-20.html
• CSS and XHTML is the 2.0 standard
![Page 13: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/13.jpg)
13
XHTML
![Page 14: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/14.jpg)
14
XHTML
• XHTML – EXtensible HyperText Markup Language – Aimed to replace HTML – Almost identical to HTML 4.01 – Stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application – Therefore follows the rules of XML
![Page 15: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/15.jpg)
15
Why XHTML?• We have reached a point where many pages
on the WWW contain "bad" HTML.– The following HTML code will work fine if you view
it in a browser, even if it does not follow XML rules:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
![Page 16: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/16.jpg)
16
XML• XML = markup language where everything has to be marked up
correctly– Results in "well-formed" documents.
• XML was designed to describe data and HTML has evolved a tool to display data.
• Different browser technologies– Internet on computers– Internet on mobile phones and hand helds.
• Do not have the resources or power to interpret a "bad" markup language.
• HTML + XML (and their strengths) = markup language that is useful now
– XHTML pages can be read by all XML enabled devices – AND while waiting for the rest of the world to upgrade to XML supported
browsers: XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!!
– and forward compatible
![Page 17: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/17.jpg)
17
XHTML
• Follows the rules of XML– elements must be properly nested – elements must always be closed – elements must be in lowercase – documents must have one root element
![Page 18: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/18.jpg)
18
XHTML elements must be properly nested
Wrong<ul>
<li>Coffee</li> <li>Tea
<ul> <li>Black tea</li> <li>Green tea</li>
</ul> <li>Milk</li></ul>
Correct<ul>
<li>Coffee</li> <li>Tea
<ul> <li>Black tea</li> <li>Green tea</li>
</ul> </li>
<li>Milk</li></ul>
![Page 19: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/19.jpg)
19
XHTML elements must always be closed
• Wrong<p>This is a paragraph
<p>This is another paragraph
• Correct<p>This is a paragraph</p>
<p>This is another paragraph</p>
![Page 20: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/20.jpg)
20
XHTML elements must be in lowercase
• Wrong<BODY>
<P>This is a paragraph</P>
</BODY>
• Correct<body>
<p>This is a paragraph</p>
</body>
![Page 21: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/21.jpg)
21
XHTML documents must have one root element
• All XHTML elements must be nested within the <html> root element. – All other elements can have sub (children)
elements. – Sub elements must be in pairs and
correctly nested within their parent element.
– The basic document structure is:<html>
<head> ... </head><body> ... </body>
</html>
![Page 22: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/22.jpg)
22
CSS Overview
![Page 23: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/23.jpg)
23
Browsers (Stats)• All major browsers support Cascading Style
Sheets• Web Statistics and Trends – Sept 2007*
• http://www.w3schools.com/browsers/browsers_stats.asp• Also see: http://www.upsdell.com/BrowserNews/stat.htm
IE 7 IE 6 IE 5 Fire
Fox
Mo-
zilla
Safari other
2006 3.1% 54.5% 3.2% 28.8% 2.4% N/A 1.7%
2007 20.8% 34.9% 1.5% 35.4 % 1.2% 1.6% 1.5%
![Page 24: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/24.jpg)
24
CSS
• The CSS syntax is made up of three parts: – Selector
• Three types– ID (#nameOfYourChoice or HTML)– Class (. nameOfYourChoice or HTML)– HTML(<p>, <a>, <body>…etc)
– Property – Value
![Page 25: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/25.jpg)
25
CSS• 'properties' are inside curly brackets (called braces)
– take the form of words such as color, font-weight or background-color.
• A value is given to the property following a colon and semi-colons separate the properties.
This is a selector #centerPanel {This is a property position:relative; <-Value followed by ;
background:#dff3fd;margin-left:auto;margin-right:auto;width:1000px;height:100%;z-index:1;
Curly Bracket (Brace) }
![Page 26: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/26.jpg)
26
External vs. Internal Stylesheets
• Can be part of the page itself OR
• Can be brought in as a link– I always start with them internal – and then
usually externalize
![Page 27: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/27.jpg)
27
Inserting Style Sheets
• External<head>
<link rel="stylesheet" type="text/css“
href="mystyle.css" />
</head>
![Page 28: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/28.jpg)
28
Inserting Style Sheets• Internal
<head><style type="text/css">
hr {color: sienna;
}p {
margin-left: 20px;}body {
background-image: url("images/back40.gif");}
</style>
</head>
![Page 29: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/29.jpg)
29
Selectors – rule of thumb
• .class selectors for general use
• #ID selectors for specific use
• You can group selectors– Separate each selector with a comma.
h1,h2,h3,h4,h5,h6 {color: green
}
• Much more to know here…buy a good book
![Page 30: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/30.jpg)
30
Class SelectorsIn the Style sheet:
p.right {text-align: right}p.center {text-align: center}
In the HTML:<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
![Page 31: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/31.jpg)
31
Selectors
• Do NOT start a class or ID name with a number!
• It will not work in Mozilla/Firefox.
![Page 32: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/32.jpg)
32
Pseudo Classes• link is for an unvisited link.
a:link { color: black; font-size: 0.8em; font-family: Verdana;}
• visited is for a link to a page that has already been visited. a:vlink { color: black; font-size: 0.8em; font-family: Verdana;}
• active is for a link when it is gains focus (for example, when it is clicked on). a:active { color: black; font-size: 0.8em; font-family: Verdana;}
• hover is for a link when the cursor is held over it.a:hover { color: #2b5978; font-size: 0.8em; font-family: Verdana;}
![Page 33: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/33.jpg)
33
Adding Comments
/* This is a comment */
p{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
![Page 34: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/34.jpg)
34
Fonts and CSS
![Page 35: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/35.jpg)
35
Font-family• The font you specify must be on the user's computer
– little point in using obscure fonts.
• ‘Safe' fonts are few– Common: arial, verdana and times new roman - but you can
specify more than one font, separated by commas. – If the user does not have the first font you specify, the browser will
go through the list until it finds one it does have. – This is useful because different computers sometimes have
different fonts installed. • font-family: arial, helvetica, for example, is used so that similar fonts are
used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).
• Note: if the name of a font is more than one word, it should be put in quotation marks– font-family: "Times New Roman".
![Page 36: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/36.jpg)
36
Font Family#centerPanel {
position:relative;font-family:Arial, Helvetica, sans-serif;background:#dff3fd;margin-left:auto;margin-right:auto;width:1000px;height:100%;
}
![Page 37: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/37.jpg)
37
Font Size• Be careful with this….• Avoid Pixels – inconsistent display (esp. on Macs)
p {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
• pts and picas okay…but really designed for printp {
font-family:Arial, Helvetica, sans-serif;font-size:12pt;}
• ems are reccomended– Relative font measurement wher one em = the hieght of M in
the default user size
![Page 38: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/38.jpg)
38
ems• 100 % user’s default
p {font-family:Arial, Helvetica, sans-serif;font-size:1em;}
• 90%p {
font-family:Arial, Helvetica, sans-serif;font-size:0.9em;}
• 110%p {
font-family:Arial, Helvetica, sans-serif;font-size:1.1em;}
![Page 39: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/39.jpg)
39
Font Weight• Bold or not
– In practice this usually only works as font-weight: bold or font-weight: normal.
• In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900,
• Many browsers will not support (safest to stick with bold and normal
p {
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight: bold;
}
![Page 40: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/40.jpg)
40
Font Style
• This states whether the text is italic or not. – It can be font-style: italic or font-style:
normal.p {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight: bold;
font-style:italic;
}
![Page 41: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/41.jpg)
41
Font Decoration• This states whether the text is underlined or not. • text-decoration: overline, which places a line above the text.
p {font-family:Arial, Helvetica, sans-serif;font-size:1em;font-weight:bold;font-style:italic;text-decoration:overline;
}
• text-decoration: line-through
• text-decoration: underline should only be used for links because users generally expect underlined text to be links.
• This property is usually used to decorate links, such as specifying no underline with text-decoration: none.
![Page 42: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/42.jpg)
42
Sample body {
font-family: arial, helvetica, sans-serif; font-size: 0.8em; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
a { text-decoration: none; }
strong { font-style: italic; text-transform: uppercase; }
![Page 43: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/43.jpg)
43
Text Spacing• The letter-spacing and word-spacing properties are for spacing
between letters or words. The value can be a length or normal.
• The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.
– number (which specifies a multiple of the font size, so '2' will be two times the font size, for example), a length, a percentage or normal.
• The text-align property will align the text inside an element to left, right, center or justify.
p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5; text-align: center; }
![Page 44: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/44.jpg)
44
Spans and Divs(Tying this all together)
![Page 45: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/45.jpg)
45
<span> and <div>
• "dummy" tags that don't do anything in themselves. – Excellent for carrying CSS style
![Page 46: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/46.jpg)
46
<Span>• <SPAN> is an "inline-tag" in HTML, meaning
that no line breaks are inserted before or after the use of it.
• Use sparingly
• Style.hilite{
background-color: #FFFFCC;
}
• HTML<p> These <span class=“hilite”>stuffed
peppers</span> are lovely.<p>
![Page 47: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/47.jpg)
47
<div>
• Dreamweaver calls them layers– z-index:1 – Think of them as a container– Your page will now be composed of divs
which will be described by styles– Often called a “box model”
![Page 48: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/48.jpg)
48
Key Properties to know
![Page 49: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/49.jpg)
49
Positioning
• Describe the placement of the divs– static– absolute– relative– fixed– inherit
![Page 50: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/50.jpg)
50
Absolute Positioning• Removed from the document flow• Dreamweaver default• Calculated from the upper left corner of
the page – Unless the div is defined inside another
div, in which case it will be calculated from the upper left corner of the parent layer.
• Assumes a fixed design– Not accessible
• Good Servant….bad master
![Page 51: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/51.jpg)
51
Relative
• The position will be calculated relative to the element that comes before it– Defaults to under the element before– Use a “float” property to place side by side
• Remains in the flow of the document
• Good for accessibility
• Good master…fine servant
![Page 52: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/52.jpg)
52
Margin and Padding
• A margin is the space outside of the element
• Padding is the space inside the element.
![Page 53: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/53.jpg)
53
Property Examples– All from http://www.w3schools.com/
![Page 54: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/54.jpg)
54
Backgrounds• Set the background color
This example demonstrates how to set the background color for an element.
• Set an image as the backgroundThis example demonstrates how to set an image as the background.
• How to repeat a background image only verticallyThis example demonstrates how to repeat a background image only vertically.
• How to repeat a background image only horizontallyThis example demonstrates how to repeat a background image only horizontally.
• How to place the background imageThis example demonstrates how to place the image on the page.
• How to set a fixed background imageThis example demonstrates how to set a fixed background image.
– All from http://www.w3schools.com/
![Page 55: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/55.jpg)
55
Borders• Set the style of the four borders
This example demonstrates how to set the style of the four borders.• Set different borders on each side
This example demonstrates how to set different borders on each side of the element.• Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.• Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.• All the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration.
• All the left border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the left border in one declaration.
• All the right border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the right border in one declaration.
• All the width of the border properties in one declarationThis example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.
• All the border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.
– All from http://www.w3schools.com/
![Page 56: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/56.jpg)
56
Lists• The different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS.
• The different list-item markers in ordered listsThis example demonstrates the different list-item markers in CSS.
• Set an image as the list-item markerThis example demonstrates how to set an image as the list-item marker.
• Place the list-item markerThis example demonstrates where to place the list-item marker.
• All list properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for a list in one declaration.
– All from http://www.w3schools.com/
![Page 57: 1 CSS Background. 2 The Big Picture Browsers follow an object model –First it creates a DOM (document object model) –Interprets the HTML and creates all](https://reader034.vdocuments.mx/reader034/viewer/2022050714/56649eeb5503460f94bfca11/html5/thumbnails/57.jpg)
57
Text Margins• Set the left margin of a text
This example demonstrates how to set the left margin of a text.• Set the right margin of a text
This example demonstrates how to set the right margin of a text.• Set the top margin of a text
This example demonstrates how to set the top margin of a text.• Set the bottom margin of a text
This example demonstrates how to set the bottom margin of a text.
• All the margin properties in one declarationThis example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.
– All from http://www.w3schools.com/