CSS Back to Basics Sandra Clark Sr. Software Developer Constella Group

Element Selector The most basic selector and the building block for all others. Uses the DOM (Document Object Model) to select a specific HTML tag. Proper HTML Structure correlates to much easier selection of DOM elements for CSS selections. Helps with Ajax and JavaScript as well.

What is Structural or Semantic Markup? Semantics – The study of relationships between signs and symbols and the meanings they convey. When we speak, syntax relates to grammar and punctuation, semantics relates to the meaning we want to convey. In web development, semantics relates to describing what the content is and what it is for. Using HTML/xHTML tags around content, we describe what the content is for.

Difference between Structural and Presentational Markup Structural Markup gives content extra meaning in all circumstances. Structural Markup is cleaner and makes it easier to pinpoint items for CSS. Presentational Markup only gives content visual meaning. Take away the visual cues and content is harder to make sense of. Presentational Markup is messy markup.

DOCTYPESDOCTYPES The W3C Spec requires <!DocType declarations be on the first line of a page. DocTypes specifies to the browser what version of HTML is being used and dictates how the page should be rendered. Any page that relies on CSS must have a doctype.

DocTypesDocTypes Modern browsers still have to support their past mistakes. All modern browsers have two rendering modes  Quirks Mode a)Renders Web Pages and CSS according to its old proprietary past methods. b)Rendering methods differ between browsers and will not work the same way across browsers.  Standards Mode a)Browsers will attempt to render a page and its CSS following the standards specification from the W3C.

Proper HTML and CSS depends on DocTypes Browsers use DocType sniffing to determine what rendering mode they will use. Different DocTypes trigger different rendering modes on different browsers. There are only two DocTypes that trigger standards mode across all browsers  HTML 4.01 strict  xHTML 1.0 Strict (minus the xml prolog) a)The xml prolog throws IE6 into quirks mode.

HeadingsHeadings Headings create topic structure.  They announce a topic and break a document into more easily understood sections. Headings should always be placed in order  follows Never use headings out of order for font size. We can always style a heading with CSS.

Proper Headings Indexed by Search Engines with extra emphasis. Screen Readers  Emphasis Headings  Allow users to skip from heading to heading.

ParagraphsParagraphs W3C says:  “The P element represents a paragraph. It cannot contain block-level elements (including P itself).  “We discourage authors from using empty P elements. User agents should ignore empty P elements.”

Line Breaks Line Breaks Line breaks are probably the most overused element (besides tables) –Use paragraphs instead of using to separate paragraph elements –Use list elements to mark up groupings of element rather than separating those items with –Use CSS to set margins, padding instead of a series of ’s. Use a line break for displaying text that needs breaks in it (such as poetry).

List Elements UL, OL and LI Information that is grouped together (related) are perfect candidates for lists. Ordered Lists (OL) should be used for items that need to be in a specific order Unordered Lists (UL) are for all other lists  Menus and Navigation are usually list items Both Unordered and Ordered Lists contain list items

Definition List Elements Definition Lists are lists that contain a term and a definition.  Terms and Definition  Display Information (Caption and Description)  a) Term b) Definition 

Form Elements Use a label to caption the following form elements ,   The for attribute in the label must correspond exactly to the id attribute in the form element. Caption

Line up Form Elements HTML First Name Last Name CSS label, select, input, textbox { float: left; width: 20em; display: block;} label{text-align: right; width: 10em; padding-top:.2em;padding-right: 1.5em; margin-bottom: 1em;} form br{clear: left;}

Forms Lined Up

Class Selector Currently very overused –Mostly because of improper HTML usage. This is my main Title This is my main title Use classes sparingly and only where the class makes sense for use on more than one element on a page. – label.hidden{}  only affects labels with class of hidden.hidden {}  affects any element with a class of hidden

ID Selector CSS allows us to select to style based on an element’s id attribute. –Every id on a page MUST be unique. –ID’s are the second building block on the road to creating powerful CSS selectors. HTML Structure – Main Navigation CSS Selector –ul#id{ font-size: 90%;}

Div and Span and have no semantic meaning. They are used to group related information together for purposes of positioning. is a block level element is an inline element.

Div and ID’s Div elements with an id attribute provide a perfect way of grouping information for CSS (and anything that depends on the DOM)   div#sidenav{}

Descendant Selector A descendant selector works with the hierarchy of the DOM. It descends into a specified element and the relationships within. 3 rd building block to working with CSS. Space separated list selects the descendants.

Descendant Selector HTML Side navigation link Another link goes here CSS –div#sidenav ul a {color: red;} Selects all links within the ul only.

Descendant Selector

Child Selector Selects a child of an element within the DOM.  The element to be selected must be a direct child. Referenced by the > symbol. Works in Most Browsers including IE7  Does not work in IE6

Child Selector Example HTML Side navigation link Another link goes here CSS –div#sidenav p > a {color: green} Won’t select the link within the paragraph since it is not a direct child of p, it is a grandchild. –div#sidenav strong > a{color: red;} Selects a link which is the child of a strong tag.

Child Selector

Adjacent Sibling Selector Selects the sibling that is adjacent to a selector in the DOM. –Think elements that are at the same level. Uses the + symbol Works in Most Browsers including IE7 –Does not work in IE6

Adjacent Sibling Selector Example HTML Side navigation link Another link goes here Another link CSS –div#sidenav ul + p{ color: blue;} Selects the first paragraph directly after and at the same level as the ul.

Adjacent Sibling Selector

Attribute Selector Allows Selection of the element to be based on a specified attribute. Works in Most Browsers including IE7  Does not work in IE6

Attribute Selector Types Select an element based on an attribute  a[href] a)Selects all element’s with an href attribute Select an element based on an attribute’s value  input[type=“checkbox”]  Selects all elements with a type attribute of “checkbox” Select an element based on an attribute matching a space separated list of values  img[alt~=”Figure”] a)Matches, Select an element based on an attribute’s value in a hyphen separated list, beginning with the specified value  html[lang|=“en”] a)Matches en, en-us,en-uk.

Universal Selector Used to select any element.  Acts as a wildcard symbol. a)div * p  Selects paragraphs that are at least one selector removed (grandchildren) of a div  Does not work in IE6

Pseudo Selectors Used to indicate a state, not in source code. :link, :visited  Refers to links, not to links  Can be combined with :hover, :active and :focus a):link:hover{} – refers to a mouse hover on an unvisited link b):visited:active{} – refers to a selection of a previously visited link. c):link:focus{} – refers to the focus onto a link.

:first-child:first-child The first-child pseudo selector allows the ability to choose the first of a group. #col2 ul li:first-child a:first-child{}  Selects the first link in the first list element of an unordered list in col2.

Using them together Test Site BP.COM –Actual site using only HTML and CSS but in a nonstructural way. No semantics. Code looks like it was simply changed from a table based layout. Original was altered for this experiment –White Space was removed. –All CSS actually used was moved to its own stylesheet. –All JavaScript was removed.

BP.COM UnStructured Bporig.html – Unstructured HTML –xHTML 1.0 Transitional – 442 Errors and Warnings from Validation. –377 lines of Code Bporig.css – Supporting CSS –464 lines of Code –7 element rules –51 Class rules –9 ID rules

BP.COM ReStructured Bpstruct.html – Structured HTML –xHTML 1.0 Strict – 1 Error from Validation. Name attribute in Form not supported. –263 lines of Code Bporig.css – Supporting CSS –358 lines of Code –8 element rules –5 Class rules –47 ID rules ie.css –Only loaded for Internet Explorer –25 lines –1 class rule –5 ID rules

BP.comBP.com Statistics  Validation Errors – vastly Reduced!  HTML Size Reduced 30%  CSS Size Reduced a)23% for Browsers Other than IE b)17% for Internet Explorer Look at the Code

Extra Treat Creating a popup Window with no image or JavaScript in the Source Code simply using a class “newWindow” in Source.

Questions?Questions?