Ok, you followed my HTML tutorial for beginners and know how to create a basic webpage. But the thing looks dull, right? I’ve mentioned Cascading Style Sheets (CSS) a couple of times already, and now it’s time to dive into this subject. It’s time to style our pages with this CSS tutorial for beginners!
Why this CSS Tutorial?
You’re about to learn the basics of Cascading Style Sheets (CSS) using Web Developer Land’s CSS Tutorial. Reasons why you might want to start with this tutorial instead of all the other (terrific) resources out there:
- We’ll go into some of the basics behind CSS that are often skipped elsewhere, leaving you with large gaps in your knowledge
- I provide lots of interactive examples.
- I’ll share a curated set of resources to deepen your knowledge.
- It’s completely free.
Convinced? OK – – Let’s dive right in!
What is CSS?
CSS describes how HTML elements must be displayed on:
- screen (in browser),
- paper (when printing),
- speech (for speech syntesizers)
The ‘cascading’ in Cascading Style Sheets refers to the fact that styling rules cascade down from several sources. CSS has a hierarchy, and styles of higher precedence overwrite rules of lower precedence.
For example, a specific style might be applied at the document root level, like picking a font to use. This style cascades down to all the elements in the document hierarchy that the style applies to. However, you can override the style with a more specific rule. E.g., you might want to give your headers another font.
If this sounds vague, don’t worry. It will become more clear as you read on.
How to insert CSS into a webpage
There are three ways to include CSS in a webpage:
- Inline the styles in an element, with the style attribute
- Embedding the styles in the page header, with style tags
- Linking to an external file that contains the styles
Adding inline CSS
When to use this
Example”
Embedding
CSS is always placed in the head-section of your webpage, and enclosed by <style> .. </style> tags.
<!DOCTYPE html>
<html>
<head>
<style>
.redandbold {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="redandbold">Is this red? And bold?</p>
<p>It sure is!</p>
</body>
</html>Linking to a CSS file
To be continued.
How to continue this CSS Tutotial
Each page has links at the top and bottom. Follow these links to navigate to the next and previous topics in order. If you’re reading this on a device with decent screen width, there’s a global menu to your right. On small screens, like phones, the menu is located at the bottom. This menu gives an overview of all the topics discussed. It’s also an indicator of how far you are in the tutorial.