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.
What is CSS?
CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed on screen as it controls the layout of various web pages at once.
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.
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! |
Want to learn more about Website Builder Software? Explore Website Builder products.
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.
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.
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.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes customer marketing content, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
