CSS and HTML5

Style Sheets,CSS Validation, HTML5, Handling Different Devices, image format

An Introduction to Cascading Style Sheets

CSS stands for Cascading Style Sheets. The purpose of using CSS is to separate the web content from the style/format. That is, HTML focuses on the content of the document, while CSS focuses on the format and appearance of the document. Style sheets can save a lot of work. The benefit of using CSS is demonstrated in the following example.

An HTML page with four different styles: http://www.w3schools.com/css/demo_default.htm

For more details on the basics of CSS, please click on the following link.

CSS introduction: http://www.w3schools.com/css/css_intro.asp

Style Sheets (Where to Write CSS)

You can write CSS in three different places. First, inside an HTML document, called an inline style sheet; second, inside the head section of an HTML page, called an internal style sheet; third, in an external ".css" file, called an external style sheet. A combination of multiple styles is possible. This is because all styles will be cascaded into a new "virtual" style sheet.

Three types of style sheets: http://www.w3schools.com/css/css_howto.asp

CSS Syntax and Selectors (How to Write CSS)

CSS code consists of a collection of rule sets. Each rule set has two components: that is, a selector that specifies the object to which the CSS rules applies and a declaration block that is a set of attribute-value pairs. For applying styles to a specific type of HTML element, for example, all <p>...</p> tags, you can use element selectors (i.e., p{attribute:value;}); for applying styles to a specific HTML element, you can assign a unique id attribute to the HTML element and use an id selector (i.e., #myid{attribute:value;}); and for applying styles to a set of HTML elements, you can use a class selector (i.e., .special{attribute:value;}). The following links provide details.

CSS syntax: http://www.w3schools.com/css/css_syntax.asp

Learning CSS Attributes

An important task of this lab is to learn some common CSS attributes from examples at w3schools. The following table provides links and a brief description of some of the attributes.

Topic w3schools Link Brief Description
Text http://www.w3schools.com/css/css_text.asp color, alignment, decoration (i.e. underlining or strike through), and indentation
Font http://www.w3schools.com/css/css_font.asp font-family, style (i.e., italics), and size
Border http://www.w3schools.com/css/css_border.asp style (i.e., dotted or dashed), width, and color
Align http://www.w3schools.com/css/css_align.asp centering and left/right aligning block elements
Floating http://www.w3schools.com/css/css_float.asp pushing elements left and right (useful for images and layouts)
List http://www.w3schools.com/css/css_list.asp defining the type of list item marker (type of dot or number), and specifying an image as the list item marker
Table http://www.w3schools.com/css/css_table.asp borders, width and height, text alignment, padding, and background and text colors
Box Model http://www.w3schools.com/css/css_boxmodel.asp consisting of: margins, borders, padding, and the actual content (useful for design and layout)
Margin http://www.w3schools.com/css/css_margin.asp setting margins on the top, bottom, left, and right. The margin does not have a background color
Padding http://www.w3schools.com/css/css_padding.asp setting padding on the top, bottom, left and right. The color of the padding is the background color of the element
Pseudo-class http://www.w3schools.com/css/css_pseudo_classes.asp changing attributes of links that are unvisited, "active", "hover", and "visited". Several additional selectors are in a table
Links http://www.w3schools.com/css/css_link.asp "link", "active", "hover", and "visited" links with different text and background colors and underlining
CSS Combinators http://www.w3schools.com/css/css_combinators.asp selectors for descendants, children, and siblings

Cascading Order

Generally speaking, inline has the highest priority.

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

CSS Validation

You will validate your CSS using the W3C validation service. In the same way that you validate HTML, you provide the URL to the CSS page or to the HTML page that uses the CSS. The following link provides details.

W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

You need you validate your "mystyle.css".

New Tags Introduced by HTML5

The specifications on HTML5 include several new tags that did not exist in previous versions of HTML/XHTML. The new tags include: semantic elements, form elements, graphic elements and multimedia elements. This lab focuses on the new semantic elements that define the typical parts of a web page such as the header, the footer, the navigation bar, and sections and articles. The following links provide details.

HTML5 semantic elements: http://www.w3schools.com/html/html5_semantic_elements.asp

Information on how to migrate from HTML4 to HTML5: http://www.w3schools.com/html/html5_migration.asp
It should be pointed out that CSS rule sets are necessary to attractively arrange the HTML5 semantic elements on the page. The above link also provides information on how to convert CSS originally designed for HTML4 div tags to HTML5 semantic elements.

CSS Positioning

A more advanced application of style sheets involves positioning HTML elements on the page using position, top, bottom, left and right attributes. In addition, the float attribute can be used to push HTML elements to the left or right. The following links provide details.

CSS positioning: http://www.w3schools.com/css/css_positioning.asp

CSS position properties: http://www.w3schools.com/cssref/pr_class_position.asp

The float attribute: http://www.w3schools.com/css/css_float.asp

Designing for Different Screen Sizes (Devices)

In order to produce a web page that adapts to devices with various screen sizes, Ethan Marcotte introduced the notion of responsive web design. "Responsive Web design, originally defined by Ethan Marcotte in A List Apart responds to the needs of the users and the devices they are using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns." (taken from: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/). The following links provide the original article on responsive web design written by Ethan Marcotte and some basic concepts for designing an adaptive web page for multiple devices.

Ethan Marcotte's original article on responsive web design: http://alistapart.com/article/responsive-web-design

Responsive web design basics: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

The second link provides a plethora of information, the most relevant and useful links within that site are:

  1. Setting the viewport:
    https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport
  2. Sizing content to the viewport:
    https://developers.google.com/web/fundamentals/design-and-ux/responsive/#size_content_to_the_viewport
  3. Using media queries for responsiveness:
    https://developers.google.com/web/fundamentals/design-and-ux/responsive/#css-media-queries
  4. Choosing breakpoints:
    https://developers.google.com/web/fundamentals/design-and-ux/responsive/#how_to_choose_breakpoints

For more concepts and guidelines on implementing responsive web design, refer to the following links:

  1. Home page and navigation principals: https://developers.google.com/web/fundamentals/design-and-ux/principles/
  2. Responsive web design patterns: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns
  3. Navigation and action patterns: https://developers.google.com/web/fundamentals/design-and-ux/principles/#home_page_and_site_navigation

Here are two templates of large device CSS and small device CSS.

small-devices.css, large-devices.css,
small-devices.css in text format, large-devices.css in text format

Graphics File Formats

When saving images for the web, you have to consider things like image size, quality, and file type. The following link provides a guide to saving images for the web.

A guide to saving images (using Photoshop): http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/

In Class Exercise Lab Assignment

Zip index.html, small-device.css and large-device.css into username.zip

Upload zipped file to URcourses by 11:55 PM today.

In this assignment, you will:

  1. Add the HTML5 semantic elements: header, footer, and section to your "index.html" file
  2. Modify/add to the CSS to attractively arrange these elements.
  3. Copy the two external CSS style sheets, i.e., "small-device.css" and "large-device.css". Add the two .css files in the same directory where index.html is. Make sure the permission for .css files are set as 644.
  4. Ensure that your home page ("index.html") displays in a desirable format for both smartphone/tablet and desktop computers.
  5. Here is a sample page