What Is CSS? A Beginner's Guide

Ever found yourself wanting to create a unique, aesthetically pleasing webpage, but been unsure how to do it? Cascading Style Sheets (CSS) is the answer you’re looking for.

By using CSS in conjunction with HTML, you can create one-of-a-kind web pages, content elements and even works of art. Best of all, it’s easier to learn than you think—just find out how it's used to see for yourself.

What Is CSS and What Is It Used For?

CSS is a language used to add style to documents written in a markup language such as HTML.

It was invented in 1994 by Håkon Wium Lie, who just so happened to work at the same research facility where HTML and the internet itself was invented, CERN. Decades later, the language is as relevant as ever, with more than 97 percent of all websites using CSS as of July 2022.

When we say CSS can “add style,” we mean that it can control the font, color, size, opacity, position, shape, pattern, repetition and other values of a document, including:

text
background
borders
padding
icons
links
lists
tables
navigation bar
dropdown menus
margins

It’s able to do so by naming the visual feature that’s going to be stylized, followed by a specific value. Together, those two components form a declaration:

A CSS declaration consisting of a name (in this case, ‘font-size’) followed by a colon, value (in this case, ‘42px’) and semicolon. — In the Skillshare class Hand-Code Your First Website: HTML + CSS Basics, teacher Rich Armstrong shows how the basic components of CSS are used to create a declaration.

There are three main types of CSS, all of which have unique characteristics:

Inline CSS (also known as local CSS) is located within the lines of a page’s HTML code. Typically, it’s used to style individual HTML elements, such as a paragraph or header.
Internal CSS is used to define the style of a single HTML page. This type of CSS is embedded within the HTML file.
External CSS is located in an external file and can be applied to an HTML page by linking the two together.

All three types of CSS make it possible for web developers to create websites as beautiful as they are functional.

How to Learn CSS

So you want to use the near-limitless customization options CSS provides, but you’re not sure where to start. Now what?

Fortunately, CSS beginners now have more learning options than ever before. These include:

Online classes: Want to start learning CSS now? No problem—100 percent online CSS classes enable you to learn CSS anytime, anywhere.
In-person classes: If you learn best in a face-to-face environment, you may want to invest in taking in-person CSS classes at a nearby community college, trade school or university.
DIY resources: Prefer to learn on your own? Free resources like web.dev and W3Schools supply much of the information you’ll need to do so.

Whichever method you choose, learning CSS will allow you to:

customize your websites more than you could with HTML alone;
save money you might have otherwise spent on having someone else write CSS for you;
open up new career opportunities;
create faster-loading sites; and
better express your artistic style.

We aren’t kidding about that last point, either—with CSS, digital artists have created everything from stunning renditions of classic paintings to modern abstract art:

A 3D image of a pastel pink sphere floating over a matching circular platform. The background is divided into two horizontal stripes, with the upper being a salmon color and the lower being a light gray color. — Shunya Koide’s “Sphere,” coded using CSS and HTML.

Whether you want to use CSS to create art, develop games or design websites, learning it can bring you a wealth of benefits.

Basic CSS for Beginners

Want to begin your journey toward mastering CSS? These are some of the basics you’ll need to get started.

Color

One of the most fun ways to start learning CSS is by using it to paint a page with vibrant colors.

As per W3Schools, all modern browsers support 140 distinct colors, including everything from powder blue to crimson to indigo.

To use them, simply type the color of your choice (either by name, hexadecimal code or another valid value) after the CSS data type “<color>.” The following is what it would look like if you were to use CSS to turn all of a page’s paragraphs purple:

A CSS declaration instructing the web browser to display all of a page’s paragraphs in the color purple. In this case, the declaration is within the HTML “style” element. — In the Skillshare class “Code Isn't as Scary as Zombies: HTML and CSS for Writers, Editors, and Beginners,” teacher John Rhea shows how to use CSS to alter the color of all a page’s paragraphs.

Border

CSS can be used to specify the kind of border surrounding a piece of content.

For example, “border-dashed” creates a dashed border, “border-solid” creates a solid border, “border-dotted” creates a dotted border and so on.

Selectors

If you only want portions of your CSS code to apply to certain HTML elements, you can tell the browser as much by using a selector.

Selectors can usually be categorized as either classes, IDs or elements. For instance, in the example image shown under the “color” section above, the selector is the letter “p,” which indicates the subsequent CSS declaration should be applied to all p (i.e., paragraph) elements.

Padding and Margins

To add blank space around a piece of content, such as an image or paragraph, you can use CSS to create margins.

Similarly, CSS can also be used to specify how much space should exist between a piece of content and its border using something called padding.

The values for both margins and padding are expressed in pixels. You can specify all four sides at once by simply entered one value, or you can set each side individually:

A CSS declaration beginning with “margin” and ending in the values 24px, 12px, 20px and 56px. Handwritten labels indicate that each of the four values specifies either the top, right, bottom or left margin. — In the Skillshare class “The Basics of Web-Design Layout: Learn How To Describe Your Design With HTML & CSS,” teacher Rich Armstrong shows how CSS can specify all four of an element’s margins individually.

Fonts

CSS just about does it all in terms of visual customization, and fonts are no exception. In fact, you can use it to describe just about any aspect of your chosen font, from the font itself to its weight, size, family, variant and more:

CSS code within a text editing program, with a drop-down menu of font properties opened. — In the Skillshare class “Beginning CSS Page Layout for Creatives, Visual Learners, and Everybody Else,” teacher Marc Nischan shows how CSS is used to adjust font properties.

Position

If you want to specify the position of an element on your page, CSS can help with that too.

The default positioning type is static, which simply means that an element will be positioned in a fixed place relative to the viewport.

But if you want to get more advanced, you can delve into relative, absolute and sticky positioning, too.

Display

The CSS “display” property tells the browser how an element should be displayed. Common values you can use with the display property include:

inline;
block;
inline-block;
contents;
flex; and
grid.

Each one has a different effect on the specified element. For instance, the “inline” value means it will be displayed as an inline element with height and width properties having no consequence, while the “block” value means it will be displayed in a block of its own and start on a new line.

Grid Layout

Rather than being a property or value in itself, CSS Grid Layout allows you to lay things out in both rows and columns. While that might not sound like a big deal, it’s clear what a powerful benefit that is when comparing CSS Grid to Flexbox, another widely-used layout system:

An illustration of the one-dimensional nature of Flexbox, placed next to a similar illustration of the two-dimensional nature of CSS Grid. — In the Skillshare class “CSS Essentials: Getting Started with CSS Grid,” teacher Rachel Andrew compares Flexbox and CSS Grid.

Once you get more comfortable with CSS and its components, a layout system like CSS Grid can help make your coding sessions more easy and efficient.

Want to Code with Style? Learn CSS

Whether you’ve never used code before or you’re an HTML pro looking to expand your repertoire, learning CSS is a worthwhile endeavor you can start today.

From eye-catching colors to unique layouts, complete customization is just a short CSS declaration away.

Even More Coding Classes to Choose From

Beginner to Expert Programming Lessons

Browse Classes

Written By

Carrie Buchholz

Carrie Buchholz is a freelance writer who lives in Northern Colorado with her husband and dog.