Remember HTML (Hypertext Markup Language)? The coding language that serves as the foundation for all web development? Well, if HTML is the first language you’ll want to learn when you’re interested in building websites, its cousin CSS is a close second coding language to learn.

Whether you’re a front end developer, a full stack developer, or someone starting in web design, how to use a CSS style sheet is something you should definitely know how to do!

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

What is CSS? And How Does It Relate to HMTL?

So what is CSS and what is CSS used for?

CSS stands for Cascading Style Sheets with an emphasis placed on “Style” and the latest version is CSS 3.

While Hypertext Markup Language (HTML) is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), Cascading Style Sheet language comes through and specifies your document’s style — page layouts, colors, and fonts (shoutout to font-family and font-style!) are all determined with CSS syntax, meaning that CSS is one important language for you to master in terms of styling your web pages!

Think of HTML as the foundation (every house has one), and Cascading Style Sheets as the aesthetic choices (there’s a big difference between a Victorian mansion and a mid-century modern home). You need both to create a web page and JavaScript to make it interactive.

How Does CSS Work?

CSS 3 brings style to your web pages by interacting with HTML elements using syntax. Elements are the individual HTML components of a web page — for instance a paragraph — which in HTML might look like this:

<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p  {  color:pink;  font-weight:bold;  }

In this case, “p” (the paragraph) is called the “selector” — it’s the part of Cascading Style Sheets code specifying which HTML element the CSS styling will affect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector.

Properties are things like font size, color, and margins, while values are the settings for those properties, and you can change these by applying changes to the selector. For example, “background-position,” “border-color,” “border-style,” and “border-width, “and “text-align” are properties and “top,” “red,” “dotted,” “thick,” and “left” are values, respectively.

For a practical example, in the example above, “color” and “font-weight” are both properties, and “pink” and “bold” are values. The full bracketed set of

{  color:pink;  font-weight:bold;  }

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more on your web page by choosing the specific selector. For instance. . .

body  {  background-color: lightblue;  }

. . .would make your page’s background light blue, or. . .

p  {  font-size:20px;  color:red;  }

. . .will create a 20 point font paragraph with red letters.

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

External, Internal, or Inline CSS?

You might be wondering how this CSS code is actually applied to HTML content, though. Much like HTML, Cascading Style Sheets are written in simple, plain text through a text editor or word processor on your computer, and there are three main ways to add that CSS code to your HTML styled pages. CSS code (or a style sheet) can be external, internal, or inline.

External style sheets are saved as a CSS file (.css) and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). To use this type of style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

<head>
<link rel=”stylesheet”  type=”text/css”  href=mysitestyle.css”>
</head>

This will link the .html file to your style sheet (in this case, mysitestyle.css), and all of the CSS instructions in that file will then apply to your linked .html pages.

Internal style sheets are CSS instructions written directly into the header of a specific .html page. (This is especially useful if you have a single page on a site that has a unique look.) An internal style sheet looks something like this. . .

<head>
<style>
body {  background-color: thistle;  }
p {  font-size:20px;  color: mediumblue;  }
</style>
</head>

. . . a thistle background color and paragraphs with 20 point, medium blue font will now be applied to this single page.

Finally, inline styles are snippets of CSS written directly into HTML code, and applicable only to a single coding instance, without an extra CSS file. For example:

<h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1>

would cause one specific headline on a single .html page to appear in violet, 40 point font.

Generally speaking, an external style sheet is the most efficient method for implementing CSS on a website (it’s easier to keep track of and implement a site’s style from a dedicated CSS file), while internal style sheets and inline style can be used on a case by case basis when individual style changes need to be made.

So if HTML is the foundation, frames, walls, and girders supporting your website, consider CSS the paint color, window styles, and landscaping that comes on afterward. You can’t get anywhere without putting that foundation up first, but —once you do — you’ll want to follow up with some style, and CSS is the ticket to unleashing your inner decorator. What’s next after you become a CSS master? JavaScript, of course!

📌 PS – If you’d like to learn more about CSS, front end development, or web design, Skillcrush can help you get there! Our Break Into Tech course is a comprehensive program designed to help total beginners in tech start a new and fulfilling career.

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals