A Beginner's Guide to CSS

a stack of colored blocks on a gray surface - like background imagensized by shutter

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Cascading Style Sheets (CSS) is a vital part of web development, responsible for the overall look and feel of a webpage. It's the magic wand that turns a plain HTML page into an eye-catching and visually appealing masterpiece.

What is CSS?

CSS is a stylesheet language used to describe the appearance and formatting of a document written in HTML. It allows you to control various aspects of your web pages, such as colors, layouts, and fonts.

How Does CSS Work?

CSS works by defining a set of rules, called selectors, that target specific HTML elements on a webpage. Each selector is followed by a set of properties enclosed in curly braces {}. Properties define the style attributes (e.g., color, font-size) that you want to apply to the targeted elements.

Here's a simple example of a CSS rule:

h1 {
    color: blue;
    font-size: 24px;
}

This rule targets all <h1> elements on a webpage and sets their text color to blue and font size to 24 pixels.

How to Add CSS to an HTML Document

There are three ways to incorporate CSS into your HTML document:

  1. Inline CSS: Add the CSS directly to an HTML element using the style attribute.
<h1 style="color: blue; font-size: 24px;">Hello, Cratecode!</h1>
  1. Internal CSS: Add CSS rules within the <style> tag inside the <head> section of your HTML document.
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Hello, Cratecode!</h1>
</body>
</html>
  1. External CSS: Create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> tag in the <head> section.
<!-- In your HTML file -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, Cratecode!</h1>
</body>
</html>

/* In your styles.css file */
h1 {
    color: blue;
    font-size: 24px;
}

Basic Selectors

CSS provides different types of selectors to target various elements. Here are some basic selectors you need to know:

  1. Element (Type) Selector: Targets all elements of a specific type, such as <h1>, <p>, or <div>.
/* Targets all paragraph elements */
p {
    color: red;
}
  1. Class Selector: Targets elements with a specific class attribute. Class selectors are prefixed with a period ..
/* Targets elements with the "special" class */
.special {
    font-weight: bold;
}
  1. ID Selector: Targets an element with a specific id attribute. ID selectors are prefixed with a hash #.
/* Targets the element with the ID "main-header" */
#main-header {
    background-color: yellow;
}

Now that you have a basic understanding of CSS, it's time to dive deeper and explore more advanced concepts, such as CSS animations and CSS grid layouts. The world of web design awaits!

Hey there! Want to learn more? Cratecode is an online learning platform that lets you forge your own path. Click here to check out a lesson: Web Frameworks (React) (psst, it's free!).

Similar Articles