CSS3 - Intro, Guides, and Resources

Cascading Style Sheets, or CSS, is the language that makes the web beautiful. Along with HTML and JavaScript, it is one of the technologies that every front end developer must master.

While the web is full of resources to help you learn CSS, if you’re a beginner you may have a hard time separating great resources from those that are just ok. In this resource guide we provide a basic introduction to what CSS is, what it is capable of, as well as the features rolled out in the latest version: CSS3.

If you’re ready to jump in, here’s what this guide covers:

  • Introduction to CSS: If you’re new to CSS, this is the place to start. This section provides a basic overview of CSS, and points you toward other great resources.
  • What’s New in CSS3: If you want to research the modules that have been rolled out in CSS3, head for this topic where you’ll learn about media queries, box-sizing, 3D transformations, animations, multiple column layouts, and more.
  • Creating Responsive Websites with CSS: Websites today must render beautifully on a device of any size, and CSS is the language that makes it happen.
  • Master CSS Online: These resources provide a path to CSS mastery. If you prefer a learn-by-doing style of education, this section is for you.
  • Amazing Works of CSS: Looking for inspiration? Here we’ve collected some of the most amazing CSS creations on the web.
  • The Official Word on CSS3: Now that you know some CSS, and have learned which modules were rolled out in CSS3, it’s a good idea to familiarize yourself with the W3C, the organization that drives development of CSS.
  • Recommended Reading: If you prefer to learn with the help of an ebook or paperback, check our list of recommended books, where you’re sure to find a title that piques your interest.

Introduction to CSS

CSS, or Cascading Style Sheets, is the language used to determine the style and appearance of a website.

The content of a website, including the headers, paragraphs, and images, are loaded according to instructions contained in an HTML document, and CSS tells your browser how to present each element in that HTML document. CSS is used to do things like position items on a website, and to determine things like background color, border size and style, space between one item and the next, font family, and much more.

The core benefit of CSS is that creates a separation between the design of a website, and the contents of the website. By separating content from design sweeping design changes can be made to an entire website by adjusting just a few CSS rules in a single CSS file.

Three Places To Write CSS Rules

Before you can write a single line of CSS you need to know where to write it, and how to tie it to the HTML content that it is affecting. There are three different places you can write CSS:

  • External style sheet: A document created solely to contain CSS rules which can be applied to multiple HTML documents using the LINK element in an HTML document header.
  • Internal style sheet: CSS styles embedded directly into an HTML document header between style element tags.
  • Inline styles: CSS styles added to a single HTML element using the style attribute within the HTML document.

While there is a time and place to use internal style sheets and inline styles, the vast majority of CSS styles are best applied using an external style sheet. An external style sheet can be linked to any number of HTML documents enabling you to control the appearance of an entire website from a single CSS file.

Associating CSS Rules to Specific HTML Elements

CSS rules are constructed of two parts: a selector and a declaration. Each declaration also consists of two parts: a property and a value.

  • Selectors identify, or select, the HTML element(s) that the CSS rule is to be applied to.
  • Properties are names that describe the feature that the rule will address. A few commonly-used CSS properties are margin, border, background-color, text-align, and font-style.
  • Values describe how a property should appear. If the property in question is margin, a common value might be 10 pixels.

Selectors & Specificity

Often times a style sheet will contain conflicting rules for a single HTML element. The concept of selector specificity will determine which rules are applied to each HTML element.

For example, if a list of links is being used for the main navigation, and additional lists are presented in the main body of a page, the navigation list and the lists in the body will need different sets of CSS rules. Otherwise, the navigation menu and the list in the body of the page will be subject to the same CSS rules.

Understanding how CSS selectors work is the key to writing rules that affect the right HTML elements. While the most common CSS selectors are the id, class, and tag or element selectors, other selectors such as attributes, positional selectors, pseudo selectors, and combinations of selectors can be used to create rules with greater specificity.

Common Uses of CSS

There are many CSS properties that are applied on virtually every page of HTML. Becoming familiar with these common CSS properties will allow you to tackle the majority of styling and positioning tasks.

Styling Font

CSS can be used to create any desired font style. Whether it’s color, size, weight, line height, alignment, case, the font type itself, or decorations such as underlines and strikethroughs that you want to control, CSS properties can be used to create the desired effect. By applying the principles of specificity, a different font style can be applied to every HTML element on a page.

The Box Model

Space around each HTML element is best understood by thinking about what is referred to as the box model:

Diagram of the Box Model

The box model consists of three CSS properties: padding, border, and margin. These properties can be applied to any HTML element. It’s easiest to understand these three properties by way of example.

Consider the following HTML paragraph element:

<p>A paragraph of text.</p>

What would be the effect of writing the following CSS rule?

p {
padding: 10px;
border: solid 1px;
margin: 10px;
}

The paragraph would appear surrounded by:

  • First, 10 pixels of padding (empty space) on all sides of the paragraph text,
  • Second, a 1 pixel wide solid border around the paragraph and padding,
  • Third, 10 pixels of margin (empty space) between the border and any adjacent element.

This is what is known as the box model. Each element is boxed first by empty space called padding, next by a border, and finally by empty space called margin.

Using Floats

Floats are used to send HTML elements to the left or right of their parent element without breaking them out of the overall flow of the HTML document. Along with their sister property clear, they are one of the best ways to create website layouts. While we aren’t going to attempt to cover everything there is to know about floats, it’s critical to have a basic understanding of how they work as you begin learning CSS.

It’s easiest to understand floats in the context of a word processor document. Consider an image in a text document. Typically each image will either be located all the way to the right, with text flowing by on the left hand side of the image, or all the way to the left, with text flowing by on the right hand side of the image. On the website, this look is accomplished by using the float property.

The float property has four acceptable values: left, right, none, and inherit. In the case of our example above:

  • If the image is subject to a CSS rule with the property float, and the value of left, it will be positioned on the left side of the parent element, with text flowing by on the right hand side.
  • The value right would perform just as you’d expect.
  • None would prevent the element from floating either direction.
  • Inherit would cause the element to inherit the float value applied to the parent element.

Floats are commonly used to create site navigation menus. Typically a site navigation menu consists of an HTML unordered list, with each list item floated to the left or right, resulting in list items that appear next to each other, rather than stacked up in a bulleted list style. For example, a typical navigation menu might look like this in HTML:


<ul>
<li>Home</li>
<li>Our Store</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>

Without any CSS rules, this menu would appear as a bulleted list, with each item appearing on a new line. In order to make each item appear in a single horizontal line beginning from the left side of the page, the following CSS rule could be used.


li {
float: left;
}

Note that for the sake of simplifying this example we have used the list item tag li as the CSS selector. In reality, this would never be done. Typically a class would be assigned to the list itself, or to each list item, and that class would be used as the selector.

Clear the Float

Another property often used in conjunction with floats is the clear property. When one element is floated, all subsequent elements slide up and align themselves next to the floated element. In cases where you want subsequent elements to start below the floated item, rather than next to it, you can use the clear property to force them to start on a new line.

We’ve just scratched the surface of what can be done with floats and the clear property, but we did find this great article from CSS-Tricks that provides an in-depth look into this topic.

Using the Position Property

The CSS position property is another method often used to create website layouts. Unlike the float property, the position property is often used to break elements out of the natural flow of an HTML document, and to dictate their position very specifically.

Two values can be used with the position property: relative and absolute. After applying one of those values, additional properties such as top, bottom, left, and right can be used to position the affected element very specifically.

Using the position property to create layouts is not without risks. Unlike the float property, elements positioned by the position property will overlap other items, creating the potential for more cross-browser and viewport size issues. However, it is a widely used property within the CSS development world, and you would do well to learn the basics of using the position property.

What’s New in CSS3

While CSS2 was a single specification, CSS3 has been broken into more than fifty different modules, each at a different stage of development and acceptance. Ongoing work on CSS3 is managed by the World Wide Web Consortium, or the W3C, and they offer a centralized location where you can keep track of all ongoing CSS3 standardization work.

While work on various CSS3 modules is ongoing, many modules already have broad acceptance, and are widely used by many websites. Here are ten of the most important CSS3 properties that have already gained broad acceptance, and are supported by all modern browsers.

  • While the ability to create simple animations has been possible for a long time with JavaScript, CSS animations can now be created using simpler CSS syntax.
  • The calculation function now available with CSS3 is extremely helpful for creating responsive layouts. It can be used to add, subtract, multiply, or divide, and the result of the calculation is then used as the property value.
  • A variety of advanced selectors were added with CSS3, allowing an increased degree of specificity when selecting elements for CSS rules.
  • The addition of gradients as a background type has empowered CSS developers to create impressive backgrounds that are downloaded and displayed quickly.
  • Width and height properties applied to an element do not contain the padding, border, and margin. As a result, padding, margin, and border increase the size of an element beyond the specified width and height. This has long frustrated CSS developers who resort to complex math to fine-tune website layouts. However, with the new box-sizing property, the value border-box can be applied, forcing the padding, border, and margin within the constraints of the width and height specified, thereby simplifying the design of web page layouts.
  • CSS can be used to apply borders to any HTML element, and with the border-image property, creating and using a custom border is easier than ever. The syntax of the property itself is pretty complex, but once you get the hang of it, you can quickly create one-of-a-kind borders for any element on a website.
  • Media queries determine if the viewport of device being used to access a site meets certain specified characteristics. The @media CSS3 module is one of the key tools used to create responsive websites. Using media queries a CSS developer can create CSS rules that are only applied when certain media features, such as viewport width and height, and color display capabilities, are met. In this way, CSS developers can reposition and resize elements, or hide them all together, based on the results of the media query.
  • Using multiple backgrounds to create a specific background effect is easier than ever with CSS3. By using the background property, multiple background images, colors, and gradients can be applied to any element.
  • Using columns to create a newspaper-inspired layout is easier than ever with the columns property in CSS3. The property can be used to easily set the number of columns, and the width, creating a container where content flows easily from one column to the next. Columns are also useful for creating flexible navigation menus.
  • 3D transformations are made possible by CSS3. This is a complex subject to master, and you’ll do well to start by reading about CSS transforms, and then working your way through a few tutorials.

Creating Responsive Websites with CSS

There are hundreds, if not thousands, of different device display sizes and resolutions used every day to access the web, and as a result, it is not longer enough to have a single full-size website, and one or two designs for smaller devices. Today, your website needs to be viewable on large screens, small devices, and every viewport size in between.

In order to do this, your website CSS must comply with the three driving principles of responsive web design.

  • First, the backbone, or grid, that defines your overall layout must be fluid.
  • Second, images must resize automatically to render beautifully on any device.
  • Third, media queries must be used to address the points where the original fluid design breaks down.

When approaching a new web design project, many experienced designers begin with a mobile first technique. A site designed with this technique begins with the simplest design intended for the smallest viewport, and additional styles are added as the viewport size grows.

The mobile first technique offers two noteworthy benefits:

  • First, it forces the designer to identify the essential functions of the website, and to use those as the foundation for the design of the website. Quite often, a fullsize website contains content, such as widgets, menus, and such, that aren’t part of the site when viewed on a mobile device. A mobile first approach helps to ensure that the core purpose and functionality of the site takes center stage across all viewport sizes.
  • Second, website visitors accessing the site from a mobile phone download fewer CSS rules and website resources. If the full site is the first to load, a mobile user will download far more resources than are necessary. The mobile-first approach only loads the appropriate items on a mobile device, saving some of the visitor’s precious data, and creating a snappier site-loading experience.

Learning Responsive Design

One of the best ways to learn responsive design techniques is with a simple hands-on responsive design project. By creating your first responsive site design you’ll gain a better understanding of the concepts we’ve talked about.

With the growth in popularity of column style layouts, a new challenge has emerged for site designer: the challenge of adapting column layouts to devices of every size. Thankfully, there resources to help CSS beginners and experienced developers alike learn how to work with this new CSS property in a responsive environment.

Another great way to begin to understand how the best CSS developers adapt sites is to look at a responsive website, in a range of sizes, side-by-side. Media Queries is one site where you can see hundreds of responsive website designs in a range of sizes all on one screen.

Master CSS Online

There are many places online where you can watch videos, complete tutorials, and even code within a browser as you learn CSS. While there are dozens, if not hundreds, of resources available, here are a few of our favorite free places to learn about CSS.

If you really are brand new to CSS, Don’t Fear the Internet is a beginner-friendly video series that introduces both CSS and HTML. If you’re starting from scratch, this is a well-produced series that won’t intimidate those who are just embarking on their journey to learn CSS.

If you’ve never written a style sheet before, a good place to write your first is the CSS Tutorial provided by the World Wide Web Consortium (W3C). This tutorial doesn’t provide a lot of explanation, so if you’re a hands-on learner, this might be an ideal place to start.

Writing HTML and CSS requires that you use a text editor, save files with the proper formatting and headers, and use a browser to view your work. If you’d rather go through a program that lets you edit files directly in your browser, Codecademy is exactly what you’re looking for.

Another resource that covers much of the same ground as Codecademy, but one that will require that you learn how to use a text editor and how to save files in the correct format, is Learn to Code HTML & CSS by Shay Howe. Once you’ve mastered the basics, an advanced program is also available.

Controlling page layouts is one of the trickiest and most important tasks accomplished with CSS. If you’re having trouble getting the hang of controlling layouts, the tutorial from Learn Layout is just what you need.

The Mozilla Developer Network offers a CSS tutorial that covers all of the basic functions of CSS in a way that will prepare you to move on to more challenging topics. If you want a solid foundation from which you can grow into a full-fledged CSS developer, you could do much worse than the MDN CSS tutorial.

Lastly, no list of resources would be complete without mentioning the organization that drives development of CSS. The W3C offers a wide range of educational tutorials, including an expansive introduction to CSS. While certainly not the easiest tutorial in this list, it is comprehensive and detailed. If your goal is to learn a little CSS, this is not the tutorial for you, but if you are embarking on the journey to become a full-fledged CSS developer, this is a good tutorial to get under your belt.

Amazing Works of CSS

If you’re looking for design inspiration, or want to get a better sense of what CSS can do, here are a few places to check out showcased works of CSS.

  • Creative Bloq has pulled together this curated list of twenty two impressive CSS animations. As you look through them, keep in mind that many of these animations do also make use of JavaScript in addition to CSS.
  • CSS Design Awards created this list of ten animations complete with demos and tutorials so that you can apply the concepts to your own projects.
  • The MDN DemoStudio is a place where you can view hundreds of CSS demos sorted either by popularity, number of views, trending status, or by viewing the newest demos first.
  • Many of the animations selected for the previous lists are hosted at Code Pen, and heading directly to the pens will give you access to a huge number of impressive animations built using HTML, CSS, and JavaScript.
  • If you’ve seen all the fancy animations you care to see, and instead want to see how CSS can be used to completely change an entire website without making a single change to the HTML, check out these elegant website designs that emphasize the power of CSS.

The Official Word on CSS3

The W3C is the organization that drives development of web standards, including the CSS3 modules. As you learn CSS and level-up your skillset, you should familiarize yourself with the W3C, and the technical documentation they offer.

The W3C CSS homepage is the launching pad for all things CSS at the W3C. From this page you can locate information about ongoing standard development work, as well as access the official CSS documentation wiki.

Recommended Reading

One of the most effective ways to develop a deeper understanding and expertise with CSS3 is to use multiple sources and methods of instruction. If you’ve tried out a tutorial or two and want to try an additional method, or if you just prefer to work from a written text, here are few of the best CSS texts on the market:

  • CSS3 For Web Designers, by Dan Cedarholm: With a foreword by Jeffrey Zeldman, the founder of A List Apart, and endorsements from Chris Coyier of CSS-Tricks, and Eric Meyer, author of several books about CSS, this text by Dan Cedarholm, co-founder of Dribbble, is the gold-standard for CSS3 texts.
  • HTML & CSS: Design and Build Websites, by Jon Duckett: This texts includes both HTML and CSS, and is one of the most popular and respected introductions to both topics.
  • Learn CSS in One Day and Learn it Well, by Jamie Chan: If you are a CSS beginner, and want to get the hang of the basics quickly, this book is for you.
  • CSS: The Missing Manual, by David Sawyer McFarland: This text is not aimed purely at beginners, but instead covers advanced topics such as Flexbox and the use of Sass. If you’re ready to level-up from beginner status, this text will help you get there.