If you’re wondering how to learn code. then CSS and HTML are the places to start. Both of these entry-level frontend languages are crucial when learning how to code and will serve you long into your software development career.
In fact, HTML and CSS are so commonly used that many non-coding positions require them. Even if your job doesn’t require knowledge of CSS, it’s probably something you want to pick up. That’s especially true if you’re a marketer or working in the search engine optimization (SEO) space.
But what is CSS? Let’s take a deeper look.
What is CSS?
To put it simply, CSS is a web language that allows users to style and format their websites with unique fonts, colors, and spacing, among many other things. CSS works with HTML and XML to describe what the website should look like visually.
CSS is particularly important when considering SEO and accessibility. It allows pages to share the same CSS files so load times across your website are quicker. It’s also responsible for caching a website which makes return visits smoother and quicker.
In terms of accessibility, CSS is responsible for presenting the same page in different ways across several devices, including text-to-speech, Braille-based devices, and mobile.
What Does CSS Stand for?
CSS means Cascading Style Sheets.
How Long Does it Take to Learn CSS?
Naturally, how long it takes to learn CSS depends on your desire to learn it and the time you commit to it. If you make learning CSS a top priority you should be able to pick it up within a few weeks. Coding Dojo’s intro to web development workshop is a great place to get started.
If you don’t have the time or patience to learn CSS in a few weeks, don’t stress. For many, it takes longer, but if you commit to it then you’ll have a working knowledge of CSS within a year.
The Basics of CSS
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 color 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. 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
- Colors and fonts
- Links
- Tables
- Background and opacity
- Animation and effects (although nothing too technical)
- And much more
Three Aspects of CSS
You can include CSS in your document 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. 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 color 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
This is 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.
External Style Sheets 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>This is 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.
Learn CSS at Coding Dojo
Interested in learning CSS? Coding Dojo can make that a reality. Our four coding bootcamps will get you up to speed on CSS and HTML within just a few weeks. After that, you’ll move onto more advances languages like JavaScript, Python, Node.js, and much morn.
By the end of the course you’ll be ready for an entry-level coding position. You won’t be on your own though, Our career services team will work with you for life to help you improve your resume, prep for interviews, and identify jobs that fit your skillset and needs.
All you need to do to start your coding journey is apply today