HTML Web Devlopment presentation css.ppt

Editor's Notes

• #5: CSS is a language used to determine the formatting of an HTML document. Before we had CSS all of this information was encoded directly into the document. This was a mess. CSS fixed all that. Using separate style sheets for an entire site, leveraging semantic markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.
• #6: Best way to show what it means is to show you where we came from. I actually built sites like these. There’s not much here really, but a lot of what is here is related to the way the page looks.
• #7: And it got much worse.
• #12: This is the core concept of not just CSS, but web development in general. In a lot of ways it’s taken for granted now, but it wasn’t always so.
• #13: We’ve got that crummy page from before. Let’s fix it.
• #14: And this is a simpler example to start with. With the real tag soup pages you could cut out probably 70% of the markup. Don’t worry if none of this makes perfect sense yet. It’s there just to illustrate how much markup CSS can save.
• #15: And here’s where all that info goes.
• #18: Simplicity. Especially the HTML 5 example.
• #19: There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements. Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.
• #20: There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements. Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements. Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.
• #21: There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements. Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements. Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.
• #22: There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements. Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements. Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.
• #23: Let’s review.
• #24: Learn this now. It’s the way to go.
• #25: Isn’t that so much nicer? Also, alphabetical order. Just sayn’
• #26: For things like padding, where there are four values, the order is ROP RIGHT BOTTOM LEFT
• #27: During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business. It looks like this:
• #28: Some people take that approach and indent related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet. That looks like this:
• #29: Other people like to scan the file for selectors, so they produce CSS with selectors and declarations on one line. I personally have a hard time with this style, but some people I know swear by it, so I present it here:
• #31: I’m just going to read these slides word for word. I almost never do that, but this is important AND confusing.
• #34: http://jsfiddle.net/GqJ7n/