Exam 98-375: HTML5 Application Development Fundamentals/Format the User Interface by Using CSS

From Wikiversity
Jump to navigation Jump to search

This lesson covers Format the User Interface by Using CSS. It looks at CSS concepts, layout, text flow, and graphics.

Activity 1 - Understand the Core CSS Concepts[edit | edit source]

This objective may include but is not limited to: separating presentation from content – create content with HTML and style content with CSS; managing content flow - inline vs. block flow; managing positioning of individual elements – float vs. absolute positioning; managing content overflow – scrolling, visible, and hidden; basic CSS styling.

  1. Read Internet Explorer® Learning.
  2. Read Cascading Style Sheets.
  3. Read W3Schools CSS.

Activity 2 - Arrange User Interface (UI) Content by Using CSS[edit | edit source]

This objective may include but is not limited to: using flexible box and grid layouts to establish content alignment, direction, and orientation; proportional scaling and use of “free scale” for elements within a flexible box or grid; ordering and arranging content; concepts for using flex box for simple layouts and grid for complex layouts; grid content properties for rows and columns; using application templates.

  1. Read HTML Rocks.
  2. Read http://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx Flexible box (“Flexbox”) Layout].
  3. Read W3Schools Flexbox.

Activity 3 - Manage the Flow of Text Content by Using CSS[edit | edit source]

This objective may include but is not limited to: regions and using regions to flow text content between multiple sections – content source, content container, dynamic flow, flow-into, flow-from, msRegionUpdate, msRegionOverflow, msGetRegionContent(); columns and hyphenation and using these CSS settings to optimize the readability of text; using “positioned floats” to create text flow around a floating object.

  1. Read Regions, Hyphenation, Multi-Column Layout.
  2. Read Windows Dev Center Positioned Floats.
  3. Read W3Schools Multicol.

Activity 4 - Manage the Graphical Interface by Using CSS[edit | edit source]

This objective may include but is not limited to: graphics effects - rounded corners, shadows, transparency, background gradients, typography, and Web Open Font Format; 2D and 3D transformations – translate, scale, rotate, skew, and 3D perspective transitions and animations; SVG filter effects; Canvas.

  1. Read Microsoft Typography.
  2. Read How to Add Rounded Corners with CSS.
  3. Read W3Schools CSS3.

References[edit | edit source]