CSS Training: Onsite and Online

Whether you're looking for customized in-person CSS training for a private group or a public online CSS class you can join, Webucator has the solution for you.

Filter and Sort

CSS Versions

6-min Narrated Presentation on CSS

  • History of CSS
  • Purpose of CSS
  • CSS: Difficulty Level
  • CSS: The Good
  • CSS: The Future
  • CSS Syntax

History of CSS

  • 1994 – CSS Proposed
  • 1996 – CSS 1 Recommendation Released
  • 1998 – CSS Level 2 Recommendation Published
  • 1999 – CSS Received Much Needed Browser Support
  • 1999 – First Drafts of CSS3

Purpose of CSS

  • CSS separates the structure (the markup language) of a document from the presentation
  • CSS controls the layout, color, and fonts of documents
  • CSS allows consistency of design and precise control

CSS Difficulty Level

CSS: The Good

  • Easy to learn
  • Easy to make changes to the layout and design of a web site without changing the HTML

CSS: The Bad

  • Display isn't always consistent across browsers
  • CSS lacks basic scripting capabilities

CSS: The Future

  • Properties constantly added
  • External programs relied on will become part of the CSS Specification
  • New libraries

Syntax

CSS rules include selectors and declarations blocks:

selector {
	property: value;
	property: value;
	property: value;
}

Comments

Comments in CSS begin with "/*" and end with "*/"

p {
	color: red; /*Paragraphs should be red*/
}

CSS Selector: Type

Specifies elements by tag name and affect every instance of that element type:


p {
	color: darkgreen;
	font-family: Verdana;
	font-size: 10pt;
}

CSS Selector: Descendant

Specifies elements by ancestry. Each "generation" is separated by a space

p strong {
	color: red;
}

CSS Selector: Child

    Indicates a parent-child relationship
  • Is indicated > between the two tag names
    p > strong {
    	color: red;
    }

CSS Selector: Class

  • The HTML class attribute assigns a class name to an element
  • Names should be descriptive of the purpose of the class
  • WARNING

    Don't go there!

    A CSS class selector begins with a dot (.) .warning { font-weight: bold; color: #ff0000;

CSS Selector: ID

  • Uniquely identifies an element on the page
  • Begins with a pound sign (#)
  • Has arbitrary names
    #mainText {
    	margin-left: 20px;  margin-right: 20px;
    }
    
    This is the main text of the page...

CSS Selector: Attribute

Specifies elements that contain a specific attribute and its value

a[target] {
	color: red;

CSS Selector: Universal

  • Matches every element
  • Applies to the rule to all elements used
  • Indicated by an asterisk (*)
    * {
    	  color: red;
    	}

CSS "Cascading" Precedence

  • The rule with the more specific selector takes precedence
  • If two selectors have the same specificity, the rule specified later in the document takes precedence

Embedded Style Sheets

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<style>
	.warning { color: #ff0000;}
	h1.warning {text-decoration: underline;}
	p.warning {font-weight: bold;}
</style>
</head>
<body>
<h1 class>="warning">WARNING</h1>
<p class>="warning">Don't go there!</p>
</body>
</html>

External Style Sheet

.warning {
	color: #ff0000;
}
h1.warning {
	text-decoration: underline;
}
p.warning {
	font-weight: bold;
}

Link to External Style Sheet

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<h1>class="warning">WARNING</h1>
<p>class="warning">Don't go there!</p>
</body>
</html>

Inline Style

Common Greetings

  • Hello
  • Hi
  • Howdy

Keep Learning CSS

By taking a Webucator CSS Class: https://www.webucator.com/webdev-training/css-training.cfm

"The course delivered a nice introduction to CSS, allowing me to be able to read and understand existing CSS code, as well as feel confident in modifying the code, and with some practice, writing it from scratch myself."

Live Online Training

The schedule below shows the next two upcoming classes for each course. For more class dates click on the course title.

CourseDatePriceRegister
Introduction to CSS TrainingOct 17 - Oct 18, 2017$690.00Register
Introduction to CSS TrainingNov 21 - Nov 22, 2017$690.00Register
Advanced CSS TrainingOct 26 - Oct 27, 2017$790.00Register
Advanced CSS TrainingNov 21 - Nov 22, 2017$790.00Register
CSS3 for Web Designers and DevelopersDec 21 - Dec 22, 2017$790.00Register
CSS3 for Web Designers and DevelopersJan 11 - Jan 12, 2018$790.00Register
Sass TrainingOct 30 - Nov 01, 2017$1,185.00Register
Sass TrainingDec 27 - Dec 29, 2017$1,185.00Register
Introduction to Bootstrap with SassNov 13 - Nov 15, 2017$1,575.00Register
Introduction to Bootstrap with SassDec 11 - Dec 13, 2017$1,575.00Register
MOC 20480 - Programming in HTML5 with JavaScript and CSS3 in Visual Studio 2012Oct 30 - Nov 03, 2017$2,375.00Register
MOC 20480 - Programming in HTML5 with JavaScript and CSS3 in Visual Studio 2012Dec 04 - Dec 08, 2017$2,375.00Register
Rapid Introduction to HTML, CSS, and JavaScriptNov 07 - Nov 10, 2017$1,300.00Register
Rapid Introduction to HTML, CSS, and JavaScriptDec 05 - Dec 08, 2017$1,300.00Register

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

88,150

Students who have taken Live Online Training

15,952

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.47

Students rated our CSS trainers 9.47 out of 10 based on 59 reviews

My learning experience was flexibly tailored to fit my particular needs of managing websites and understanding the languages of website development. The course material is content rich and I was given extra material for future reference ...Thanks!

Rob Rogers, devi mandir
Napa CA

The instructor was 100% supportive and encouraging, but at the same time she pushed us to try even the hard parts of the exercises. She was like an ideal "coach."

John Bald, n/a
Brunswick ME

An excellent class. Provides current information and practical techniques.

Steve Branson, California Dept of Health Care Services - ITSD
Sacramento CA

I've never been disappointed by any Webucator course I've taken.

Kim Henderson, Oracle Corporation
San Carlos CA

Contact Us or call 1-877-932-8228

Where We Have Trained
We've provided Web Development training all over North America!


  • Calgary, AB
  • Anchorage, AK
  • Juneau, AK
  • Dothan, AL
  • Huntsville, AL
  • Little Rock, AR
  • Chandler, AZ
  • Luke AFB, AZ
  • Phoenix, AZ
  • Scottsdale, AZ
  • Tempe, AZ
  • Tucson, AZ
  • Vancouver, BC
  • Brentwood, CA
  • Cypress, CA
  • Cyprus, CA
  • Davis, CA
  • El Dorado Hills, CA
  • El Segundo, CA
  • Folson, CA
  • Los Angeles, CA
  • MILPITAS, CA
  • Mountain View, CA
  • Norwalk,, CA
  • Palo Alto, CA
  • Pleasanton, CA
  • Redwood City, CA
  • Roseville, CA
  • Sacramento, CA
  • San Diego, CA
  • San Francisco, CA
  • San Jose, CA
  • San Ramon, CA
  • Santa Clara, CA
  • Santa Cruz, CA
  • Santa Monica, CA
  • Sunnyvale, CA
  • Torrance, CA
  • West Hollywood, CA
  • Woodland Hills, CA
  • Centennial, CO
  • Colorado Springs, CO
  • Durango, CO
  • Evergreen, CO
  • Golden, CO
  • Louisville, CO
  • Peterson AFB, CO
  • Schriever AFB, CO
  • Bristol, CT
  • Fairfield, CT
  • Hartford, CT
  • New Britain, CT
  • Norwalk, CT
  • Trumbull, CT
  • Washington, DC
  • Bushnell, FL
  • Fort Lauderdale, FL
  • Melbourne, FL
  • Miami, FL
  • Orlando, FL
  • Palm Bay, FL
  • Sarasota, FL
  • Satellite Beach, FL
  • Sunrise, FL
  • Tallahassee, FL
  • Tampa, FL
  • Alpharetta, GA
  • Atlanta, GA
  • Ft Benning, GA
  • Marietta, GA
  • Norcross, GA
  • Honolulu, HI
  • Cedar Rapids, IA
  • Dubuque, IA
  • Boise, ID
  • Aurora, IL
  • Barrington, IL
  • Chicago, IL
  • Harrisburg, IL
  • McHenry, IL
  • Mount Prospect, IL
  • Romeoville, IL
  • Skokie, IL
  • Westchester, IL, IL
  • Fort Wayne, IN
  • Indianapolis, IN
  • Leawood, KS
  • Wichita, KS
  • New Orleans, LA
  • Shreveport, LA
  • Bedford, MA
  • Boston, MA
  • Boxboro, MA
  • Cambridge, MA
  • Chelmsford, MA
  • Chicopee, MA
  • Concord, MA
  • Foxborough, MA
  • Framingham, MA
  • Holyoke, MA
  • Ipswich, MA
  • Leominster, MA
  • Northampton, MA
  • Peabody, MA
  • Randolph, MA
  • Waltham, MA
  • Watertown, MA
  • Worcester, MA
  • Annapolis Junction, MD
  • Baltimore, MD
  • Columbia, MD
  • Hanover, MD
  • Linthicum Heights, MD
  • Owings Mills, MD
  • Rockville, MD
  • Towson, MD
  • Augusta, ME
  • Ann Arbor, MI
  • Canton, MI
  • Detroit, MI
  • Grand Rapids, MI
  • Macomb, MI
  • Minneapolis, MN
  • Stillwater, MN
  • White Bear Lake, MN
  • Creve Couer, MO
  • Jefferson City, MO
  • Saint Louis, MO
  • St. Joseph, MO
  • St. Louis, MO
  • Jackson, MS
  • Vicksburg, MS
  • Fredericton, NB
  • Moncton, NB
  • Cary, NC
  • Elizabeth City, NC
  • Morrisville, NC
  • Raleigh, NC
  • Shelby, NC
  • Winston-Salem, NC
  • Bismarck, ND
  • Minot, ND
  • Bellevue, NE
  • Lincoln, NE
  • Offutt AFB, NE
  • Omaha, NE
  • Papillion, NE
  • Bridgewater, NJ
  • Elizabeth, NJ
  • Fort Monmouth, NJ
  • Franklin Lakes, NJ
  • Lawrenceville , NJ
  • Marlton, NJ
  • Nutley, NJ
  • Park Ridge, NJ
  • Pennington, NJ
  • Pennsauken, NJ
  • Roseland, NJ
  • Titusville, NJ
  • Trenton, NJ
  • Albuquerque, NM
  • Gardnerville, NV
  • Henderson, NV
  • Reno, NV
  • Albany, NY
  • Amherst, NY
  • Bayside, NY
  • Bronxville, NY
  • Brooklyn, NY
  • Buffalo, NY
  • Clinton, NY
  • Garden City, NY
  • Goshen, NY
  • Grand Island, NY
  • Jamesville, NY
  • Long Island City, NY
  • Melville, NY, NY
  • New York, NY
  • NYC, NY
  • Orangeburg, NY
  • Port Washington, NY
  • Poughkeepsie, NY
  • Pulaski, NY
  • Queensbury, NY
  • Rochester, NY
  • Syracuse, NY
  • Troy, NY
  • White Plains, NY
  • Akron, OH
  • Cincinnati, OH
  • Columbus, OH
  • Dayton, OH
  • Liberty Township, OH
  • Lima, OH
  • Orrville, OH
  • Toledo, OH
  • Norman, OK
  • Oklahoma City, OK
  • Brampton, ON
  • London, ON