Forms, Positioning, and Layout with CSS3

This course is included in our On-demand training solution.

Overview

Forms are key components for many web sites and CSS3 has a range of options for configuring form elements. CSS3 also includes positioning and layout options to optimize your site presentation. In this course you will learn how to apply CSS3 to forms, how to use positioning features of CSS3 and how to use CSS3 columns and the CSS3 box model for layout.

Target Audience

Web developers who want to learn how to use the features of CSS3

Prerequisites

None

Expected Duration

90 min.

Course Objectives

Course Introduction

Styling a Form

  • use CSS to style a form
  • Styling Submit Buttons

  • use CSS to style Submit buttons
  • Inserting Images in Form Fields

  • insert images in form fields using CSS
  • Highlighting Form Fields with Focus

  • use CSS to highlight fields when they gain focus
  • Styling Fields by Validity

  • use CSS to style form fields according to the validity of their input
  • Grouping Related Fields

  • use CSS to group related fields in a form
  • Styling a Form’s Range Slider

  • use CSS to style a range slider on a form
  • Styling a Form as a Paragraph with Inline Fields

  • use CSS to style a short form as a paragraph with inline fields
  • Modifying Form Input

  • use CSS to modify form input
  • Block and Inline Elements

  • contrast how block and inline elements display
  • Static and Fixed Positioning

  • use CSS to implement static and fixed positioning of elements
  • Static and Relative Positioning

  • contrast fixed and relative positioning and use CSS to implement relative positioning of elements
  • Stacking Order with z-Index

  • specify the stacking order with z-index
  • Margins and Padding

  • contrast the CSS margin and padding properties
  • Positioning Text around an Element

  • use CSS to wrap text around an element
  • Overlapping Text on an Image

  • use CSS to overlap text on an image
  • Floating Elements

  • use CSS to implement floating elements in your layout
  • Clearing Block-Level Elements

  • use the CSS clear property to improve presentation of other elements after floated elements
  • Overlapping Divs

  • overlap divs using CSS3
  • Centering a Layout

  • use CSS margin auto value to center a layout horizontally and auto value, absolute value and declared height for vertical centering
  • Creating a Thumbnails Gallery

  • use CSS techniques to create a thumbnails gallery
  • Generating Columns

  • use CSS to create a column layout
  • The Box Model

  • use CSS box model to create a layout
  • Sizing Boxes

  • use the CSS box-sizing property
  • Exercise: Work with Layouts using CSS3 (CE)

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.