CSS Training

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 Courses

Modernizing Your CSS Skills

Browser support for modern CSS has improved immensely over the last several years. If you have worked with CSS already, but want to catch up with modern techniques, then this is the right course for you. You will learn to use new CSS selectors to better target elements on the page and to create stunning effects with colors, gradients, masks and images. You'll also learn use CSS to create pages that work equally well on different devices and screen sizes.

Next Live Class:

HTML and CSS Primer

If you are planning to learn or already know how to use a web design tool such as Adobe Dreamweaver, it is useful to have at least basic knowledge of HTML and CSS. The intention of this course is to provide the HTML and CSS training you need to fully understand what Dreamweaver and similar web design tools are doing behind the scenes, so that you can take full advantage of their power and also so that you understand why they might not always work as expected.

Next Live Class:

Introduction to CSS Training

If you have learned HTML and now are looking for CSS training so that you can create well-designed web pages, this is the right CSS course for you. By the end of the course, you'll have a solid understanding of how CSS works and will be able to put it to practice right away.

Next Live Class:

Advanced CSS Training

If you have basic CSS skills as taught in our Introduction to CSS course, but still need to improve your CSS skills to position elements on the page, format lists and forms, and target different devices, then this is the right CSS course for you. However, if you already have a lot of experience with CSS and are looking to learn the most modern CSS techniques, then our Modernizing Your CSS Skills class might be more appropriate for you.

Next Live Class:

Introduction to Bootstrap with Sass

If you already know HTML, CSS and at least some JavaScript, and want to learn to use Bootstrap and Sass to design, develop, and manage responsive web and mobile sites and applications, then this is the right course for you. You will first learn to use Bootstrap to quickly create modern looking web pages. Then we will teach you to use Sass to speed up better manage your CSS development. And finally, we'll show you how to use Bootstrap and Sass together.

Next Live Class:

MOC 20480 - Programming in HTML5 with JavaScript and CSS3

If you or your team needs to learn to use Visual Studio to create sophisticated client-side web applications, this is the right course for you. It covers HTML, CSS and JavaScript techniques used in modern web development, including techniques for communicating with a remote database and storing and managing data in the browser.

Next Live Class:

Rapid Introduction to HTML, CSS, and JavaScript

If you and your team need to get up to speed quickly on HTML, CSS, and JavaScript so that you can build and/or maintain the front end of websites, this may be the right course for you. But be aware that we cover a lot of material quickly. For a gentler introduction to these technologies, consider taking our Introduction to HTML, Introduction to CSS, and Introduction to JavaScript courses separately.

Next Live Class:

More CSS Courses

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
Modernizing Your CSS SkillsMay 03 - May 04, 2018$790.00Register
Modernizing Your CSS SkillsJun 19 - Jun 20, 2018$790.00Register
HTML and CSS PrimerMay 04 - May 04, 2018$295.00Register
HTML and CSS PrimerJun 08 - Jun 08, 2018$295.00Register
Introduction to CSS TrainingMay 07 - May 08, 2018$690.00Register
Introduction to CSS TrainingJun 26 - Jun 27, 2018$690.00Register
Advanced CSS TrainingMay 07 - May 08, 2018$790.00Register
Advanced CSS TrainingJun 26 - Jun 27, 2018$790.00Register
Sass TrainingMay 02 - May 04, 2018$1,185.00Register
Sass TrainingJun 11 - Jun 13, 2018$1,185.00Register
Introduction to Bootstrap with SassApr 23 - Apr 25, 2018$1,575.00Register
Introduction to Bootstrap with SassMay 21 - May 23, 2018$1,575.00Register
MOC 20480 - Programming in HTML5 with JavaScript and CSS3May 14 - May 18, 2018$2,375.00Register
MOC 20480 - Programming in HTML5 with JavaScript and CSS3Jun 04 - Jun 08, 2018$2,375.00Register
Rapid Introduction to HTML, CSS, and JavaScriptMay 15 - May 18, 2018$1,300.00Register
Rapid Introduction to HTML, CSS, and JavaScriptJun 12 - Jun 15, 2018$1,300.00Register

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

98,245

Students who have taken Live Online Training

16,248

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.60

Students rated our CSS trainers 9.60 out of 10 based on 45 reviews

With my work and family commitments, the courses available and the ability to work them into my life, not to mention the quality of the education, makes this the perfect solution for me.

Melanie Bell, The Goins Group LLC
Lancaster SC

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

Webucator was willing to work closely with us to identify our needs for training, and they gave us the hands-on coding time that helped us walk away with a new level of competence.

Ned Stankus, Hamilton College
Clinton NY

I felt the material was exactly what I needed to learn. The instructor was very thorough and patient. She made sure everyone was completely caught up before proceeding to new material. I never felt uncomfortable requesting assistance.

Lisa Dombroski, Macromedia
Schenectady NY

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
  • Ridgecrest, 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
  • Denver, 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
  • Rockford, 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
  • Kansas 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