Container queries enable you to apply styles to an element based on the size of the element’s container. While Media Queries ushered in an ethic of responsive design, it is not granular. The entire page has to go through the viewport breaking points, which is fine for the major design elements, but not so good for the many tweaks that go into designing a responsive web page. Finessing the design for different devices often requires many breakpoints. Container queries allow child elements to react to changes in their parent element size, making it possible to finesse every element of the page’s responsive design. You can now increase or decrease padding, change font sizes, add or remove background images, or completely change the display property and orientation of child elements, for example, based on the size of the parent.

How to set up the Parent/Container

1. Target the element you wish to target as a containment query by using class or id.
2. Set up the containment context for the element by setting the container-type property. The values are size, which is the logical properties description that describes both height and width, inline-size, which means only width, and normal, which means neither height nor width, but the element is a query container that can receive container style queries. Because we most often think in terms of width, inline-with is the easiest value to.
3. Name your container, using the container-name property. You can give it more than one name (separated by a space), in case you wish to target it with more than one @container rule. Chose an context appropriate name.
4. The container shorthand does both: container: Charley / inline-size.
5. Finally, target the named container @container Charley (min-width: 700px) { } It works just like media queries, so you already understand how to implement those, it is easy to style the child element definitions.The styles are applied when the conditions are true.
6. The container elements should be beneath the original style definitions describing the element, to override the existing style.

Container Queries specific measurements

Measurements for the viewport are standardized. How wide is it, how high is it, etc. Container queries have similar measurements requirements, and have corresponding measurements:

• cqw (container query width) – 1% of the container’s width
• cqh (container query height) – 1% of the container’s height
• cqi (container query inline) – 1% of the container’s inline size
• cqb (container query block) – 1% of the container’s block size
• cqmin (container query minimum) – the smaller value of cqi and cqb
• cqmax (container query maximum) – the larger value of cqi and cqb

That allows you to write, for example, a text size that varies in height depending on the parent’s size. font-size: clamp(2rem, 15cqi, 4rem); where the 15cqi refers to 15% of the container’s inline size. The clamp() function gives this a minimum value of 2rem, and a maximum of 4rem. In the meantime, if 15cqi is between these values, the text will shrink and grow correspondingly.

Self-Aware Modules

I can see container queries being used to build all kinds of self aware widgets that behave as you expect them to, no matter where they are placed. Container queries can be reused anywhere on the page without needing to know the actual size, as it will restyle itself to fit whatever space is allocated. As a designer, you think in modular patterns rather than pages, where responsive design is not thought of in regards to the device, but to all the other elements on the page.

See Container Queries in action

Click on the logo to go to CodePen to see it (in the upper right hand corner, where it says edit on CodePen)

See the Pen
CSS Container Queries Demo (+ polyfill) by Bramus (@bramus)
on CodePen.

Additional Resources

• MDN Container Queries
• Web Dev
• Container Queries by Stephany Eckles

Measurements are used everywhere so get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size while relative measurements are based on the size of the parents, the font specified in the body tag, or determined by the size of the viewport (window or device size).

Absolute Measurements

You will often specify a width in pixels, such as 300px. That is only natural. How long something is depends on the resolution of the screen. Yes, pixels are relative based on the screen resolution which changes all of the time in web design. However, Apple uses pixel doubling retina displays, to maintain the ideal pixel that hovers around 72 points per inch. Because pixels are the reference for thinking in terms of the display, they are used as an absolute measurement.

Other fixed measurements are pica pc, point pt, millimeter mm, centimeter cm and inch in. They should update regardless of the display’s resolution. An inch should be an inch.

Keyword values are also common, like bold and bolder for the font-weight property. Other value for font weight are from 100 through 900 in multiples of 100. Font weights not available will map onto the closest available font.

Interactive CSS Selectors Demonstrations

Relative Measurements

Relative measurements are based on four sources: fonts, percentages, viewport, or container size.

Relative Measurements based on Fonts

In the first years of web design, when a client changed the size of a web page, only the fonts would shrink or expand. To make all the elements on the page change along with the fonts, it was standard to measure everything relative to the size of the page font. That length is expressed in em units, which is the width of the “m” of the font in question. This could become problematic when a percentage of an em, of an em was specified, as the effects accumulated. To avoid this problem, they introduced the root em, or rem, which is based on the size given to the body tag.

You can also express length in terms of the x-height of the font ex and the character ch. Character is mapped onto the width of the zero.

Relative Measurements Based on Percentages

The most common relative measurement is percentage %. When applied to the weight of a child element, it becomes that percentage of the parent element. The parent element is 100%. It is easy to build websites that automatically resize on most devices just by basing the elements on percentages. You still need to use media or container queries for very large and very small sizes.

Relative Measurements Based on Viewport

With the introduction of mobile devices, it became common to base widths on the viewport: vi for viewport inline (this is the width of the browser window or the width of the device). vb is for viewport block. vb These are the logical properties for viewport width and vw and viewport height vh. You can also target the smallest or largest percentage that an object can be: vmin is for viewport minimum and vmax for viewport maximum. Viewport minimum picks the shortest viewport size and viewport maximum chooses the longest viewport size. 1vi is 1% of viewport width, 1vb is 1% of viewport height, 1vw is 1% of viewport width, 1vh is 1% of viewport height, 1vmin is 1vw or 1vh, whichever is smallest and 1vmax is 1vw or 1vh, whichever is largest.

These relative values should be used to accommodate changes in the viewport used to making fluid layouts. Grid layout has a flexible measurement unit designed for fluid layouts, the fractional unit fr. Fr stands for a unit that represents a fraction of the available space in the grid container.

Compare Measurements

Relative sizes are based on the live demo width of 60% of the parent main element, or a font-size of 22px for the body element.

This font-size is unusually large so as to make the text easier to read in class. Usual font-size is 16px. If you change it, the em, x-height based width will change accordingly. The fonts in the document will also change.

If you change the window size, the last 6, viewport inline, block, width, height, vein, and max will all update in real-time.

Measurements for container queries have their own syntax (not demonstrated here).

• cqw (Container Query Width) – 1% of the container’s width
• cqh (Container Query Height) – 1% of the container’s height
• cqi (Container Query Inline) – 1% of the container’s inline size
• cqb (Container Query Block) – 1% of the container’s block size
• cqmin (Container Query Minimum) – the smaller value of cqi and cqb
• cqmax (Container Query Maximum) – the larger value of cqi and cqb

CSS Calc

CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. A useful feature of this function is the ability to mix units. For example, you can multiply pixels with percentage. You can also mix sizing units. CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);}

It used to be that the only devices supporting web pages were desktop computers with similar sized screens. Then came mobile devices. The resolution and size of the screen grew with leaps and bounds. 4K resolution and 32 or 42 size screens are commonplace. Now we have watches. Who knows what the future will bring. The future of the web is not necessarily tied to the browser window that you are using to code your designs. Chances are that it’ll be mobile or spanning multiple screens. Covering those screens, as this page does, from small to large, requires a complete separation between content and form, so that the same content can be rearranged to fit different viewports. The link is to the website, CSS zen gardens, and illustrates the separation between CSS and HTML, form and content, originating in 2003 to demonstrate the power of CSS.

Different devices and markets will use HTMl and CSS for all kinds of purposes. The content needn’t be displayed on a browser. Web services like Facebook, Twitter and the like have taken over a big chunk of the web, bypassing the browser, but still use the HTML and CSS display language.

And users create preferences for high contrast, dark mode, reduced motion, and more, so being responsive goes well beyond changes in the size of the viewport: the new responsive web design in a component-driven world

Scalable and Adaptive Designs

The task of the designer is to provide a consistent user experience across all these possible media. You need to see that the core information of the website remains accessible no matter what the device or how disparate the user. The Apple’s watch has a viewport of 320 x 357 pixels and large monitors eclipse 5K or five thousand pixels. The website needs to look as if it were designed for that specific screen be it postage sized or take up the entire wall of a building, for use with a mouse, voice commands, remote control, or a stubby finger.

Rethink Your World

A stubby finger is a lot different to design for than a mouse driven computer monitor. What does the User Experience look like to your fingers? How to greatly simplify the interface so it adapts to the ends of your fingers. Take another look at Apple’s human interface guidelines for all of their devices including mobile.

What makes for a good mobile site?

Google conducted a research study to answer this question.

The key takeaway:

Mobile users are very goal-oriented. They expect to be able to get what they need, immediately, and on their own terms.

How

The first attempt at responsive design centered on the em as a relative measurements connected to the font size of the document. Next was was to build entire websites using percentages: responsive design . Then they introduced media queries. That changed everything.

Twelve years on the web has expanded in myriad ways. People use CSS grid to build responsive websites and container queries. Who would have known? I can only assume that progress will continue and that there will be more ways to make the web responsive to its devices and users.

In class demonstration for week three: introduction to CSS. Finished file.

1. pick up the HTML5 template from the class portal
2. Give it a title.
3. There is an embedded style sheet that we will not use.

   <style type="text/css"> 
   .example {
   }
   </style>
   

4. There is a link to an external style sheet.

    <link rel="stylesheet" href="CSS/styles.css" media="all">

5. We will use an external style sheet. Create a folder called “CSS” and a file called “style.css” External style sheets are just blank files, filled with css rules attached to selectors that target the elements in the HTML document.
6. If we were to start adding rules, we would be adding our rules on top of the default rules of the browser. Since we do not want to depend on the rules of this or that browser, we neutralize them with a browser reset.
7. After the Browser reset, we begin by writing that this is where the user style sheets starts.

   /*USER STYLES*/

8. We start by targeting the most general tags, and slowly work our way to more specific tags.
9. The most general tag is the <body> tag. Do we want to keep the white background? What fonts do we want, etc? How about:

   body {
   background: hsla(0,100%,70%,1);
   font:  400 1.5em/1.6em  "Times New Roman", Georgia, Serif;
   }

10. Be careful with this font property, as it combines a number of properties, and you need to execute it exactly as it is here. 400 refers to the weight of the font. 400 is normal. 700 is bold. 1.5/1.6 provides us with both the font size and the line height. I then name the font family, were Times New Roman is requested, and if that is not available , Georgia, then any serif font. See Class 6 for more font information.
11. Since every other tag will be written inside the body tag, they will inherit some of these properties. The font property is inheritable, the background property is not.
12. The next strategy is to limit the width of the window when looking at the website on a computer screen, and to center it in the middle. We limit the width to 940px and place it in the middle by using the CSS property margin with value auto like so: margin: auto;.

    section {
    width: 940px;
    margin: auto;
    background: hsla(30,100%,98%,1);
    }

13. The background of the section tag is only as large as the information inside of the tag. Right now it takes on the size of the picture. Let’s swap the picture with the text that one of you has written. The section expands to contain the new content.
14. The CSS reset has reset most properties, so we need to define all of our CSS. We start by providing the section tag with 40px padding. This keeps the content from hitting the edges of the section tag.
15. Save the document, make the browser window active by clicking on it and hit command-R to refresh the browser.
16. We can keep the top from touching the top of the window by giving it a positive top and bottom margin. This is done by adding 40px before the auto. margin: 40px auto;
17. CSS always starts on top, then goes clockwise, to the right, bottom, and finally left. If you only have one value, all sides take on that number. If you specify two numbers, the first signifies the top and bottom, the second the right and left sides. If there are three numbers, you can give different values to the top and bottom, and the sides stay the same. With four values all the sides are specified separately.
18. Let’s define the section by adding a #444 border. We can do that with a shortcut that allows us to specify width, kind and color at the same time; border: 3px solid #444;
19. The entire code for the section now looks like this:

     section {
    width: 1100px;
    margin: 40px auto;
    padding: 70px 30px;
    background: hsla(30,100%,98%,1);
    border: 3px solid #444;
    }

20. What if I were to give the header a background color? If I color the header, it looks kind of clumsy, because of the padding I gave the section. I want to counteract that by giving the header negative margins for each side, but not the top or bottom. That is accomplished by margin: 0 -60px; Giving it a little extra makes it stick out over the section, and has the effect of raising the header above the rest of the document, which helps define its importance in the visual hierarchy. I also want a little space between the header and whatever comes next. 30px should do it. margin: 0 -60px 30px; I give it a border border: 1px solid #444; and 20px of padding to finish it off.

    header{
    background: hsla(0,100%,90%,1);
    margin: 0 -60px 30px;
    padding: 20px;
    border: 1px solid #444; 
    }

21. Next up is to style the h1 header. If we make it 2em (that is a size based on the width of an em dash). OK, that is not brash enough. Lets go with 4em. The serif font does not work and I change it to Helvetica. There are more interesting fonts available, but for now, lets keep it simple.
22. The navigation is a list. Lists items by default act like blocks. That means they go down like paragraph returns. We want them to go across, so we need to target the list items in the header and change the display from block to inline-block. With a little margin we can separate the menu items. We can go further, but lets leave that till class 5.

    header li {
    display: inline-block;
    margin: 0 10px;
    }

23. It is easy to have paragraphs display one below the other. It is more difficult to display them side by side. Going vertical is natural, going horizontal is what will give you your headaches.
24. To give us some practice, I will demonstrate the float technique to place items horizontally. This is the technique used by the NYTimes.com to create their layout. You can see this for yourself by installing the Plugin. Click on the bug that is installed to the right of your address bar, select outline in the pop-up and select outline frames. You will see almost every box in the layout light up.
25. The float technique was originally used for floating pictures, but five years ago it was adopted by the NYTimes to float layout elements. Tables were used for layout before that time.
26. The first step is to float an image to the right. Create a figure, img and figcaption and link to an appropriately sized picture. Since I may want to move pictures to the right more often, I create a class called pict-r, and use the class attribute in the figure class="pict-r" . A selector for the class is placing a period before pict-r in the CSS style sheet .pict-r . I also specify a smaller font for the caption, and align it to the right, and put a border on the image, though I offset it by 2px using padding.

    .pict-r {
    float: right;
    margin-left: 40px;
    }
    img {
    border: 3px solid silver;
    padding: 2px;
    }
    figure {
    }
    figcaption {
    font:  400 .7em/.7em  Helvetica, san-serif;
    text-align: right;
    }

27. The picture moves to the right. The caption is flush right. The picture has a border around it, and the text runs around that picture.
28. We use the same idea, but now we float a layout element to the left. THe layout element is created by introducing a div in the markup that encloses the text I want to float to the left.
29. This time I use an ID to target the div. An ID can only to used once on a page. The id attribute is placed in the div tag: id="left" and in the style sheet, a hashtag is used as the selector: #left

    #left {
    float: left;
    width: 44%;
    margin-right: 3%;
    padding-right: 3%;
    border-right: 2px solid silver;
    margin-bottom: 10px;
    }

30. I used percentages as an easy way to figure out the width. It is always a percentage of the width of the parent element. I could have figured out the pixels values and done it that way as well.
31. When I decided to put a top and bottom holding line it, a problem arose, and I needed to push the last paragraph below the float. There is a CSS property to do this, called clear, meaning clear float. That allowed me to put the last paragraph below the two columns.
32. To finish it off, I gave the paragraphs a 13px spacing at the bottom.

     .bottom {
    border-bottom: 2px solid silver;
    padding-bottom: 10px;
    margin-bottom: 20px;
    }
    .top {
    clear: left;
    border-top: 2px solid silver;
    padding-top: 10px;
    margin-top: 20px;
    }

CSS Media queries are a way to apply styles by targeting specific physical characteristics of the browser, like viewport size. Viewport size is the size of the browser window on a web browser, or the size of the device screen on a smart phone. Media queries consists of a media type and zero or more expressions that check for the conditions of particular media. When the expressions match the physical characteristic they activate style definitions that usually overwrite previous style definitions so the page remains responsive, for example, to changes in the viewport. Media queries originated from media types.

Media Types

In CSS2.1, media types specify how a document is to be presented on different media: on the screen, paper, a speech synthesizer, a braille device, projected TV, etc. It uses the @media rule.

It’s possible to target different @media rules within a stylesheet, allowing difference between print:

 @media print {
    body { font-size: 10pt }
  }

and screen:

  @media screen {
    body { font-size: 13px } 
  }
  

Media Queries

CSS3 grafted media queries. onto media types. Media queries allow the physical characteristics of the media determine how the CSS layout is to be rendered. That allows designers to tailor the presentation of the media to different devices without changing the content. The content dynamically adapts to changes in the viewport.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features like height, width, and orientation. A change in the width, height, or orientation of the viewport triggers the media query to switch styles in real time.

This mobile example is best experienced on a smart phone as it is set to toggle between portrait and landscape orientations and changes as you orient your phone vertically or horizontally. You can also change the viewport by changing the width of the window.

  /* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Media conditions that can be queried

A list of different queries that can be addressed from a device. Device can mean the full screen of a device or the display of a browser window. Conditions in bold are most used.

• width
• height
• device-width
• device-height
• orientation (portrait or landscape)
• aspect-ratio
• device-aspect-ratio
• prefers-color-scheme
• color (how many colors the device is capable of)
• color-index
• monochrome
• resolution (including retina display)
• scan
• grid

How Media Queries Work: Boolean Logic

You may query as many media as you like using boolean operators to determine the logic of each query.

Use “and” to specify in addition to and “,” to specify or, as in this example @media all and (min-width: 700px) and (max-width: 900px), (orientation:landscape) , which reads, for all media, the minimum width is 700px and the maximum width is 900 pixels, or the orientation is landscape. You can also use negation by writing out the word “not”.

When using and, both parts have to be true to activate the media query. If using or (“,”) the media query is true if any one part is true.

The most common way to use media queries is to create a separate media query for each size, and use CSS to override the previous media query with a subsequent media query:

 /*default styles for large computer monitor */
@media only screen and (min-width: 1200px) {
    /* Style adjustments for laptops*/
}
@media only screen and (min-width: 800px) {
    /* Style adjustments for tablets*/
}
@media only screen and (min-width: 480px) {
    /* Style adjustments for phones*/
}

How to Use

Like media styles, media queries can be used to change the style sheet or change the style within a single stylesheet. I’ve rarely encountered changing the style sheet. Use media queries to change the style within a stylesheet.

Changing Stylesheets

Example (download ) Changing the window to 700 or less pixels wide selects the “narrow.css” external style sheet to determine the style, “medium.css” determines the style when the viewport is between 701 to 900 pixels wide and the “wide.css” determines the style when the viewport is wider than 900 pixels.

The three stylesheets are switched in real time as the window is resized.

<link rel='stylesheet' media='screen and (max-width: 700px)'
href='narrow.css' >
<link rel='stylesheet' media='screen and (min-width: 701px) 
and (max-width: 900px)' href='medium.css' >
<link rel='stylesheet' media='screen and (min-width: 901px)'
href='wide.css' >

Changing Styles within a Stylesheet

The more common approach is to use media queries within a single style sheet.

The @media rule comes first, an opening bracket, the css rules to be affected and a closing bracket:

@media all (max-width: 900px) {
section {width: 480px;}
article {width: 480px; background-color: red;}
}

Demonstration of media queries integrated within the stylesheet itself.

Where to Place Media Queries?

Media queries are placed at the bottom of the CSS style sheet. This allows whatever rules activated by the media queries to override existing definitions, initiating a change in the layout.

To keep scrolling to a minimum while writing the CSS, I recommend writing the rules right after the selectors, one property after the other, rather than each property on its own line.

Locking Down the Viewport and Zoom

When the iPhone was released it needed a way to resize existing website so that they fit. It assumes a viewport of 980 pixels and zooms it to fit the website to the screen resolution by default, unless you tell it not to. This requires the following code in the header:

<!- This sets the viewport to the device (iPhone) screen size, and forces the zoom to be 1:1 
================================================  -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >

Two approaches to building a responsive website.

Develop the smallest layout first and use @media queries to address larger viewports or start with the largest viewport and work your way down to the smallest. The following example uses three break points: below 600px for phone, below1000px for tablet, and below 1400px for laptops. Anything above targets large computer motors.

Use min-width to scale up from the the smallest viewport and max-width to scale down from the largest viewport.

Phone First

/* Default styles for smart phones */
@media only screen and (min-width: 800px) {
    /* Style adjustments for tablets*/
}
@media only screen and (min-width: 1200px) {
    /* Style adjustments for laptop screens*/
}
@media only screen and (min-width: 1600px) {
    /* Style adjustments for large computer monitors*/
}

Large Computer Monitor First

 /*default styles for large computer monitor */
@media only screen and (max-width: 1200px) {
    /* Style adjustments for laptops*/
}
@media only screen and (max-width: 800px) {
    /* Style adjustments for tablets*/
}
@media only screen and (max-width: 480px) {
    /* Style adjustments for phones*/
}

View Websites in Different Viewports

In Safari access the Enter Responsive Design Mode (Option-command R) to see all the possible sizes at once (you will need to have clicked on the expert mode on the last pane in the preferences). Google and Firefox have a similar feature in the Web Inspector.

Smashing Magazine has good articles, and tools to help you, including a preview of what a device size looks like with Resize my browser window, and a responsive, a way to see your project in all widths at once.

Light/Dark Mode

The light/dark color scheme can automatically switched to the the scheme used by the website. You will need to prepare your CSS for both light and dark schemes. See MDN docs for an example.

@media (prefers-color-scheme: dark) {
}

Additional Resources

Go further by following these links:

CSS Tricks Guide to Media Queries

MDN Responsive Images

web.dev Responsive Design

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:

• Why CSS?
• The Mechanics of CSS
• Applying CSS
• Measurement Units
• Web.dev CSS course
• Safari Default Stylesheet
• CSS Reset

• Designing for the Future
• Responsive Design
• Media Queries
• Container Queries

• the Selection Worksheet
• Homework

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

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

Resetting the Browser style sheet

The browser has a default style sheet, and if you do not neutralize it, you will be adding your styles on top of its styles. Worse, different browsers can have different style sheets, and individuals can personalize the browser’s style sheet. An example: Safari’s default style sheet. To counter this we implement a css reset. There are two to choose from.

The first is by Eric Meyer, who created the first popular reset in 2007, and recently released this second version:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

The second reset is called Normalize. It is a more nuanced approach that tries to do as little as possible and attempts to harmonize the browser defaults instead.

The aims of normalize.css are as follows:

• Preserve useful browser defaults rather than erasing them.
• Normalize styles for a wide range of HTML elements.
• Correct bugs and common browser inconsistencies.
• Improve usability with subtle improvements.
• Explain the code using comments and detailed documentation.

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 
 * 2010, 2011 Apple Inc. All rights reserved.
 *
 * This library is free software; 
 * you can redistribute it and/or
 * modify it under the terms of the 
 * GNU Library General Public
 * License as published by the 
 * Free Software Foundation; either
 * version 2 of the License, 
 * or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; 
 * without even the implied warranty of
 * MERCHANTABILITY or FITNESS 
 * FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy 
 * of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  
 * If not, write to
 * the Free Software Foundation, Inc., 
 * 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */

@namespace "http://www.w3.org/1999/xhtml";

html {
    display: block
}

/* children of the  element all have display:none */
head {
    display: none
}

meta {
    display: none
}

title {
    display: none
}

link {
    display: none
}

style {
    display: none
}

script {
    display: none
}

/* generic block-level elements */

body {
    display: block;
    margin: 8px
}

p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

div {
    display: block
}

layer {
    display: block
}

article, aside, footer, header, hgroup, nav, section {
    display: block
}

marquee {
    display: inline-block;
    overflow: -webkit-marquee
}

address {
    display: block
}

blockquote {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

figcaption {
    display: block
}

figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

q {
    display: inline
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center
}

hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px
}

map {
    display: inline
}

/* heading elements */

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.00em;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h4 {
    display: block;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h5 {
    display: block;
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h6 {
    display: block;
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

/* tables */

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

/* lists */

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

li {
    display: list-item
}

ul ul, ol ul {
    list-style-type: circle
}

ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
}

dd {
    display: block;
    -webkit-margin-start: 40px
}

dl {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

dt {
    display: block
}

ol ul, ul ol, ul ul, ol ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0
}

/* form elements */

form {
    display: block;
    margin-top: 0__qem;
}

label {
    cursor: default;
}

legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border: none
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove ThreeDFace
}

button {
    -webkit-appearance: button;
}

/* Form controls don't go vertical. */
input, textarea, keygen, select, button, isindex, meter, progress {
    -webkit-block-flow: tb !important;
}

input, textarea, keygen, select, button, isindex {
    margin: 0__qem;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: -webkit-auto;
}

input[type="hidden"] {
    display: none
}

input, input[type="password"], input[type="search"], isindex {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}

input[type="search"] {
    -webkit-appearance: searchfield;
    -webkit-box-sizing: border-box;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    display: inline-block;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: searchfield-decoration;
    display: inline-block;
}

input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: searchfield-results-decoration;
    display: inline-block;
}

input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: searchfield-results-button;
    display: inline-block;
}

#if defined(ENABLE_DATALIST) && ENABLE_DATALIST
input::-webkit-input-list-button {
    -webkit-appearance: list-button;
    display: inline-block;
}
#endif

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    position: relative;
    cursor: default;
    vertical-align: top;
    -webkit-user-select: none;
}

#if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
input::-webkit-input-speech-button {
    -webkit-appearance: -webkit-input-speech-button;
    display: inline-block;
    vertical-align: top;
}
#endif

keygen, select {
    -webkit-border-radius: 5px;
}

keygen::-webkit-keygen-select {
    margin: 0px;
}

textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-box-orient: vertical;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: darkGray;
}

input[type="password"] {
    -webkit-text-security: disc !important;
}

input[type="hidden"], input[type="image"], input[type="file"] {
    -webkit-appearance: initial;
    padding: initial;
    background-color: initial;
    border: initial;
}

input[type="file"] {
    -webkit-box-align: baseline;
    text-align: start !important;
}

input:-webkit-autofill {
    background-color: #FAFFBD !important;
    background-image:none !important;
    color: #000000 !important;
}

input[type="radio"], input[type="checkbox"] {
    margin: 3px 0.5ex;
    padding: initial;
    background-color: initial;
    border: initial;
}

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: push-button;
    white-space: pre
}

input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: push-button;
    white-space: nowrap;
    margin: 0;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    -webkit-box-align: center;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    -webkit-box-sizing: border-box
}

input[type="range"] {
    -webkit-appearance: slider-horizontal;
    padding: initial;
    border: initial;
    margin: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: sliderthumb-horizontal;
    display: block;
}

input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
select:disabled, keygen:disabled, optgroup:disabled, option:disabled {
    color: GrayText
}

input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
    border-style: inset
}

input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
    border-style: outset
}

area, param {
    display: none
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -webkit-box-sizing: border-box;
}

input[type="radio"] {
    -webkit-appearance: radio;
    -webkit-box-sizing: border-box;
}

#if defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR

input[type="color"] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display:-webkit-box;
    padding: 4px 2px;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 100%
}

input[type="color"]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    -webkit-box-flex: 1;
}

#if defined(ENABLE_DATALIST) && ENABLE_DATALIST

input[type="color"][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px;
}

input[type="color"][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
}

input[type="color"][list]::-webkit-color-swatch {
    border-color: #000000;
}

#endif // defined(ENABLE_DATALIST) && ENABLE_DATALIST

#endif // defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR

select {
    -webkit-appearance: menulist;
    -webkit-box-sizing: border-box;
    -webkit-box-align: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
}

select[size],
select[multiple],
select[size][multiple] {
    -webkit-appearance: listbox;
    -webkit-box-align: start;
    border: 1px inset gray;
    -webkit-border-radius: initial;
    white-space: initial;
}

select[size="0"],
select[size="1"] {
    -webkit-appearance: menulist;
    -webkit-box-align: center;
    border: 1px solid;
    -webkit-border-radius: 5px;
    white-space: pre;
}

optgroup {
    font-weight: bolder;
}

option {
    font-weight: normal;
}

output {
    display: inline;
}

/* form validation message bubble */

::-webkit-validation-bubble {
    display: inline-block;
    z-index: 2147483647;
    position: absolute;
    opacity: 0.95;
    line-height: 0;
    margin: 0;
    -webkit-text-security: none;
    -webkit-transition: opacity 05.5s ease;
}

::-webkit-validation-bubble-message {
    display: block;
    position: relative;
    top: -4px;
    font: message-box;
    color: black;
    min-width: 50px;
    max-width: 200px;
    border: solid 2px #400;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
    padding: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
        inset -2px -2px 1px #d0c4c4,
        inset 2px 2px 1px white;
    line-height: normal;
    white-space: normal;
    z-index: 2147483644;
}

::-webkit-validation-bubble-arrow {
    display: inline-block;
    position: relative;
    left: 32px;
    width: 16px;
    height: 16px;
    background-color: #f8ecec;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #400;
    box-shadow: inset 2px 2px 1px white;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    z-index: 2147483645;
}

::-webkit-validation-bubble-arrow-clipper {
    display: block;
    overflow: hidden;
    height: 16px;
}

#if defined(ENABLE_METER_TAG) && ENABLE_METER_TAG
/* meter */

meter {
    -webkit-appearance: meter;
    -webkit-box-sizing: border-box;
    display: inline-box;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
}

meter::-webkit-meter-bar {
    background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-optimum-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
    height: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-suboptimum-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
    height: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-even-less-good-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
    height: 100%;
    -webkit-box-sizing: border-box;
}
#endif

#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG
/* progress */

progress {
    -webkit-appearance: progress-bar;
    -webkit-box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
}

progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
}

progress::-webkit-progress-value {
    background-color: green;
    height: 100%;
    width: 50%; /* should be removed later */
    -webkit-box-sizing: border-box;
}
#endif

/* inline elements */

u, ins {
    text-decoration: underline
}

strong, b {
    font-weight: bolder
}

i, cite, em, var, address {
    font-style: italic
}

tt, code, kbd, samp {
    font-family: monospace
}

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
}

mark {
    background-color: yellow;
    color: black
}

big {
    font-size: larger
}

small {
    font-size: smaller
}

s, strike, del {
    text-decoration: line-through
}

sub {
    vertical-align: sub;
    font-size: smaller
}

sup {
    vertical-align: super;
    font-size: smaller
}

nobr {
    white-space: nowrap
}

/* states */

:focus { 
    outline: auto 5px -webkit-focus-ring-color
}

/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus, body:focus, input[readonly]:focus { 
    outline: none
}
  
input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px
}

input[type="button"]:focus,
input[type="checkbox"]:focus,
input[type="file"]:focus,
input[type="hidden"]:focus,
input[type="image"]:focus,
input[type="radio"]:focus,
input[type="reset"]:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
input[type="file"]:focus::-webkit-file-upload-button {
    outline-offset: 0
}
    
a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

a:-webkit-any-link:active {
    color: -webkit-activelink
}

/* HTML5 ruby elements */

ruby, rt {
    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}

rt {
    line-height: normal;
    -webkit-text-emphasis: none;
}

ruby > rt {
    display: block;
    font-size: 50%;
    text-align: -webkit-auto;
}

ruby > rp {
    display: none;
}

/* other elements */

noframes {
    display: none
}

frameset, frame {
    display: block
}

frameset {
    border-color: inherit
}

iframe {
    border: 2px inset
}

details {
    display: block
}

summary {
    display: block
}

summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    margin-right: 0.4em;
}

/* page */

@page {
    /* FIXME: Define the right default values for page properties. */
    size: auto;
    margin: auto;
    padding: 0px;
    border-width: 0px;
}

/* noscript is handled internally, as it depends on settings. */
/*
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Library General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  If not, write to
 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */

@namespace "http://www.w3.org/1999/xhtml";

html {
    display: block
}

/* children of the  element all have display:none */
head {
    display: none
}

meta {
    display: none
}

title {
    display: none
}

link {
    display: none
}

style {
    display: none
}

script {
    display: none
}

/* generic block-level elements */

body {
    display: block;
    margin: 8px
}

p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

div {
    display: block
}

layer {
    display: block
}

article, aside, footer, header, hgroup, nav, section {
    display: block
}

marquee {
    display: inline-block;
    overflow: -webkit-marquee
}

address {
    display: block
}

blockquote {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

figcaption {
    display: block
}

figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

q {
    display: inline
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center
}

hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px
}

map {
    display: inline
}

/* heading elements */

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.00em;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
}

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h4 {
    display: block;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h5 {
    display: block;
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

h6 {
    display: block;
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

/* tables */

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

/* lists */

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

li {
    display: list-item
}

ul ul, ol ul {
    list-style-type: circle
}

ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
}

dd {
    display: block;
    -webkit-margin-start: 40px
}

dl {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

dt {
    display: block
}

ol ul, ul ol, ul ul, ol ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0
}

/* form elements */

form {
    display: block;
    margin-top: 0__qem;
}

label {
    cursor: default;
}

legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border: none
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove ThreeDFace
}

button {
    -webkit-appearance: button;
}

/* Form controls don't go vertical. */
input, textarea, keygen, select, button, isindex, meter, progress {
    -webkit-block-flow: tb !important;
}

input, textarea, keygen, select, button, isindex {
    margin: 0__qem;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: -webkit-auto;
}

input[type="hidden"] {
    display: none
}

input, input[type="password"], input[type="search"], isindex {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}

input[type="search"] {
    -webkit-appearance: searchfield;
    -webkit-box-sizing: border-box;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    display: inline-block;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: searchfield-decoration;
    display: inline-block;
}

input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: searchfield-results-decoration;
    display: inline-block;
}

input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: searchfield-results-button;
    display: inline-block;
}

#if defined(ENABLE_DATALIST) && ENABLE_DATALIST
input::-webkit-input-list-button {
    -webkit-appearance: list-button;
    display: inline-block;
}
#endif

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    position: relative;
    cursor: default;
    vertical-align: top;
    -webkit-user-select: none;
}

#if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
input::-webkit-input-speech-button {
    -webkit-appearance: -webkit-input-speech-button;
    display: inline-block;
    vertical-align: top;
}
#endif

keygen, select {
    -webkit-border-radius: 5px;
}

keygen::-webkit-keygen-select {
    margin: 0px;
}

textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-box-orient: vertical;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: darkGray;
}

input[type="password"] {
    -webkit-text-security: disc !important;
}

input[type="hidden"], input[type="image"], input[type="file"] {
    -webkit-appearance: initial;
    padding: initial;
    background-color: initial;
    border: initial;
}

input[type="file"] {
    -webkit-box-align: baseline;
    text-align: start !important;
}

input:-webkit-autofill {
    background-color: #FAFFBD !important;
    background-image:none !important;
    color: #000000 !important;
}

input[type="radio"], input[type="checkbox"] {
    margin: 3px 0.5ex;
    padding: initial;
    background-color: initial;
    border: initial;
}

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: push-button;
    white-space: pre
}

input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: push-button;
    white-space: nowrap;
    margin: 0;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    -webkit-box-align: center;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    -webkit-box-sizing: border-box
}

input[type="range"] {
    -webkit-appearance: slider-horizontal;
    padding: initial;
    border: initial;
    margin: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: sliderthumb-horizontal;
    display: block;
}

input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
select:disabled, keygen:disabled, optgroup:disabled, option:disabled {
    color: GrayText
}

input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
    border-style: inset
}

input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
    border-style: outset
}

area, param {
    display: none
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -webkit-box-sizing: border-box;
}

input[type="radio"] {
    -webkit-appearance: radio;
    -webkit-box-sizing: border-box;
}

#if defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR

input[type="color"] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display:-webkit-box;
    padding: 4px 2px;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 100%
}

input[type="color"]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    -webkit-box-flex: 1;
}

#if defined(ENABLE_DATALIST) && ENABLE_DATALIST

input[type="color"][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px;
}

input[type="color"][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
}

input[type="color"][list]::-webkit-color-swatch {
    border-color: #000000;
}

#endif // defined(ENABLE_DATALIST) && ENABLE_DATALIST

#endif // defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR

select {
    -webkit-appearance: menulist;
    -webkit-box-sizing: border-box;
    -webkit-box-align: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
}

select[size],
select[multiple],
select[size][multiple] {
    -webkit-appearance: listbox;
    -webkit-box-align: start;
    border: 1px inset gray;
    -webkit-border-radius: initial;
    white-space: initial;
}

select[size="0"],
select[size="1"] {
    -webkit-appearance: menulist;
    -webkit-box-align: center;
    border: 1px solid;
    -webkit-border-radius: 5px;
    white-space: pre;
}

optgroup {
    font-weight: bolder;
}

option {
    font-weight: normal;
}

output {
    display: inline;
}

/* form validation message bubble */

::-webkit-validation-bubble {
    display: inline-block;
    z-index: 2147483647;
    position: absolute;
    opacity: 0.95;
    line-height: 0;
    margin: 0;
    -webkit-text-security: none;
    -webkit-transition: opacity 05.5s ease;
}

::-webkit-validation-bubble-message {
    display: block;
    position: relative;
    top: -4px;
    font: message-box;
    color: black;
    min-width: 50px;
    max-width: 200px;
    border: solid 2px #400;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
    padding: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
        inset -2px -2px 1px #d0c4c4,
        inset 2px 2px 1px white;
    line-height: normal;
    white-space: normal;
    z-index: 2147483644;
}

::-webkit-validation-bubble-arrow {
    display: inline-block;
    position: relative;
    left: 32px;
    width: 16px;
    height: 16px;
    background-color: #f8ecec;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #400;
    box-shadow: inset 2px 2px 1px white;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    z-index: 2147483645;
}

::-webkit-validation-bubble-arrow-clipper {
    display: block;
    overflow: hidden;
    height: 16px;
}

#if defined(ENABLE_METER_TAG) && ENABLE_METER_TAG
/* meter */

meter {
    -webkit-appearance: meter;
    -webkit-box-sizing: border-box;
    display: inline-box;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
}

meter::-webkit-meter-bar {
    background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-optimum-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
    height: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-suboptimum-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
    height: 100%;
    -webkit-box-sizing: border-box;
}

meter::-webkit-meter-even-less-good-value {
    background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
    height: 100%;
    -webkit-box-sizing: border-box;
}
#endif

#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG
/* progress */

progress {
    -webkit-appearance: progress-bar;
    -webkit-box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
}

progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
}

progress::-webkit-progress-value {
    background-color: green;
    height: 100%;
    width: 50%; /* should be removed later */
    -webkit-box-sizing: border-box;
}
#endif

/* inline elements */

u, ins {
    text-decoration: underline
}

strong, b {
    font-weight: bolder
}

i, cite, em, var, address {
    font-style: italic
}

tt, code, kbd, samp {
    font-family: monospace
}

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
}

mark {
    background-color: yellow;
    color: black
}

big {
    font-size: larger
}

small {
    font-size: smaller
}

s, strike, del {
    text-decoration: line-through
}

sub {
    vertical-align: sub;
    font-size: smaller
}

sup {
    vertical-align: super;
    font-size: smaller
}

nobr {
    white-space: nowrap
}

/* states */

:focus { 
    outline: auto 5px -webkit-focus-ring-color
}

/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus, body:focus, input[readonly]:focus { 
    outline: none
}
  
input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px
}

input[type="button"]:focus,
input[type="checkbox"]:focus,
input[type="file"]:focus,
input[type="hidden"]:focus,
input[type="image"]:focus,
input[type="radio"]:focus,
input[type="reset"]:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
input[type="file"]:focus::-webkit-file-upload-button {
    outline-offset: 0
}
    
a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

a:-webkit-any-link:active {
    color: -webkit-activelink
}

/* HTML5 ruby elements */

ruby, rt {
    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}

rt {
    line-height: normal;
    -webkit-text-emphasis: none;
}

ruby > rt {
    display: block;
    font-size: 50%;
    text-align: -webkit-auto;
}

ruby > rp {
    display: none;
}

/* other elements */

noframes {
    display: none
}

frameset, frame {
    display: block
}

frameset {
    border-color: inherit
}

iframe {
    border: 2px inset
}

details {
    display: block
}

summary {
    display: block
}

summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    margin-right: 0.4em;
}

/* page */

@page {
    /* FIXME: Define the right default values for page properties. */
    size: auto;
    margin: auto;
    padding: 0px;
    border-width: 0px;
}

/* noscript is handled internally, as it depends on settings. */

This will have happened before many of you were born, though I remember it well. In the late 1980 and the early 1990’s desktop publishing was born with programs like PageMaker, a program whose reincarnation would be named InDesign.

What liberated the designers was the ability to put content anywhere. Be it text or pictures, the content is always contained in a box. PageMaker and Indesign can position these boxes anywhere on the page.

Those who knew how these programs worked would make sure that they used the numerical coordinates to accurately position the boxes, and not just rely on guides or to do it by eye. It was easy to see how many inches a box was from the upper left corner of the document that represented the default 0 point.

Each box in InDesign (or Illustrator, for that matter) has four numbers associated with it: the horizontal distance (x) from the point of origin, the vertical distance (y), the width and the height. This is the same for each element that is absolutely positioned in HTML and CSS. We are going to use that to layout the bio.

The Document’s Default Behavior

In the first homework assignment you marked up content using heads <h1>–<h6> and paragraphs <p>, added links <a> and images<img>, and grouped certain content together using the generic <div> or the more semantic HTML5 tags like <header>, <nav>, <section>, <article>, <figure> and <figcaption>.

At this time you did not nest too many tags inside of other tags, but know that every tag you created was already nested as a child of the body tag. As you develop the layout, you will increasingly nest tags inside of one another, usually to define and group an area of the layout, like the header, right column, main content, navigation or footer.

When you look at the first assignment, you see the browser’s default style at work. The content vertically lines up, one below another, while the text flows left to right.

To better understand this structure, change the embedded style included in the HTML5 template, which currently looks like this:

<style type="text/css">
.example {
}
</style>

To an embedded style that puts an outline or border on all elements, like this:

<style type="text/css">
	body, section, header, nav, article, p, h1, h2, footer, nav, figure, figcaption, ol, ul, li { 
	outline: 2px solid red;
}
a, img, span, em, strong, a { 
	border: 2px solid green;
}
</style>

A red outline is put on the elements that are displayed according to the block mode and a green border is put on the elements that are displayed according to the inline mode.

Each element of the assignment now has an outline or border.

Take a moment and explore the way the red outlined block elements stack below one another. Each element’s width extends all the way out to the parent by default.

Inline elements with green borders styles the content (type) in block elements, flowing from insertion point to the end of the box. It then start over on the next line. Not all languages flow horizontally or left to right, though english does, so we can say that type starts left and flows horizontally.

The default display of the content is that the block elements flow down one below the other from the top of the page The absolute display mode radically changes this by completely removes elements from the default document flow.

There is no need to keep this style, so you can remove it by commenting it out using the CSS commenting convention: /* comments */. That way it is still there is you ever want to see the block elements outlined in red.

It is also possible to just break a property inside a CSS rule by misspelling it, as it will just be ignored. Insert a special letter combination, and be consistent in your used of it, like -break-, as in out-break-line: 2px solid red;. It is the possible to quickly searched for -break- and find them. This is handy when stylesheets become big and need to be more carefully managed.

Styling the Elements

I use an embedded style sheet for this example, but you should use an external style sheet. You then need to write selectors that select all the elements on the page. You could do this by giving each element an id or class, but we want to be more efficient, and so first try to select the elements using type and pseudo selectors if possible.

The best selectors to use are type selectors. They select the element by its type, i.e. p for selecting all paragraphs. You can combine them to get more specific, like article div p, which targets only those paragraphs in the div in the article. If that doesn’t work, you can use the pseudo class selectors like :nth-child(N) or use class selectors if you want to target certain elements.

Avoid using ids, as they are much stronger than classes and tend to dominate the cascade hierarchy. To great a reliance on ids takes away a lot of the flexibility built into the CSS cascade.

Select each of the elements in the document and change the background color to know that you have successfully targeted that element with a CSS rule.

Altering the Default Layout Order

The block elements are like a child stacking playing blocks one on top of the other, only upside down, starting from the top with one box below the other. This is the normal document flow mode, and it is similar to how a word processor works. The difficulty of laying out a document using the normal document flow is that you have to build your way to every part of the document. The benefit is that if one thing changes, everything else adapts, if it’s done right.

Most Design students layout their documents using Indesign (Illustrator, or even Photoshop). The activity of creating and moving design elements where you want them is what layout is all about.

Forget the normal document flow! Click on an object and move it to where you want it to be.

A What You See is What You Get editor can do that, but the code it creates is messy. The best way to do this is coding the layout by hand. Go through the creative process, with thumbnails, mood boards etc., and develop a Photoshop comp before starting to code the layout.

There is not much spontaneity in coding the layout, but then, there is little spontaneity in prepping an Indesign document for print. The creativity and spontaneity of web design happens in the early planning stages. To encourage that I ask you to show me your creative development in the worksheet. After that it’s mostly creative problem solving as you execute the layout. You are ahead of the game if you can see this as a puzzle to be solved.

Homework Assignment Using Absolute Positioning

To get started, we want to remove all of the background properties from the selector demo, so we can start with a clean slate.

Next, we want to center the layout in the middle of the window. That forces us to use a relatively positioned element as the containing element that wraps the website. So much for using only absolute positioning.

The way to horizontally center an element in CSS is to set the right and left margins on auto , and by giving the element a width. The width is subtracted from the width of the parent element, and whatever is left over is split into two so that equal side margins automatically center the element in the middle.

Absolute Position based on Relatively Positioned Parent

We also position this element as relative. This is an important step, for a page element with relative positioning gives you the control to absolutely position children elements inside of it. If we were to skip this step, the absolutely positioned elements would position itself to the body element, and not the automatically centering element just created.

The section element is made 960 pixels wide, and if the window is bigger than that, the margins are evenly divided, centering it in the window, or viewport, as it is technically called.

section { 
	position: relative; 
	margin: 0 auto; 
	width: 960px; 
	background: #888; 
	height: 900px;
}

Grouping Elements

The absolutely positioned elements inside of the section element will all stay centered in the window. This has the effect of grouping all of the enclosed elements. We will continue to use this technique to simplify our layout into the main HTML5 divisions, each one of which will be turned into a group: header, nav, aside, article and footer.

Header

All of the elements inside of the header element function as a group, allowing me to move them all by moving the header element.

Overlapping Elements

There is a shadow under the header element, but unlike most shadows, it does not stick out on one side. If it were to stick out, it would flatten the overall look by unifying the background and the page. I didn’t want that, so I made the element with the shadow property shorter. But that does not look right either.

To solve the problem I covered up the header element which has the shadow. The div inside of the header extends beyond its boundaries and covers up the shadow on the right side, as this picture demonstrates.

There is no need to position the div element, since it is already where it is suppose to be. It has to be made the same height and just a little longer. To calculate the length of the div, add the 112px of padding on the left to the 848px in length. I took out the 1 px border on the sides, but left it in on the top and bottom. That makes it 960px wide, or 20 pixels longer than the header.

To calculate the height, add the 20 pixels of padding to the 90px in height, in addition to the 1px border on top and on the bottom. The div’s padding is what positions the title, which is then 112 pixels from the left and 20 pixels from the top of the header element.

Google Fonts are used, and the link to them has to be included in the header.

<link  href="http://fonts.googleapis.com/css?family=Anton:regular&v1" rel="stylesheet" type="text/css" >

The fonts can be called by using the font-family property. A shorthand version is used to combine the five font properties:

	font-family: 'Anton', serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;

To its shorthand equivalent:

	font: normal 400 48px/1.2em 'Anton', serif;

The picture of Piet is placed via absolute positioning from the right of the header div, its parent, and not the left. Since it sticks out above the header, it requires negative number for the top position. Here is the CSS:

header { 
	position: absolute; 
	top: 90px; 
	left: 0px;
	width: 940px; 
	height: 110px; 
	background: #eee; 
}
header div {
	width: 848px;
	height: 90px;
	padding: 20px 0 0 112px;
	background: #eee;
	border-top: 1px solid black; 
	border-bottom: 1px solid black; 
}
header h1 {
	color: #000;
	font: normal 400 48px/1.2em 'Anton', serif;
	font-family: 'Anton', serif;
	letter-spacing: 0.108em;
	word-spacing: 0em;
}
header figure { 
	position: absolute; 	
 	top: -70px;
 	right: 20px; 
	width: 280px;
	height: 260px;
}

And the HTML:

<header class="shadow_1"> 
	<div>
	<h1>Pete Mondrian</h1> 
	<figure class="shadow_2">
		<img src="images/Mondrian.jpg" alt="MONDRIAN himself" />
	</figure> 
	</div>
</header> 

That takes care of the header as a group. If we were to move it up or down, we could do so by changing only the header values.

Aside

The pictures on the left side make up the aside. The aside is pretty straight forward, as the pictures, which are 160px wide, fall into place once a width of 160px is specified. The figcaptions align up below the pictures. The HTML is as follows:

<aside>
	<figure>
		<img src="images/mondrian2.jpg" alt="Composition with Red, Yellow and Blue" />
		<figcaption>Composition with Red, Yellow and Blue</figcaption> 
	</figure> 
	<figure>
		<img src="images/mondrian3.jpg" alt="Composition No. III" />
		<figcaption>Composition No. III</figcaption>
	</figure> 
	<figure>
		<img src="images/mondrian4.jpg" alt="Composition No. II" />
		<figcaption>Composition No. II</figcaption>
	</figure> 
	<figure>
		<img src="images/mondrian5.jpg" alt="composition No. 10" />
		<figcaption>Composition No. 10</figcaption> 
	</figure> 
</aside>

and the CSS is:

aside { 
	position: absolute; 
	top: 200px;
}
aside figure {
	width: 160px;
	margin: 40px 0 40px 40px;
}
figcaption {
	font-size: 80%;
	color: #444;
	text-align: right;  
}

Nav

The navigation is absolutely positioned from the top of the page to just below the header picture. Though nothing was obstructing its view, the links were not working. Using the z-index property to raise it just off of the default layer exposed the link’s functionality. The anchor elements, or links, are displayed as block elements, and styled accordingly. The CSS:

nav {
	position: absolute;
	top: 300px;
	right: 80px;
	width: 120px;
	height: 140px;
	padding: 40px;
	background: #bbb;
	z-index: 1;
}
nav a {
	display: block;
	width: 100px;
	height: 25px;
	text-decoration: none;
	background: #ccc;
	padding: 5px 10px;
	margin: 3px 0;
	color: #333;
}
nav a:hover {
	text-decoration: none;
	background: #eee;
	color: #000;
}
nav a:active {
	text-decoration: none;
	background: #fcc;
	color: #000;

And the HTML:

<nav> 
	<h2 class="shadow_2">WORK</h2>
	<ul> 
		<li><a href="http://b.parsons.edu/~dejongo/12-fall/stuff/work_sheet_assignment-1.html">Assignment 1</a></li> 
		<li><a href="#">  placerat nec</a></li> 
		<li><a href="#"> tempor amet</a></li> 
		<li><a href="#"> varius sollici</a></li> 
	</ul> 
</nav>  

The navigation header and the article header are styled separately with the following CSS:

nav h2, article h2{
	position: absolute;
	top: -20px;
	left: 10px;
	height: 30px;
	width: 140px;
	padding: 8px 10px 10px;
	font: normal 400 24px/1.2em 'Anton', serif;
	letter-spacing: 0.108em;
	background: #ddd;
}

Article

The article is composed of one large picture and a div element that contains two columns. The figure falls into place. The figure is given extra padding on the bottom to push the div down. The div is given a background color, height, and padding to push the text of the first column both down and to the left. The width of the column is defined by the paragraph.

The second column is absolutely positioned so it sits beside the first. The title is given the same treatment as the nav title above.

article { 
	position: absolute; 
	top: 240px; 
	left: 240px;
}
article figure { 
	padding-bottom: 30px;
}
article div {
	position: absolute;
	margin-top: 10px;
	text-align: left;
	width: 620px;
	height: 400px;
	background: #ccc;
	line-height: 1.2;
	padding: 60px 0 0 60px;
}
article div p {
	Width: 260px;
}
.column2 {
	display: absolute;
	left: 320px;
	top: -10px;
	Width: 260px;
}

And the HTML:

<article>
	<figure>
		<img src="images/BroadwayBoogie.jpg" alt="Broadway Boogie Woogie" />
		<figcaption>Broadway Boogie Woogie</figcaption> 
	</figure>
	<div>
		<div class="column1">
			<h2 class="shadow_2">EXPERIENCE</h2>
			<p><a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Proin nec mi vitae arcu euismod sagittis eget vitae nunc. Integer eu mi felis. Nullam eleifend tincidunt magna. Cras ultrices est vel metus fermentum molestie. Maecenas ante elit, varius sollicitudin placerat nec, tempor sit amet dui. Nulla facilisi. Nam ac justo quis eros eleifend molestie in eget purus. Nulla facilisi. Sed dapibus, justo eu semper feugiat, eros turpis lobortis dolor, a malesuada sapien arcu sit amet sapien. Nulla aliquet lectus eget mauris molestie placerat.</p> 
		</div>
		<div class="column2">
			<p>Cras dolor metus. Proin diam nibh, sodales in hendrerit non, laoreet a dui. Proin tristique, sapien et mattis vestibulum, mi ante lobortis neque, in ultricies neque enim et diam.</p> 
			<p>Etiam id magna at arcu scelerisque iaculis vehicula ut tortor. In hac habitasse platea dictumst. Mauris a purus vitae lacus dictum, mi arcu porttitor velit, in aliquet tortor orci sed est. Mauris fringilla adipiscing dui, a pharetra odio porta in.</p> 
			<p>Etiam id magna at arcu scelerisque iaculis vehicula ut tortor. In hac habitasse platea dictumst. Mauris a purus vitae lacus dictum, mi arcu porttitor velit, in aliquet tortor orci sed est. Mauris fringilla adipiscing dui, a pharetra odio porta in.</p> 
		</div>
	</div>
</article> 

Footer

All that is left is the footer. Because absolutely positioned elements do not interact with the document flow, the footer cannot be positioned by the content itself. The last element is absolutely positioned, just like all the rest. The CSS:

	position: absolute; 
	top: 1100px; 
	width: 960px; 
}
footer a {
	display: block;
	width: 100%;
	padding: 5px 0;
	text-decoration: none;
	text-align: center;
	color: #444;
	background: #ddd;
}
footer a:hover {
	background: #222;
	color: #ddd
	}

And the HTML:

<footer> 
	<p> <a href="http://validator.w3.org/check?uri=referer"> Validate your page.</a> </p> 
</footer> 

The finished product. Absolute position of the elements works for print, because once the printed page is determined, the size no longer changes. That is not true of web design, and the next period will introduce a number of additional strategies to deal with layout out pages for the web.