Exam 98-383: Introduction to Programming using HTML and CSS/Style Web Pages Using CSS

This lesson covers CSS styles, including position, format, backgrounds, borders, and responsive layout.

Readings

 * 1) Mozilla: Learn CSS
 * 2) Mozilla: The Box Model
 * 3)  Responsive web design

Activities

 * 1) W3Schools: CSS Exercises

Construct and analyze styles that position content
Includes positioning, including float, relative, absolute, max-width, overflow, height, width, and align; inline versus block; visibility; box model, including margins and padding.

position

 * The  CSS property specifies how an element is positioned in a document.
 * - The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of,  ,  , and.
 * - The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of,  ,  , and.
 * The  CSS property specifies the height of an element.
 * The  CSS property specifies the width of an element.
 * The  CSS property specifies what to do when content is too large to fit in its block-level container.
 * The  CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it.
 * - The element must float on the left side of its containing block.
 * - The element must float on the right side of its containing block.
 * - The element must not float.
 * The  CSS property sets the maximum width of an element.
 * To align an element in the center, specify a  and then.

display
The  CSS property specifies the type of rendering box used for an element.
 * The element generates a block element box.
 * The element generates one or more inline element boxes.

visibility
The visibility CSS property can show or hide an element without affecting the layout of a document.
 * - The element box is visible.
 * - The element box is invisible (not drawn), but still affects layout as normal.

Box Model
The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another, in that order.
 * refers to the inner margin of a CSS box — between the outer edge of the content box and the inner edge of the border.
 * sits between the outer edge of the padding and the inner edge of the margin.
 * surrounds a CSS box, and pushes up against other CSS boxes in the layout.

Construct and analyze styles that format text
Includes font-family; color; font-style; font-size; font-weight; link colors; text formatting, including text alignment, text decoration, and indentation.

font
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords.


 * The  CSS property sets the foreground color value of an element's text content and text decorations.
 * The  CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
 * The  CSS property specifies the size of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the size of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the size of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.
 * The  CSS property specifies the weight (or boldness) of the font.

link
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
 * The  CSS pseudo-class represents an element that has not yet been visited.
 * The  CSS pseudo-class represents links that the user has already visited.
 * The  CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
 * The  CSS pseudo-class represents an element (such as a button) that is being activated by the user.

text

 * The  CSS property describes how inline content like text is aligned in its parent block element.
 * The  CSS property specifies the appearance of decorative lines used on text.
 * The  CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.
 * The  CSS property specifies the appearance of decorative lines used on text.
 * The  CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.
 * The  CSS property specifies the appearance of decorative lines used on text.
 * The  CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.
 * The  CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.
 * The  CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.

Construct and analyze styles that format backgrounds and borders
Includes border-color; border-style; border-width; backgrounds; divs; colors.

border
The  CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color.
 * The  property is a shorthand property for setting the widths on all four sides of an element's border.
 * The  CSS property is a shorthand property that sets the line style for all four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property that sets the line style for all four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property that sets the line style for all four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.
 * The  CSS property is a shorthand property for setting the color of the four sides of an element's border.

background
The CSS background shorthand property lets you adjust all of the available background style options at once, including color image, origin and size, repeat method, and other features.
 * The  CSS property sets the background color of an element, using either a color value or the keyword transparent.
 * The  CSS property sets one or more background images on an element.
 * The  CSS property sets the initial position for each defined background image.
 * The  CSS property defines how background images are repeated.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property defines how background images are repeated.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property defines how background images are repeated.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property defines how background images are repeated.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property specifies the size of an element's background image.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
 * The  CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

Analyze styles that implement a simple responsive layout
Includes units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width.

Units of Measure
The following units of measure are defined relative to the current element's font-size or viewport size:
 * - Relative to the font-size of the element
 * - Relative to the x-height of the current font
 * - Relative to width of the "0" (zero)
 * - Relative to font-size of the root element
 * - Relative to 1% of the width of the viewport
 * - Relative to 1% of the height of the viewport
 * - Relative to 1% of viewport's smaller dimension
 * - Relative to 1% of viewport's larger dimension
 * - Percentage

Responsive Effects
A responsive website adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
 * The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
 * Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
 * Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

viewport
The browser's viewport is area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content. Narrow screen devices render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. A typical mobile-optimized site contains something like the following:

The  CSS at-rule lets you configure the viewport through which the document is viewed. Viewport descriptors include:
 * - Used in the determination of the width of the viewport when the document is first displayed.
 * - Used in the determination of the width of the viewport when the document is first displayed.
 * - A shorthand descriptor for setting both min-width and max-width
 * - Used in the determination of the height of the viewport when the document is first displayed.
 * - Used in the determination of the height of the viewport when the document is first displayed.
 * - A shorthand descriptor for setting both min-height and max-height
 * - Sets the initial zoom factor.
 * - Sets the minimum zoom factor.
 * - Sets the maximum zoom factor.
 * - Controls whether or not the user should be able to change the zoom factor.
 * - Controls the document's orientation.

media
The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, which test a device's type, specific characteristics, and environment.

Media types include:

Media features include:
 * - Width of the viewport
 * - Height of the viewport
 * - Width-to-height aspect ratio of the viewport
 * - Orientation of the viewport
 * - Pixel density of the output device
 * - Scanning process of the output device
 * - Does the device use a grid or bitmap screen?
 * - How frequently the output device can modify the appearance of content
 * - How does the output device handle content that overflows the viewport along the block axis?
 * - Can content that overflows the viewport along the inline axis be scrolled?
 * - Number of bits per color component of the output device, or zero if the device isn't color
 * - Approximate range of colors that are supported by the user agent and output device
 * - Number of entries in the output device's color lookup table, or zero if the device does not use such a table
 * - The display mode of the application, as specified in the web app manifest's display member
 * - Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome

Example:

Percentages vs. Pixels
Absolute units (px, pt, in, cm, etc.) are appropriate for fixed (print) media. Relative units (em, ex, ch, rem, vw, vh, vmin, vmax) are appropriate for varied viewing (screen) media.

Frameworks and Templates
A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks. Bootstrap is a popular example of a CSS framework.

max width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

Examples: