Introduction to CSS

Welcome to the first module of this CSS series!

In this module, we'll introduce you to the basics of CSS, including what it is, how it works with HTML, and why it's beneficial.

We'll also cover the basic syntax of CSS, its properties and values, and how to write CSS rules.

What and Why

CSS stands for Cascading Style Sheets.

CSS is a language used to describe the presentation of a web page, including colors, layout, and fonts. It allows you to create visually engaging web pages and user interfaces.

If you've just come from HTML, you'll probably notice your web pages don't look too exciting. CSS is here to fix that!

How CSS Works with HTML

CSS works alongside HTML to style your web pages.

While HTML provides the structure and content of a webpage, CSS is responsible for its look and feel. CSS can be applied directly in the HTML file, inside a <style> tag, or externally by linking to a CSS file.

The Benefits of Using CSS

1. Separation of Concerns: CSS separates the content (HTML) from the presentation (CSS), making it easier to manage and maintain.
2. Reusability: You can apply the same CSS styles across multiple web pages.
3. Consistency: Ensures a consistent look and feel across your website.
4. Accessibility: Improves accessibility by making it easier to adapt web pages for different devices and screen sizes. This is something we call "responsive" design which we will cover in a later section.

Basic Syntax

CSS syntax consists of a selector and a declaration block.

selector {
    property: value;
}

• Selector: Specifies which HTML element(s) the rule applies to.
• Property: The aspect of the element you want to change (e.g., color, font-size).
• Value: The new value for the property.

Example:

p {
    color: blue;
    font-size: 16px;
}

This rule selects all <p> elements and sets their text color to blue and font size to 16 pixels.

CSS Properties and Values

CSS properties are the aspects of HTML elements that you can style. Each property has a value that determines how the element will be styled.

Rather than overwhelm you with all of the possible options (because there is a lot) here is an example of the common CSS properties include:

color: Sets the text color. Example: Changes the text color to red.

color: red;

font-size: Sets the size of the font. Example: Sets the font size to 20 pixels.

font-size: 20px;

background-color: Sets the background color. Example: Changes the background color to light blue.

background-color: light-blue;

margin: Sets the space around the element. Example: Adds a 20-pixel margin around the element.

margin: 20px;

padding: Sets the space inside the element, between the content and the border. Example: Adds a 10-pixel padding inside the element.

padding: 10px;

font-family: Specifies the font for text. Example: Changes the font to Arial with a fallback to a generic sans-serif font.

font-family: Arial, sans-serif;

border: Sets the border around an element. Example: Adds a solid black border of 1 pixel around the element.

border: 1px solid black;

width: Sets the width of an element. Example: Sets the width of the element to 100% of its parent container.

width: 100%;

height: Sets the height of an element. Example: Sets the height of the element to 50 pixels.

height: 50px;

text-align: Sets the horizontal alignment of text. Example: Centers the text within its container.

text-align: center;

text-decoration: Adds decorations to text. Example: Underlines the text.

text-decoration: underline;

background-image: Sets a background image for an element. Example: Sets 'image.jpg' as the background image for the element.

background-image: url('image.jpg');

list-style: Sets the style of list-item markers. Example: Uses disc markers for list items.

list-style: disc;

text-transform: Controls the capitalization of text. Example: Transforms the text to uppercase.

text-transform: uppercase;

Multiple Elements

You can have multiple selections and styles mixed up. Here's a very simple example.

h1 {
  color: red;
  background-color: yellow;
  padding: 10px;
}

p {
  color: green;
  padding: 10px;
  background-color: pink;
  font-weight: bold;
}

This rule selects all <h1> elements and sets their text color to red, background color to yellow, and padding to 10 pixels. Then, it selects all <p> elements, sets the text color to green and the background to pink, gives a bold font weight, and padding to 10 pixels.

Here's what the output looks like:

Jump into the CodePen and try alter the code and see what you can do by messing with some of the CSS rules.

Some Tips to Write CSS Rules

1. Identify the HTML Element: Determine which HTML element(s) you want to style.
2. Write the Selector: Write the selector that targets the desired HTML element(s).
3. Specify the Properties and Values: Inside the declaration block, specify the CSS properties and their corresponding values.

With this foundation, you're ready to start styling your web pages and making them visually appealing. In the next section, we will learn how to use different selectors to easily choose the elements you want to style.