03 Styling the Markup / Responsive Design

Posted on by

Week 3
9/11

Introduction to CSS (Cascading Style Sheets). Cover the Mechanics of CSS: how CSS integrates with HTML. Demonstrate most-used properties. Activity: Highlight content using CSS selectors. Activity: Create selectors targeting markup. Make page look like Photoshop comp.

Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Using media queries to target different devices.

Homework

1) Finish Content. 2) Turn Photoshop sketches into HTML / CSS wireframe. 3) Test CSS selectors by targeting each element and change its background color. Read chapters 7-10. Due: The following week.

Questions from Last Weeks Class or Homework?

Goals

The goals of this unit are to:

  • Learn how CSS works.
  • Apply CSS.
  • Understand responsive design with media queries.

Materials

Additional materials for this unit can be found by following these links:

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.
  • Incorporated media queries as the basis for future-proofing web design.

CSS Fun

Smartphones in CSS No pictures or images, just code.

History of the 311 City Services

Illustrating with CSS

Diana A Smith creates spectacular work using only HTML and CSS. Check out
Silhouette , Font made using only CSS, Cigario Poster, and Francine comes with an explanation. You can see the limitations of this technique if you zoom in to 400% but it is quite an accomplishment using mostly background blends , border radius, box shadow, 2D and 3D transforms and blending techniques.

Step-by-Step

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

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).

Leave a Reply