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

77,454

Students who have taken Live Online Training

15,384

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.57

Students rated our CSS trainers 9.57 out of 10 based on 67 reviews

I just happened to be the only student in the class and this made it very enjoyable and personalized. It was also nice that Webucator continued to offer the class with just one person.

Mark Lilley, TRUVEN Health Analytics
Greenwood Village CO

The flexibility that Webucator provides is excellent and unique.

Nollie Gildow-Owens, Dept of Interior/BOEM
Tucson AZ

This was the first virtual online course I've ever taken and now I think there is no better way! You can interact with the instructor and other students easily.

Colleen Boisvert, Safety Insurance
Revere MA

Webucator offers excellent instruction from knowledgeable instructors.

Dustin White, Oracle
Huntington Beach 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
  • 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
  • Los Angeles, CA
  • Los Angeles, 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 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
  • Washington, DC
  • 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
  • Atlanta, GA
  • Ft Benning, GA
  • Marietta, GA
  • Norcross, GA
  • Honolulu, HI
  • Dubuque, IA
  • Boise, ID
  • Aurora, IL
  • Barrington, IL
  • Chicago, IL
  • Chicago, IL
  • Chicago, 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
  • 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
  • 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
  • Fayetteville, 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