What is CSS? An Introduction to Cascading Style Sheets

CSS (cascading style sheets) is a style sheet language. It is similar to a programming language, except instead of telling a computer what to do, it tells a web browser how to display elements on a website. We use CSS to manipulate the styles of elements on a webpage.  Make this button purple and give it rounded corners.  Make the navbar twice as thick and give it a black background color.

HTML: You cannot use CSS without a markup language

Because CSS only describes style, you cannot “see” CSS on its own, without attaching it to a corresponding markup language.

CSS can be used with HTML, XHML, XML, and other XML-based markup languages. HTML is by far the most commonly used. Markup languages use plain text, images, video, and other media, and tag them as distinct content elements — a title, a paragraph, a list, etc. From here on in, we’ll use HTML instead of the term markup language, but remember that other markup languages exist. 

In the wonderful world of grammar, adjectives like fluffy, shiny, tiny, bumpy, etc. are meaningless on their own. They need to be paired with a noun that they describe: the fluffy lamb, a tiny marmoset, etc.  The relationship between HTML and CSS is similar. 

We write HTML to define the structure or “nouns” of a webpage: I want an image and two paragraphs of text.  Then we use CSS to describe the styles of those HTML elements: Make the image huge.  Make the paragraphs bold and magenta.  Without those HTML elements, we don’t have anything to style with CSS!  Without CSS, our HTML elements look completely unstyled and generic.

An example of HTML with CSS

For example, this snippet of HTML <h1>My heading</h1> results in a plain, boring level one heading element. You can see the rendering result in the image below.  In HTML, elements are bound between <> and </> tags. If you are completely new to HTML, you’ll want to gain some familiarity with it before continuing on with CSS. 

The above heading element has no custom styles assigned, so the browser simply renders it using some default styles.  We can change that using CSS!

There are really two steps to writing CSS

1. Selecting a set of HTML elements to style
2. Applying particular style declarations 

For example, take the following CSS:

h1 {
color: purple;
}

The first line selects all h1’s on the webpage. There are many, many ways of selecting different sets of elements in CSS. Now that we’ve selected the elements, we can move on to styling them.  Line 2 sets the text color of all h1 elements to be purple.  The end result is this beautiful purple heading element:

Here’s a more complex example of a complete webpage.  Check out this codepen which only contains HTML and no CSS:

Now, here is a codepen with the same underlying HTML and CSS. The CSS makes a huge impact!

What is CSS? Facts and figures

Original release date: December 17, 1996

Current version: CSS4 (released March 24, 2017)

Browser support: Edge, Firefox, Chrome, Safari, Opera, and pretty much any other web browser you can think of, including mobile browsers! For the most up-to-date CSS properties, remember to update your browser and check it using updated CSS elements to ensure the new elements work.

Most popular CSS editor: VSCode (free and on Windows, Linux, Mac)

The current number of websites running CSS: Usage statistics from W3 Techs show that 95.4% of all websites incorporate CSS as a site element.

The three types of CSS

External CSS

External CSS refers to having a CSS document (aka file) separate from its associated HTML document. CSS files will have a .css extension; an HTML file will have a .html extension.  

It’s good practice to separate CSS from HTML files. This way, you can reuse the same stylings (or tweak them) for new HTML documents, which gives the same style across all pages of a website (or a new website). With an external CSS file, it’s also easy to update the style as needed. 

Internal CSS

Internal CSS involves inserting your CSS code into the HTML page itself, in the document’s header. 

The CSS code will be bounded by the HTML <head><style> </style></head> tags.

Inline CSS

You can also insert CSS directly into an HTML element within the HTML document. This is also known as inline styles.

For example, <p style=”color: red;”>My paragraph</p> would show a red paragraph, as p describes a paragraph, and within the p tags is the text of the paragraph. Notice that you don’t need to use an end style tag here.

What about JavaScript?

JavaScript is also often mentioned in the same breath as CSS and HTML. JavaScript is a scripting language that allows websites to be dynamic and interactive. For example, JavaScript can create a pop-up box or display something on a page if you hover over certain elements. While HTML5 can do some pretty nifty things on its own, there is no replacing JavaScript.

To wrap up: without JavaScript, the web would be a much more static and boring place. CSS + HTML + JavaScript = the web as we know it today.  If you are a complete beginner, I recommend picking up HTML and then CSS and then finally JavaScript.

Developing for the web with CSS

If you want to learn front-end web design, you need to learn CSS and HTML (and JavaScript afterward). Plenty of highly rated online courses are available such as my Web Developer Bootcamp.

FAQ 

Is there a drag and drop CSS editor?

Web designers sometimes use tools like the Bootstrap Studio IDE, which is based on the Bootstrap Framework and designed for CSS, HTML, and JavaScript. This editor does allow drag and drop as well as code editing. It may be useful for you, but it’s recommended you learn the basics of coding first.  

Is CSS necessary for learning backend development?

No. If you only want to do backend development, you’re dealing with data, not style. However, learning basic HTML, CSS, and JavaScript will allow you to develop full-stack operations.  I also recommend learning at least a little CSS to help you work with other more front-end focused developers.

How can I see a website’s CSS code?

The easiest way to do this is by using Chrome. Click the three vertical dots to show your menu, go to More Tools, then Developer Tools. This will open the code for the site. You will see the HTML (the document written in a markup language), then, to the left, under Style, the CSS code for elements. In the latest version of Chrome, you can even toggle on and off CSS styling to see how it affects the webpage.    Another option is to right-click on a webpage and select inspect to open up the Chrome Inspector, which allows you to view and manipulate the underlying CSS on a webpage.