1 03 - CSS Introduction

Editor's Notes

• #3: This lesson we’ll expand on the presentation layer – CSS – which is all the styling of content on the web.
• #5: Document overview:When you punch in a URL into your web browser or click on a hypertext link such as http://finda.com.au, your browser asks our servers to send back what web content it finds at that address. What the browser gets back is an (X)HTML formatted document. Document is the term that describes the full page and all it's associated bits and pieces. Everything that makes up the page you see when rendered is "marked-up" in that document.
• #6: What is CSS for:While (X)HTML is used to describe/mark up the content in a web page, it's Cascading Style Sheets (CSS) that describe how you want everything to look. The way the page looks is known as the presentation (remember the presentation layer?). CSS is the official standard way for formatting text and page elements. CSS is a separate language with its own syntax.CSS is very versatile, and it gives us the ability to control how documents will be presented in areas other than the browser on a screen. It can allow us to style the presentation of printing and on handheld devices. In advanced uses of CSS, It also has rules for defining the non-visual parts of documents, such as how they will sound when read by a screen reader.
• #7: Style sheets help us apply consistant automatic looks to our marked up documents, and there's plenty of benefits to it. Some of the main benefits could be summarised as:
• #8: Presentational (X)HTML never gets close to offering the kind of control over type, backgrounds, and layout that is possible with CSS.
• #9: You can change the appearance of an entire site by editing one style sheet. Making small tweaks or entire site redesigns with style sheets is much easier than when presentation instructions are mixed in with the markup.
• #10: Old school practices of using the old font elements and nested tables make for bloated documents. Not only that, you can apply a single style sheet document to all the pages in a site for further download savings.
• #11: When everything related to presentation is handled by CSS, you can mark up your content meaningfully (the way it's supposed to be), making it more accessible for nonvisual or mobile devices.
• #12: Nearly every browser in current use supports all of CSS Level 1 (not ie6 though) and the majority of CSS Level 2. Reliability of browser support, and differences between the use and support of CSS can often be a difficult thing to work out at times, but it's getting better.
• #13: When used to its full potential, CSS is a robust and powerful design tool.An awesome example of how powerful css is, can be seen with the CSS Zen Garden (www.csszengarden.com). All of the design there use the exact same XHTML source document and doesn’t include a single img element (all of the images are used as backgrounds). Look how different each page is! It's all done with style sheets. This demonstrates the power of separating content and presentation
• #14: A few things are required to invoke the magic of CSS as part of development.Create a document that has been marked up in XHTML.Writing out the rules for how you'd like certain elements to look.Attach the style rules to the document. Once it's attached, the browser will use that presentation when showing the XHTML document! We've started looking at markup and documents, and we'll be looking at the syntax for writing out these css rules, but how, even if we have these rules, can we tie the two together.
• #16: You can apply CSS properties and values to a single element using the style attribute in the element itself, as shown here:      <h1 style="color: red;">Introduction</h1> To add multiple properties, just separate them with semicolons, like this:      <h1 style="color: red; margin-top: 2em;">Introduction</h1> Inline styles apply only to the particular element in which they appear. Avoid writing inline styles as much as you can, unless it is absolutely necessary to override styles from an embedded or external style sheet. Inline styles can cause problems in that they mix presentation information into the structural markup. We like to keep the layers as separate as we can! They make it more difficult to make changes because every style attribute must be hunted down in the source markup for that page to be changed. These down points are some of the same reasons we don't like the old obsolete font element. 
• #18: This is the type is placed in a document using the style element and its rules apply only to that document. The style element must be placed in the head of the document and it must contain a type attribute that identifies the content of the style element as “text/css”. Note, This example also includes a css comment in purple. <head>    <title>Required document title here</title>    <style type="text/css">        /* style rules go here */    </style></head>
• #20: An external style sheet is a separate, text-only file that contains a number of style rules written in CSS language. It has to be named with the .css suffix. The .css file is linked to one or more (X)HTML documents. In this way, all the files in a web site may share the same style sheet. This is the most powerful and best method for attaching style sheets to content.  <head>      <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" />      <title>Titles are required.</title> </head>
• #22: The two main sections of a CSS rule are the selector that identifies the element (or group of elements) to be affected, and the declaration that explains how those elements should be displayed on the screen.
• #23: The declaration has a property (such as color) and its value (green), separated by a colon and a space. Declarations are placed inside curly brackets. Everything inside the curly brackets is called the Declaration Block.In some of our earlier sessions we've demo'ed with the h1 and p elements. We could select those in css with:
• #24: This most basic type of selector is called an element type selector. The properties defined for each will apply to every h1 and p element in the document. Here we just wrote a rule that heading1 elements should be orange and paragraphs should be black in text colour. The color property in the declaration part of the css rule is the american spelling of the word, and unfortunately for us....is standard in CSS. Welcome to CSS, start spelling americanenglish. Values and property names shouldn't have spaces in them, as seen by writing “font-size” or “12px”.
• #25: The element selector
• #26: Selecting elements by ID.When an element is given an ID by using the ID attribute, we can uniquely apply a css rule to it. This is known as selecting by ID. The id attribute can be used with any (X)HTML element, and it is commonly used to give meaning to the generic div and span elements. ID Selectors are identified by the hash (#). An example of a list item with an id reference.<p id=“article">...text...</li> #Note# Do the next part on the blackboard?Now we write a style rule just for that list item using an ID selector (notice the #):p#article { color: red; } Because id values must be unique in the document, it is acceptable to omit the element name. This rule is equivalent to the last one:#article { color: red; }
• #27: Selecting elements by class.The class identifier is used to classify elements (go figure!) into a conceptual group. Where it differs from the the id attribute is that more than one element can share a class name, but also, an element may belong to more than one class. The class is also specified in our markup with it's attribute:<li class="myHappyShoes">One of several happy shoes</li><li class="myHappyShoes">Another one of these happy shoes</li> We target classes with their selector type. Class names are written with a period (.) in the selector. For example, to select all list items with class="myHappyShoes", use this selector (the period indicates the following word is a class selector):li.myHappyShoes { color: orange; } To apply a property to all elements of the same class, we can leave out the element name in the selector (leave the period there though; it’s the character that indicates a class). This target's all paragraphs and any other element that has been marked up with class="myHappyShoes"..myHappyShoes { color: green; }
• #29: Human beings inherit things from their parents, like hair colour, big toes, etc. CSS has the same inheritance at work. Parents, pass on their traits to children. XHTML elements, will pass down certain style properties to others that are on a lower level in the document. This means that elements inside of other elements, can inherit from that parent.
• #30: For example, we may have a paragraph styled with bold text. If that paragraph also contains an inline anchor (<a>...</a>) element, the contents of that one will also be bold with the rest of the text, unless we tell it not to be specifically.
• #31: This is where knowing your document’s structure comes in. We mentioned (X)HTML documents have a structure/hierarchy.Eg. A document has a html root element that contains a head and a body, and the body contains heading and paragraph elements. A few of the paragraphs, contain inline elements like images (<img />) and emphasized text (<em>...</em>). Visualize the structure as an upside-down tree, branching out from the root.The inheritance tree structure shows that all elements contained within another element are it's descendants.If an element is directly contained in another element, it's the child of that element. The containing element is the parent element.Elements higher up than that, are it's ancestors.Two elements with the same parent are siblings.
• #37: Pretty straight forward use of terminology right?With all this in mind, we can consider the idea that certain styles are passed on between levels in css. In general, properties related to the styling of text—font size, color, style, etc.—are passed down. Properties such as borders, margins, backgrounds, and so on that affect the boxed area around the element tend not to be passed down. We use inheritance to our advantage when writing CSS stylesheets - if we wanted all text elements to be shown in the verdanda font, we could set absolutely every element to be verdana - or... because we're smart... we'll write one rule and apply it to the body element. Then all the decendant text elements inside the body tag get that style applied.Example:   body { font-face: Verdana; }
• #38: The Cascade in Cascading Style SheetsBecause we can write rules that cascade down our document tree and apply styling... we can create conflicts.What should the browser do if a document’s linked style sheet says that <h1> elements should be red, but itsembedded style sheet has a rule that makes <h1>'s purple? The designers of the CSS specification knew this would happen, and so they created a system that assigns different weight to the style we apply in different places and ways.
• #39: We've learned that we can apply style rules in at least 3 ways. Inline, Embedded, and External. The closer the style sheet is to the content, the more weight it is given. Eg. Embedded have more weight than external.So from our example, the h1 elements would end up purple as specified in the embedded style sheet, not red as specified in the external .css file that has less weight. Inline styles could have even more weight, because you can't get any closer to the content than style information right in the elements's opening tag! What's all this weight business?? - The more weight a rule or set of rules caries, the more likely it will be applied in the end. Heavy ends up making their mark.
• #40: But what if there's still rules that conflict in CSS?The cascade keeps going of course! - This time, it's weighting at the rule level, not CSS sources. This happens after the various sources of CSS are weighted. When two rules in a single style sheet conflict, the type of selector that was used determines the next winner. The more specific a css selector rule is to the element, the more weight it is given. That more specific rule ends up overriding the other conflicting rule.
• #41: The class selector (the one with the period) sets the colour of the text as yellow for both our list elements and the paragraph element.The class selector on the next line is the same selector! When this happens, because it's written last compared to the one it's conflicting with.... we use it instead. So now this rule sets the colour of the text as green for both our list elements and the paragraph element.The use of the element in the selector for li.myHappyShoes specifies higher (has more weight) than just the class selector for the list elements that have that class. The list elements have orange text while the one paragraph element with that class keeps it's green.The id selector of #happyShoe is very specific, as an id must be unique for only one element in the page. This means the color of red is applied for the list element that has that id of happyShoe. The other list element stays orange, and the paragraph stays green.The li#happyShoe rule is actually redundant as we've already established that there's only one possible element with that id of happyShoe... but, because it specifies that it must be for only list elements, it's even more specific... and get's more weighting... and hence makes the second list element turn from red to violet.The anchor element inside the list element has been specified here as well - the last rule shows that we've selected a child element inside of our very specific happyShoe id element. The anchor link becomes blue.The child element <a> is written with a space after the first selector, and each space after that, indicates that it is nested in the previous one.
• #43: The first official version of CSS (the CSS Level 1 Recommendation, a.k.a CSS1) was officially released in 1996, and included properties for adding font, color, and spacing instructions to page elements. Unfortunately, lack of dependable browser support prevented the widespread adoption of CSS for several years. CSS Level 2 (CSS2) was released in 1998. It most notably added properties for positioning that allowed CSS to be used for page layout. It also introduced styles for other media types (such as print, handheld, and aural) and more sophisticated methods for selecting elements for styling. CSS Level 2, Revision 1 (CSS2.1) makes some minor adjustments to CSS2. Fortunately, most good browsers support the majority of the CSS1, CSS2, and CSS2.1 specifications. Some browsers are already supporting features from CSS Level 3 (CSS3) that is still in development. It adds support for vertical text, improved handling of tables and international languages, better integration with other XML technologies, and other little perks like multiple background images in a single element and a larger list of color names.Keep up to date with the W3C’s development of CSS at www.w3.org/Style/CSS.