CSS - Quick Guide

Welcome, aspiring web developers! Today, we're diving into the colorful world of CSS. Buckle up, because we're about to embark on a journey that will transform the way you look at websites forever!

CSS - Quick Guide

What is CSS?

CSS, or Cascading Style Sheets, is like the fashion designer of the web world. If HTML is the skeleton of a website, CSS is the skin, clothes, and makeup. It's what makes websites look pretty and unique.

Imagine you're building a house. HTML would be the bricks and mortar, while CSS would be the paint, wallpaper, and furniture. It's what turns a plain structure into a home.

Let's start with a simple example:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

This little bit of CSS tells the browser to paint the entire page a light gray color (#f0f0f0) and use Arial as the default font. If Arial isn't available, it'll use any sans-serif font.

CSS - Syntax

CSS syntax is like a recipe. It has two main parts: the selector and the declaration block.

selector {
  property: value;
}

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Let's look at a more complex example:

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

Here, we're targeting all <h1> elements. We're making the text blue, setting its size to 24 pixels, and centering it on the page.

CSS - Inclusion

There are three ways to include CSS in your HTML:

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute. It's like giving fashion advice to just one person.

<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

Internal CSS

Internal CSS is placed in the <head> section of an HTML page, inside <style> tags. It's like setting dress code rules for everyone at a party.

<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
</head>

External CSS

External CSS is stored in a separate file with a .css extension. It's linked to the HTML file using the <link> tag. This is like creating a fashion magazine that everyone can refer to.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - Measurement Units

CSS has several units for expressing length. Let's look at the most common ones:

Unit	Description
px	Pixels (1px = 1/96th of 1in)
%	Percentage
em	Relative to the font-size of the element (2em means 2 times the size of the current font)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport
vh	Relative to 1% of the height of the viewport

Here's an example using different units:

div {
  width: 300px;
  height: 50%;
  font-size: 1.5em;
  padding: 2rem;
  margin-top: 10vh;
}

CSS - Colors

Colors in CSS can be specified in several ways:

By name: red, blue, green, etc.
By RGB values: rgb(255, 0, 0) for red
By Hex codes: #FF0000 for red

Let's see these in action:

h1 {
  color: blue;
}

p {
  color: rgb(255, 0, 0);
}

div {
  background-color: #00FF00;
}

CSS - Backgrounds

Backgrounds can really make your website pop. You can set a background color, image, or both!

body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

This CSS sets a light gray background color, adds an image centered on the page, ensures the image doesn't repeat, and makes it cover the entire viewport.

CSS - Fonts

Fonts are crucial for readability and style. Here's how you can set fonts:

body {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

This sets Helvetica as the preferred font, with Arial and any sans-serif font as backups. It also sets the size to 16 pixels, weight to normal, and style to italic.

CSS - Text

Text properties control how text is displayed:

p {
  color: #333;
  text-align: justify;
  text-decoration: underline;
  text-transform: uppercase;
  line-height: 1.5;
}

This CSS makes the text dark gray, justified, underlined, all uppercase, with 1.5 times the normal line height.

CSS - Using Images

Images can be styled just like any other element:

img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 50%;
}

This makes the image responsive (100% width up to 500px), maintains its aspect ratio, and gives it a circular shape.

CSS - Links

Links can be styled differently based on their state:

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:visited {
  color: purple;
}

This changes the link color to blue, removes the underline, turns it red and underlines it on hover, and makes visited links purple.

Remember, CSS is all about creativity and experimentation. Don't be afraid to play around with different properties and values. The more you practice, the better you'll become at creating beautiful, responsive web designs. Happy coding!

Credits: Image by storyset

Previous Tutorial:

CSS - Questions and Answers

Next Tutorial:

CSS - References