Add style to your sites—and even create digital art—by learning this web language. CSS is where function meets beauty in the digital world.
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.
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:
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:
There are three main types of CSS, all of which have unique characteristics:
All three types of CSS make it possible for web developers to create websites as beautiful as they are functional.
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:
Whichever method you choose, learning CSS will allow you to:
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:
Whether you want to use CSS to create art, develop games or design websites, learning it can bring you a wealth of benefits.
Want to begin your journey toward mastering CSS? These are some of the basics you’ll need to get started.
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:
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.
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.
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:
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:
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.
The CSS “display” property tells the browser how an element should be displayed. Common values you can use with the display property include:
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.
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:
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.
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.
Beginner to Expert Programming Lessons
Join today for unlimited access to thousands of classes and more.Try Skillshare For Free