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

From Wikiversity
Jump to navigation Jump to search

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

Readings[edit | edit source]

  1. Mozilla: Learn CSS
  2. Mozilla: The Box Model
  3. Wikipedia: Responsive web design

Activities[edit | edit source]

  1. W3Schools: CSS Exercises

Construct and analyze styles that position content[edit | edit source]

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

position[edit | edit source]

  • The position CSS property specifies how an element is positioned in a document.[2]
    • position: relative; - The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.[3]
    • position: absolute; - 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 top, right, bottom, and left.[4]
  • The height CSS property specifies the height of an element.[5]
  • The width CSS property specifies the width of an element.[6]
  • The overflow CSS property specifies what to do when content is too large to fit in its block-level container.[7]
  • The float 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.[8]
    • float: left; - The element must float on the left side of its containing block.
    • float: right; - The element must float on the right side of its containing block.
    • float: none; - The element must not float.
  • The max-width CSS property sets the maximum width of an element.[9]
  • To align an element in the center, specify a width and then margin: auto.[10]

display[edit | edit source]

The display CSS property specifies the type of rendering box used for an element.[11]

  • display: block; The element generates a block element box.
  • display: inline; The element generates one or more inline element boxes.

visibility[edit | edit source]

The visibility CSS property can show or hide an element without affecting the layout of a document.[12]

  • visibility: visible; - The element box is visible.
  • visibility: hidden; - The element box is invisible (not drawn), but still affects layout as normal.

Box Model[edit | edit source]

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.[13]

  • padding refers to the inner margin of a CSS box — between the outer edge of the content box and the inner edge of the border.
  • border sits between the outer edge of the padding and the inner edge of the margin.
  • margin surrounds a CSS box, and pushes up against other CSS boxes in the layout.

Construct and analyze styles that format text[edit | edit source]

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

font[edit | edit source]

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.[14]

  • The color CSS property sets the foreground color value of an element's text content and text decorations.[15]
    • color: blue;
    • color: #009900;
  • The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.[16]
    • font-family: Times, Times New Roman, Georgia, serif;
    • font-family: Verdana, Arial, Helvetica, sans-serif;
    • font-family: Lucida Console, Courier, monospace;
  • The font-size CSS property specifies the size of the font.[17]
    • font-size: xx-small;
    • font-size: x-small;
    • font-size: small;
    • font-size: medium;
    • font-size: large;
    • font-size: x-large;
    • font-size: xx-large;
    • font-size: smaller;
    • font-size: larger;
    • font-size: 12px;
    • font-size: 0.8em;
    • font-size: 80%;
  • The font-weight CSS property specifies the weight (or boldness) of the font.[18]
    • font-weight: normal;
    • font-weight: bold;
    • font-weight: lighter;
    • font-weight: bolder;

link[edit | edit source]

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).[19]

  • The :link CSS pseudo-class represents an element that has not yet been visited.[20]
  • The :visited CSS pseudo-class represents links that the user has already visited.[21]
  • The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.[22]
  • The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.[23]

text[edit | edit source]

  • The text-align CSS property describes how inline content like text is aligned in its parent block element.[24]
    • text-align: left;
    • text-align: right;
    • text-align: center;
    • text-align: justify;
  • The text-decoration CSS property specifies the appearance of decorative lines used on text.[25]
    • text-decoration: underline;
    • text-decoration: none;
  • The text-indent CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block.[26]
    • text-indent: 5em;
    • text-indent: 5em each-line hanging;

Construct and analyze styles that format backgrounds and borders[edit | edit source]

Includes border-color; border-style; border-width; backgrounds; divs; colors.

border[edit | edit source]

The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color.[27]

  • The border-width property is a shorthand property for setting the widths on all four sides of an element's border.[28]
    • border-width: thin;
    • border-width: medium;
    • border-width: thick;
    • border-width: 4px;
  • The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border.[29]
    • border-style: none;
    • border-style: hidden;
    • border-style: dotted;
    • border-style: dashed;
    • border-style: solid;
    • border-style: double;
    • border-style: groove;
    • border-style: ridge;
    • border-style: inset;
    • border-style: outset;
  • The border-color CSS property is a shorthand property for setting the color of the four sides of an element's border.[30]
    • border-color: red;
    • border-color: #00ff00;

background[edit | edit source]

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 background-color CSS property sets the background color of an element, using either a color value or the keyword transparent.[31]
    • background-color: red;
    • background-color: #00ff00;
  • The background-image CSS property sets one or more background images on an element.[32]
    • background-image: url("example.png");
  • The background-position CSS property sets the initial position for each defined background image.[33]
    • background-position: top;
    • background-position: bottom;
    • background-position: left;
    • background-position: right;
    • background-position: center;
    • background-position: 25% 75%;
    • background-position: 5em 5em;
  • The background-repeat CSS property defines how background images are repeated.[34]
    • background-repeat: repeat-x;
    • background-repeat: repeat-y;
    • background-repeat: no-repeat;
  • The background-size CSS property specifies the size of an element's background image.[35]
    • background-size: cover;
    • background-size: contain;
    • background-size: 50%;
    • background-size: 50% 75%;
  • The background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.[36]
    • background-attachment: scroll;
    • background-attachment: fixed;

Analyze styles that implement a simple responsive layout[edit | edit source]

Includes units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width.

Units of Measure[edit | edit source]

The following units of measure are defined relative to the current element's font-size or viewport size:[37][38]

  • em - Relative to the font-size of the element
  • ex - Relative to the x-height of the current font
  • ch - Relative to width of the "0" (zero)
  • rem - Relative to font-size of the root element
  • vw - Relative to 1% of the width of the viewport
  • vh - Relative to 1% of the height of the viewport
  • vmin - Relative to 1% of viewport's smaller dimension
  • vmax - Relative to 1% of viewport's larger dimension
  • % - Percentage

Responsive Effects[edit | edit source]

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:[39]

  • 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[edit | edit source]

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:[40]

<meta name="viewport" content="width=device-width, initial-scale=1">

The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. Viewport descriptors include:[41]

  • min-width - Used in the determination of the width of the viewport when the document is first displayed.
  • max-width - Used in the determination of the width of the viewport when the document is first displayed.
  • width - A shorthand descriptor for setting both min-width and max-width
  • min-height - Used in the determination of the height of the viewport when the document is first displayed.
  • max-height - Used in the determination of the height of the viewport when the document is first displayed.
  • height - A shorthand descriptor for setting both min-height and max-height
  • zoom - Sets the initial zoom factor.
  • min-zoom - Sets the minimum zoom factor.
  • max-zoom - Sets the maximum zoom factor.
  • user-zoom - Controls whether or not the user should be able to change the zoom factor.
  • orientation - Controls the document's orientation.

media[edit | edit source]

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.[42]

Media types include:

  • all
  • print
  • screen
  • speech

Media features include:

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

Example:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

Percentages vs. Pixels[edit | edit source]

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.[43]

Frameworks and Templates[edit | edit source]

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.[44]

max width[edit | edit source]

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.[45]

Examples:

max-width: 3.5em;
max-width: 75%;
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

See Also[edit | edit source]

References[edit | edit source]