What Is CSS? (+How You Can Use It To Style Your Website)

Mara Calvello
Mara Calvello  |  March 14, 2019

 Coco Chanel once said, “Fashion changes, but style endures.”

While Coco was mainly talking about the clothes we hang in our closets, I would also say that style is more than just fashion.

For instance, have you ever visited a website and thought, “dang, this is a good looking website”? Chances are that stylish website was created thanks to CSS.

You may feel like CSS and coding can be daunting, especially as you tackle website building in general. Believe me, I thought so too at one point. Keep reading and I bet you’ll be ready to add some serious style to your website before you know it.

Interested in learning something specific about CSS? Jump ahead to:

What is CSS?

To understand what CSS is, it’s best to explain how CSS and HTML are used together. HTML was created to describe the content of web pages, like the headings and paragraphs, and allowing for the embedding of images and video. On the other hand, CSS specifies the document style, which includes page layouts, colors, and fonts.

If you think of your website like a house you’re building, HTML is the drywall and CSS is the bright and vivid paint you use on our walls to add some flair.

How does CSS work?

CSS interacts with the HTML elements on web pages to make them look a certain way. For instance, if you want to make a paragraph bold and the color purple, you’d write it as:

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

The p in this instance will align with the <p> HTML code and change it so it appears bold and purple.

HTML and CSS Used Together

Like HTML, CSS is written out in simple, plain text in either a text editor or a word document on a computer. You can add this code to your HTML pages using either external, internal, or inline CSS.

External

External CSS is saved as .css files and can be used to determine the appearance of the entire website with just one file. To use, your .html files need to include a header section that links to the external sheet. It would look like this:

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

In this case, thestyleofmysite.css is the external style sheet. External is the efficient method for implementing CSS on a website, plus it’s easy to keep track and implement style.

Internal

Internal is CSS instructions written directly into the header of the .html page. You want to go this route if one page on your website is going to have its own unique look separate from the rest of your site.

<head>
<style>

body {background-color:orange;}
p {font-size:24px; color:white;}

</style>
</head>

This page will have an orange background with paragraphs sized at 24 point and white font.

Inline

When you use inline, snippets of CSS are written directly into the HTML code and applied to only a single line of code.

<h2 style=”font-size:22px;color:green;”>This is a headline.</h2>

This line of code makes one specific headline on a .html page green and in 22 point font.

Related: Check out these coding tips for beginners!

CSS Syntax

The actual code of CSS is called CSS Syntax, and it consists of a rule-set made up of a selector and a declaration block.

Elements of CSS Syntax

A selector points to the HTML element you want to style. In the example above it is the h1.

The declaration block contains one or more declarations that are separated by semicolons. Within the block are a property and a value separated by a colon. These blocks are surrounded by curly brackets.

A property is what details changes like the font size or color. The value is the setting for the property, so the specific font size and color.

The CSS syntax above will set your H1 title to be the color red and a size 14 font.

There are also syntax’s called grouping selectors. You would use a group selector when you have multiple elements that you want to have the same style. So, if you want all of your headings after your H1 to be centered, blue, and a 12 point font size, you would use a group selector that looks like:

h2, h3, h4 {text-align:center; color:blue; font-size:12px;}

Common CSS properties

There is a long list of CSS properties you can use to add some flair to web pages. Below are the common CSS properties that you will find yourself using repeatedly.

Common CSS Properties

Add some style with CSS

Ensure that your website is anything but basic when you add CSS to its formatting. From changing the font color to adding a border, you can make your web page stand out from the crowd when you utilize CSS. Don’t be afraid to roll up your sleeves and jump right in to see what Coco Chanel was talking about.

Now that you’ve got some questions answered about CSS, answer other questions on your mind about website building, like what is JavaScript and why you should learn to code.

Everything you need to build a website, FREE.    Get my 50 resources →

Mara Calvello
Author

Mara Calvello

Mara is a Senior Content Marketing Specialist at G2. In her spare time, she's typically at the gym polishing off a run, reading a book from her overcrowded bookshelf, or right in the middle of a Netflix binge. Obsessions include the Chicago Cubs, Harry Potter, and all of the Italian food imaginable.