CSS. It means Cascading Style Sheets. And it’s what you’ll use to bring your website to life and make it look good (rather than just the standard black and white text on a screen). But how exactly does CSS work? And how can you use it? That’s what we’re going to cover in this blog. If you haven’t done so already, we’d recommend reading our article around HTML. It’ll help to have some background knowledge on this before we dive in. But if you already know the basics, then let’s get to it.
Consider about the defaults
When you load up a Word document, you’ll know that you can change the style of a bit of text. You could make it a heading. Or make it normal text. Links automatically have that usual blue colour and are underlined. And you can change these styles, so that all your normal text is a different font, for example. It’s the same with websites. Each browser will have default settings it’ll use, and it’s typically very bland. (And, if we say so ourselves, boring.) But it makes sure that the page’s contents are readable.
CSS lets you spice up your pages
CSS is a language you’ll use to change how a page is presented to your audience. So you could use CSS to apply your clients branding to their website, as an example. And you can style pretty much anything, including:
- Titles and headings
- Paragraph and body text
- Colours and fonts
- Links
- Tables
- Background and opacity
- Animation and effects (although nothing too technical)
- And much more
You can use CSS in three ways
You can include CSS in your document (so a webpage), in three different ways:
- Inline: where you’ll use the style attribute inside HTML elements
- Internal: where you’ll use a style element in the head section of your document
- External: where you’ll use the link element to link to an external CSS file
Why use inline styling?
You’d use this when you need to update a specific section on your page. Something that breaks your usual rules and you’re only going to do once. It’s great for quickly changing how something looks. But you should never use this if you want lots of parts to follow this rule. (That’s just a waste of code.) Otherwise you’ll be pulling your hair when you want to make a mass update down the line. Remember, one major principle of any coding is to condense down your code and avoid repeating yourself. It’s the same here.
Why use internal styling?
This is for a specific page. A page that doesn’t follow the rules for the rest of your website, but the page itself needs to be consistent. Maybe you’re making a landing page and those paragraphs want to be spaced apart just a little bit more. Maybe you want to use a different colour for emphasis, instead of your usual one. So if you ever need to make a mass change to the page, you can do it all from the top of your code.
Why use external styling?
That’s a whole file dedicated to your styling code, and keeps every page consistent. You’ll typically use this when you’re styling an entire website. And it means if you ever need to update, say, the heading 1 style, you just need change it in the CSS document. Every page will then automatically update. So your external styling is your master document.
CSS follows rules
You’ll need to create a set of rules that define how you want the page to look. So if you want your heading 1 to be blue, bold, and size 30pts, then you’d write this:
h1 {
color: blue;
font-size: 30;
font-weight: bold;
}
It’s a simple style, and you’ll only find this on your external style sheet (inline and internal will look different). But let’s break this down further.
How that code works
You’ll notice the code starts off with h1. This is the HTML element that we’re going to style. So we’re styling heading one (which’ll look like <h1> in your html).
Then we have the curly braces. Inside, you’ll find different sets of properties and then the values that go with them. (They don’t actually need to be on separate lines, but it’s easier to read. The important thing is the semi-colon. That’s what tells the browser that you’ve moved onto a different property.) You can add as many properties as you like. We have the property before the colon (so color or font-size). And we have the value afterwards (blue or 30). The browser then goes through and applies them in order.
Your external style sheet will have a lot of rules
How you want to order your style sheets is up to you, but you’ll typically have multiple rules in one style sheet. So it may look something like this:
h1 {
color: blue;
font-size: 30;
font-weight: bold;
}
h2 {
color: red;
font-size: 20;
}
But obviously much longer. You can have hundreds of rules on your page, all written one after another. So make sure to cluster similar elements together to help you sort through more easily.
How to write internal CSS
You’ll create and add your internal CSS and define it in the <head> section of your HTML page or doc. It’ll be within a <style> element. So, to give you an example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
h2 {color: red;}
</style>
</head>
<body>
<h1>That’s your heading 1</h1>
<h2>This is your heading 2</h2>
</body>
</html>
So here, we’ve set the heading 1 style to blue, and heading 2 to red. This’ll only affect this single document or page, and it won’t update anywhere else on your site (unless you copy this over).
How to write inline CSS
Inline CSS is where you would give a unique style to a specific element. It’ll use the style attribute of an HTML element. So, to show you how this looks:
<h1 style=”color:blue;”>I’m a blue h1 heading</h1>
<h2 style=”color:red;”>I’m a red h2 heading</h2>
So similar to the examples we’ve been using before, we’ve now updated each specific heading with a new color. But unless we’ve used this inline style elsewhere on the doc, you won’t have updated any of the other headings.
Join our bootcamp
We hope this has answered all of your burning questions around CSS. You can learn a lot more at our coding bootcamps. They’ll teach you all of the necessary skills you need to get into coding. All from scratch. Have a look and sign up today.
Source: https://www.codingdojo.com/blog/what-is-css
