- CSS 2.1 for OJUG
- Purpose of CSS
- Separation of
- structure (HTML)
- presentation (CSS)
- Benefits
- 1. Use the same XHTML with different style sheet to multiple user agents
- include cell phone, PDA, & future apps
- 2. Lightweight deilvery -- faster load
- browsers can cache a CSS file and use the values over and over
- 3. XHTML & CSS code can be validated
- 4. Meet legal ADA 506 Americans with Disabilities Act, section 506
- 5. Modular code maintenance resulting in less effort
- early web, tables were co-opted for layout instead of data display
- uses tables to deliver data, not format
- WYSIWYG tools added complicated markup
- editing by hand was painful
- 1. Use the same XHTML with different style sheet to multiple user agents
- XHTML
- well formed HTML
- structured correctly
- valid HTML
- no meaningless tags
- tags closed properly
- no deprecated tags
- compliance rules
- DOCTYPE
- Strict
- Transitional
- Frameset
- Or Else
- Quirks mode is actived
- DOCTYPE
- Validator -- can verify code before
- http://jigsaw.w3.org/css-validator/
- browsers intrepret invalid code as they will
- XML simply won't display invalid code
- well formed HTML
- Roll your Own
style
- HTML is a specific set of markup tags with default values for their attributes or properties depending on the browser
- actually, any HTML style can be redefined
- CSS lets you augment HTML
- 1. creating your own style for a specific tag
- 2. adding new special styles such as first-letter, first-line, etc
- 3. allowing one of your styles designs to Cascade or combine with another style or HTML markup
- Your set of styles can be put a Style section of your page and then moved to a linked CSS file to be shared
- CSS Working Group
- generate a set of Recommendations
- this mindmap is for CSS 2.1
- browser makers
- implement and intrepret recommendations differently
- code will not be rendered the same
- code requires testing with several browsers
- specific hacks may be required to generalize the code
- additionally, a browser has it's own versions which may change
- eg, IE changed it's box intrepretation in release 6.0
- in IE 7.0, there is a removal of the parent * level to html which the "Holly" hack uses to discriminate M/S IE
- IE 6 and below has it's own box model
- Separation of
basic
selector syntax- O
- selectorName {
property: value; property2: value; ...;
/* comment */
}
- a space is allowed after the colon
- the selectorName is a unique name
- properties & values vary
- selectorName {
property: value; property2: value; ...;
/* comment */
}
- S
- p {text-indent: 3em}
- selectorName
p
- an HTML element
property
text-indent- indents the first line in a block
- value
3em- An “em” is a relative unit of measurement defined as the point size of the relevant font
- selectorName
- p {text-indent: 3em}
- O
-
Basic Selectors- HTML_tag_Name
- O
- selected by specifying just the tag name
- M
- <body> <p>paragraph 1st line, indented 9 px, color yellow, lines 2 + not indented </p> </body>
- S
- p { color: yellow; background-color: #AAAAFF; text-indent: 9px; width: 100px; }
- C
-
paragraph 1st line, indented 9 px, color yellow, lines 2 + not indented
-
- O
- .class_Name
- O
- use for elements used multiple times
- selected with class="..." in the HTML tag
- use for the main sections of your code
- code
with a class
- S
- .css {color:blue} .html {color:rgb(170,0,255)}
- M
- <body> <code>just a plain code tag: public static void main</code><br> <code class=css>code tag with class=css: public static void main</code><br> <code class=html>code tag with class=html: public void static main </code><br>
- C
-
just a plain code tag: public static void main
code tag with class=css: public static void main
code tag with class=html: public void static main
-
- S
- span
with a class
- O
- a span "highlight"class is created which
can be applied to any span that references
it with a class="highlight"
- a span "highlight"class is created which
can be applied to any span that references
- S
- span.highlight {background-color: yellow}
- M
- <p> <span class="highlight"> span tag</span> included yellow background</p>
- C
-
span tag included yellow background<
-
- O
- h4
with a class
- O
- headings specified: one with a class, redArial, and the default/
- S
- h4.redArial{font-family: verdana; color: red;}
- M
- <h4 class="redArial"> this is a font-family for heading h4, of class arial</h4> <h4> this is a font-family for heading h4, no class</h4>
- C
-
this is a font-family for heading h4, of class arial
this is a font-family for heading h4, no class
-
- O
- O
- #IDName
- O
- defined with a hash symbol or pound sign as the 1st character #codeBlue -- codeBlue is an ID
- selected by specifying ID=".." in the HTML ta
- use to identify a single major element on a page
- Only a single instance of an ID can be in a page
Strict XHTML
whereas, a class can appear many times - only one element instance in the document tree
- a javascript can target a tag, but may get corn_fused if more than one on the page
- this rule is not always enforced by browsers
- O
- S
- #indent{text-indent:6px; color:blue;}
- M
- <body> <p>plain paragraph tag w/o indent: public static void main</p> <p id="indent">paragraph with ID attribute of 'ind6px' </p> </body>
- C
-
plain paragraph tag w/o indent: public static void main
paragraph with ID attribute of 'ind6px'
-
-
other selectors not generally accepted by all user agents
- O
- KISS is the guiding principle here
- yes it is possible to figure out every possible use for styling
- but no, it's not easier and therefore more complicated
- multiple browser implementation will be a challenge for the fail operational position
- child
- S1 > S2 {... }
- S2 is a child of S1
- body > anyThing
- li:hover > ul {display:block;}
- S2 is a child of S1
- S1 > S2 {... }
- adjacent sibling
- S1 + S2{...}
- S1 and S2 have the same parent
- body {background-color:blue;} h1 + p {backgorund-color:yellow;}
- S1 immediately precedes S2
- S1 and S2 have the same parent
- S1 + S2{...}
- attribute
- S[attr...] {...}
- lots of ways to select
- W3 link
- img [go.jpg] {background-color:yellow;}
- W3 link
- lots of ways to select
- S[attr...] {...}
- O
- WILDCARD
* {...}
- O
- all elements are modified
- a more specific selector can change this
- S
- * {margin:0; padding:0; font: 1em verdana, arial, sans-serif; }
- resets browser defaults
- * {margin:0; padding:0; font: 1em verdana, arial, sans-serif; }
- O
- Purpose of CSS
- OJUG Ex
Our header
- M
- <body> <div id="headerBackground"> <div id="headerMain"> <ul> <li><a href="contact.asp">CONTACT US</a></li> <li><a href="index.asp">RETURN TO MAIN</a></li> </ul> </div> <!-- end of div headerMain --> </div> <!-- end div headerBackground --> ... </body>
- C
- S
- a {text-decoration: none;} li {list-style-type: none;}
- /* ----------------------------- header div------------------------ */ div#headerBackground { height: 6.2em; background: url('images/back.png') repeat-x; } div#headerMain { /* for the ul and background solid pix */ height: 3.3em; width: 70%; padding-top: 4px; background: url('images/mainheader2.png') no-repeat; margin: 13px; float: left } div#headerMain ul { margin: 20px 0 0 200px; /* indents ul top_left edge of container */ } div#headerMain li { display: block; /* causes the list to align horizontally instead of stack */ float: right; background-color: transparent; /* sets the background of the menu items */ padding: 6px; /* distance from other li */ } div#headerMain li:first-child { border-left: 1px solid white; /* creates dividing lines between the li elements NIE*/ } div#headerMain a:hover { background-color: #559; /* background header links */ } div#headerMain li a { color: #FFF; /* text in anchor */ padding: 0 6px 0 6px; /* list item right/left padding */ font: 0.8em "Century Gothic", sans-serif; /* text in anchor */ } /* =====End of the header and horizontal menu ends here===== */
- C
- M
- box model
- All HTML is rendered with either Inline or block level boxes
- W3C image source
- Sophie
- Mind Map for OJUG presentation by Fred Dearman 2007-01-25