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."

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

80,255

Students who have taken Live Online Training

15,548

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.53

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

By far the best online learning experience I've ever had!

Tirso Bustamante, n/a
Nipomo CA

The class was very informative and I will be able to apply what I've learned to the work that I do daily. I enjoyed learning more about DIV tags and I also enjoyed the fact that I could take the class from home.

Cristin Davis, Insight
Tempe AZ

This was my first class with Webucator. They were professional and comparable to any of my corporate sponsored classes. The pace of the class was great and the instructor well informed of the class materials.

Lisa Darrah, Autodesk, Inc.
novi MI

The instructor did a great job. She was thorough and patient with us as we learned about HTML, CSS, and Javascript.

Liliana Torres, Local Wisdom, Inc.
Princeton Junction NJ

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
  • 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
  • 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
  • Miss, ON