03 Styling the Markup

Posted on by

Week 3
9/17

Introduction to CSS (cascading style sheets). CSS is the design language for the web. The mechanics of how CSS integrates with HTML and the most-used properties. Activity: Highlight content using CSS selectors. Activity: Following your Photoshop comp, style markup.

Homework

Turn your Photoshop sketches into HTML and CSS wireframe. Test CSS selectors by targeting each element and change its background color. Develop your design, brand, written content and images to make your portfolio website. Read chapters 7-10. Due: The following week.

Materials

Additional materials for this unit can be found by following these links (46 pages):

Previous Class Examples

Examples from the past two classes can be found by following these links. Use them for inspiration and reference, but do your thing. That is what I will be grading on.

  • Hayan Chong: Worksheet for midterm and final.
  • Laura Janer: Midterm portfolio site: and final.
  • Amanda Tompkins: Midterm portfolio site and final.
  • Paula Paramo Sanz: This final makes much greater use of PHP than we covered in the course.
  • Gunny Lee: Landed a job in web design with his portfolio which just goes to show what is possible after just one semester of this class.

From Last Semester

  • Yong Bin Zhang: This Final puts pseudo elements to good in header and footer and uses jQuery as well.
  • Karissa Alfonso: Final is conscientiously designed.

Goals

The goals of this unit are to:

  • Learn how CSS works.
  • Apply CSS.

Outcomes

At the end of this unit, students will have:

  • Incorporated user experience into the design process.
  • Know how to create inline, embedded and external style sheets.
  • Connected CSS definitions to the markup using selectors.
  • Understood the correct use of ids and classes.
  • Have explored the many CSS 2.1 properties in the interactive demos.

CSS Fun

Step-by-Step

15 Review homework and answer questions.
40 The Mechanics of CSS
10 Explain the nature of CSS stylesheets. Exhibit the Safari Default Stylesheet and show how this is neutralized by the CSS Reset.
10 break
40 Applying CSS
10 Explain homework
10 Read the book, and the definitions below

Current Practice UX Design

  1. Barbara Nessim

    Lynda.com is a resource for instructional videos. She has been at it for a long time, and there are a lot of videos on HTML (34) and CSS (36). They can be a great resource, and in addition to my performance in class, the class notes and portal, the good and the web itself, there are no reason for not knowing. That said, there are too many titles to intuitively know what to do, and this section will appear whenever there are supporting videos at Lynda.com

    Signing on to lynda.com

    • Click on the library button in my newschool.edu.
    • Select databases and search for Lynda.com or go to the L tab and it is the last entry. You will see a link to Lynda.com.
    • Create a profile or enter your name and password.

    Lynda.com Video Tutorials

    You my have to sign in to see the videos inline. Click to be taken to a preview.

    Welcome
    CSS Fundamentals | by James Williamson

    View this entire CSS Fundamentals course and more in the lynda.com library.

    and
    CSS Core Concepts

    Welcome
    CSS: Core Concepts | by James Williamson

    View this entire CSS: Core Concepts course and more in the lynda.com library.

    News and External Resources

    Cheat Sheets that list all of the different HTML5 and CSS3 tags you can use. Print them out, use them. explore. You will be able to use these during the quiz:

    1. HTML5 Cheat Sheet all of the different tags and the attributes they can have.
    2. CSS3 Cheat Sheet all of the different properties and all possible values or value types they take.

    Install these Plug-ins for Firefox and Chrome. They will facilitate your web development. Do not forget to activate the Show Developer menu in menu bar under the Advanced tab in Safari’s Preferences.

    1. Firebug Plug in for Firefox and Chrome.
    2. Web Developer Plug in for Firefox and Chrome.

    Resources that will aid in your understanding of HTML and CSS.

    1. Google University: HTML, CSS and Javascript from the Ground Up.
    2. Can I use this CSS?Updated list of browser support.
    3. Dive Into HTML5Book on HTML5.
    4. W3.org Status of CSS level 3 specifications Keeper of the standards specifications used to create CSS support in the browsers.

    Talking Points

    Topics covered in the reading:

    Chapter 7: CSS Building Blocks

    1. Constructing a Style Rule 181
    2. Adding Comments to Style Rules 182
    3. The Cascade: When Rules Collide 184
    4. A Property’s Value 188

    Chapter 8: Working with Style Sheets

    1. Creating an External Style Sheet 198
    2. Linking to External Style Sheets 200
    3. Creating an Embedded Style Sheet 202
    4. Applying Inline Styles 204
    5. The Importance of Location 206
    6. Using Media- Specific Style Sheets 208
    7. Offering Alternate Style Sheets 210
    8. The Inspiration of Others: CSS 212

    Chapter 9: Defining Selectors

    1. Constructing Selectors 214
    2. Selecting Elements by Name 216
    3. Selecting Elements by Class or ID 218
    4. Selecting Elements by Context 221
    5. Selecting Part of an Element 227
    6. Selecting Links Based on Their State 230
    7. Selecting Elements Based on Attributes 232
    8. Specifying Groups of Elements 236
    9. Combining Selectors 238
    10. Selectors Recap 240

    Definitions

    Definitions required to understand CSS:

    • rule or ruleset: A selector + braces combo, or an at-rule.
    • declaration block: A sequence of declarations.
    • declaration: A property + colon + value combo.
    • property value: The entire value of a property.
    • component value: A single piece of a property value. Like the 5px in text-shadow: 0 0 5px blue;. Can also refer to things that are multiple terms, like the 1-4 terms that make up the background-size portion of the background shorthand.
    • term: The basic unit of author-facing CSS, like a single number (5), dimension (5px), string ("foo"), or function. Officially defined by the CSS 2.1 grammar (look for the ‘term’ production)
    • outer <anything>: Refers to the margin box.
    • inner <anything>: Refers to the content box.
    • start/end/before/after: Refers to the logical directions, which are dependent on the ‘direction’ and ‘writing-mode’ properties. start and end are in the “inline” axis, the axis that a line of text is laid out in (horizontal in English text). Perpendicular to that, before and after are in the “block” axis, the axis that block elements are laid out in (vertical in English text).
    • simple selector: A single atomic selector, like a type selector, an attr selector, a class selector, etc.
    • compound selector: One or more simple selectors without a combinator. div.example is compound, div > .example is not.
    • complex selector: One or more compound selectors chained with combinators.
    • combinator: The parts of selectors that express relationships. There are four currently – the space (descendant combinator), the greater-than bracket (child combinator), the plus sign (next sibling combinator), and the tilda (following sibling combinator).
    • sequence of <anything> selectors: One or more of the named type of selector chained with commas.

    The following terms are terms taken from w3.org CSS definition list. Many of these terms are technical, and for the sake of precision, these definitions obfuscate rather than clearly explores what they are saying, for most of them are really very basic. I though that exposure to the technical definitions would be a good idea:

    Style sheet

    A set of statements that specify presentation of a document.

    Style sheets may have three different origins: author, user, and user agent. The interaction of these sources is described in the section on cascading and inheritance.

    Valid style sheet

    The validity of a style sheet depends on the level of CSS used for the style sheet. All valid CSS1 style sheets are valid CSS 2.1 style sheets, but some changes from CSS1 mean that a few CSS1 style sheets will have slightly different semantics in CSS 2.1. Some features in CSS2 are not part of CSS 2.1, so not all CSS2 style sheets are valid CSS 2.1 style sheets.

    A valid CSS 2.1 style sheet must be written according to the grammar of CSS 2.1. Furthermore, it must contain only at-rules, property names, and property values defined in this specification. An illegal (invalid) at-rule, property name, or property value is one that is not valid.

    Source document

    The document to which one or more style sheets apply. This is encoded in some language that represents the document as a tree of elements. Each element consists of a name that identifies the type of element, optionally a number of attributes, and a (possibly empty) content. For example, the source document could be an XML or SGML instance.
    Document language

    The encoding language of the source document (e.g., HTML, XHTML, or SVG). CSS is used to describe the presentation of document languages and CSS does not change the underlying semantics of the document languages.

    Element

    (An SGML term, see [ISO8879].) The primary syntactic constructs of the document language. Most CSS style sheet rules use the names of these elements (such as P, TABLE, and OL in HTML) to specify how the elements should be rendered.

    Replaced element

    An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

    User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user’s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

    The content of replaced elements is not considered in the CSS rendering model.

    Intrinsic dimensions

    The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.

    Attribute

    A value associated with an element, consisting of a name, and an associated (textual) value.

    Content

    The content associated with an element in the source document. Some elements have no content, in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.

    Ignore

    This term has two slightly different meanings in this specification. First, a CSS parser must follow certain rules when it discovers unknown or illegal syntax in a style sheet. The parser must then ignore certain parts of the style sheets. The exact rules for which parts must be ignored are described in these sections (Declarations and properties, Rules for handling parsing errors, Unsupported Values) or may be explained in the text where the term “ignore” appears. Second, a user agent may (and, in some cases must) disregard certain properties or values in the style sheet, even if the syntax is legal. For example, table-column elements cannot affect the font of the column, so the font properties must be ignored.

    Rendered content

    The content of an element after the rendering that applies to it according to the relevant style sheets has been applied. How a replaced element’s content is rendered is not defined by this specification. Rendered content may also be alternate text for an element (e.g., the value of the XHTML “alt” attribute), and may include items inserted implicitly or explicitly by the style sheet, such as bullets, numbering, etc.

    Document tree

    The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.

    Child

    An element A is called the child of element B if and only if B is the parent of A.

    Descendant

    An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B.

    Ancestor

    An element A is called an ancestor of an element B, if and only if B is a descendant of A.

    Sibling

    An element A is called a sibling of an element B, if and only if B and A share the same parent element. Element A is a preceding sibling if it comes before B in the document tree. Element B is a following sibling if it comes after A in the document tree.

    Preceding element

    An element A is called a preceding element of an element B, if and only if (1) A is an ancestor of B or (2) A is a preceding sibling of B.

    Following element

    An element A is called a following element of an element B, if and only if B is a preceding element of A.

    Author

    An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.
    User

    A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.
    User agent (UA)(otherwise known as a web browser)

    A user agent is any program, for example, the web browser, that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.
    An HTML user agent is one that supports one or more of the HTML specifications. A user agent that supports XHTML [XHTML], but not HTML is not considered an HTML user agent for the purpose of conformance with this specification.

    Property

    CSS defines a finite set of parameters, called properties, that direct the rendering of a document. Each property has a name (e.g., ‘color’, ‘font’, or border’) and a value (e.g., ‘red’, ’12pt Times’, or ‘dotted’). Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of specificity, cascading, and inheritance (see the chapter on Assigning property values, Cascading, and Inheritance).