Complete Beginner's Guide to CSS: Understanding the Basics.

Complete Beginner's Guide to CSS: Understanding the Basics.

Walid Ezzat's photo
Walid Ezzat
·

8 min read

Table of contents

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language that controls the presentation of a web page. While HTML defines the structure of the content (like paragraphs, images, and links), CSS makes the page look visually appealing by applying styles such as colors, fonts, and layout arrangements.

Key Facts about CSS:

  • CSS is not a programming language. It’s a "stylesheet language" used to style and layout web pages.

  • It works by applying CSS rules to HTML elements.

  • CSS helps separate content from design, making it easier to maintain and update.

How CSS Works: The Basics

CSS consists of rules that are made up of a selector and declarations.

CSS Rule Structure:

selector {
  property: value;
}

  • Selector: This is the HTML element (or elements) that you want to style. For example, p selects all paragraphs, and .class-name selects all elements with a specific class.

  • Property: This defines what you want to change (e.g., color, font-size, margin).

  • Value: This is the setting you want to apply to the property (e.g., red, 16px, 10px).

Example:

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

This CSS rule will make the text inside all <p> tags blue with a font size of 16 pixels.

CSS Selectors: Selecting Elements

Selectors allow you to target specific elements on the page to apply styles.

Types of Selectors:

  1. Type Selectors: Target elements by their tag name (e.g., p, div).

     p {
   color: green;
 }

  2. Class Selectors: Target elements by their class attribute (e.g., .button).

     .button {
   background-color: orange;
 }

  3. ID Selectors: Target elements by their id attribute (e.g., #header).

     #header {
   font-size: 24px;
 }

  4. Universal Selector: Selects all elements on the page.

     * {
   margin: 0;
 }

Understanding CSS Specificity

One of the most confusing aspects of CSS is understanding specificity. Specificity determines which CSS rule takes precedence when multiple rules conflict. Think of it as a ranking system for your selectors.

How Specificity is Calculated:

Specificity is calculated using four values, in the order: inline styles, IDs, classes, and elements.

  1. Inline Styles: 1,0,0,0 – The highest specificity, because they are directly applied to the element in the HTML.

  2. IDs: 0,1,0,0 – More specific than classes and elements.

  3. Classes, Pseudo-classes, and Attribute Selectors: 0,0,1,0.

  4. Elements and Pseudo-elements: 0,0,0,1.

Example:

<div id="container">
  <p class="highlight">This is important text.</p>
</div>

/* Less specific */
.highlight {
  color: blue;
}

/* More specific */
#container .highlight {
  color: red;
}

In this example, the text will be red because the selector #container .highlight is more specific than just .highlight.

Why is Specificity Important?

When multiple styles apply to the same element, the browser uses specificity to decide which rule to apply. Higher specificity values win.

The Cascade: Order of Rules

CSS stands for Cascading Style Sheets, which means that the order in which rules are declared matters.

  • When two rules target the same element and have the same specificity, the rule that appears last in the CSS will be applied.

  • However, specificity can override the order.

Example:

p {
  color: black;
}

p {
  color: green;
}

In this case, the paragraph text will be green because the second p rule overrides the first.

Pseudo-Classes: Styling Elements Based on State

Pseudo-classes are used to apply styles based on the state of an element. This allows for interactive effects like when a user hovers over a button or when a link is clicked.

Common Pseudo-Classes:

  1. :hover: Applied when the user hovers over an element.

  2. :focus: Applied when an element (like a form input) is focused.

  3. :visited: Applied to links that the user has already visited.

  4. :nth-child(): Selects elements based on their position in a list or group.

Example:

/* Change the color of a link when hovered */
a:hover {
  color: red;
}

/* Change the background color of an input when focused */
input:focus {
  background-color: lightblue;
}

Interactive Example:

Imagine you have a list of links, and you want to change their color when a user hovers over them. Here’s how you can use :hover:

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>

a:hover {
  color: orange;
}

Now, whenever a user hovers over any of the links, the text will turn orange.

Pseudo-Elements: Styling Specific Parts of Elements

Pseudo-elements allow you to style specific parts of an element. This is especially useful for styling content that is not directly in the HTML, like the first letter of a paragraph or content before or after an element.

Common Pseudo-Elements:

  1. ::before: Insert content before an element.

  2. ::after: Insert content after an element.

  3. ::first-letter: Target the first letter of a text block.

  4. ::first-line: Target the first line of a text block.

Example:

/* Style the first letter of a paragraph */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

/* Add content before a heading */
h2::before {
  content: "→ ";
  font-size: 1.5em;
}

In this example, the first letter of each paragraph will be enlarged and bold, and the heading will have an arrow before it.

CSS Reset/Normalize: Consistent Styling Across Browsers

When building websites, one of the challenges is ensuring that your design looks the same across all browsers. Different browsers have their own default styles, which can cause inconsistencies.

CSS Reset:

A CSS reset is a set of CSS rules designed to remove the default browser styling. This gives you a clean slate to start with, ensuring consistency.

Eric Meyer’s Reset CSS is one of the most famous examples. Here’s a simple reset CSS file:

/* Resetting all margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Normalize.css:

Unlike a reset, Normalize.css doesn’t remove all styles but rather makes them consistent across browsers. It standardizes the appearance of HTML elements, such as headings, tables, and form controls.

Responsive Design: Making Your Website Work on Any Device

Responsive design ensures that your website adjusts its layout to look good on all screen sizes, from mobile phones to large desktop monitors. The goal is to create a flexible layout that adapts to different devices and screen resolutions.

Key Techniques for Responsive Design:

  1. Fluid Layouts: Use percentages instead of fixed pixels for widths and margins to allow elements to resize fluidly.

     .container {
   width: 100%;
   padding: 20px;
 }

  2. Media Queries: Media queries allow you to apply different styles based on the screen size. They help you create a responsive layout by changing styles for different devices.

     /* Default styles */
 .container {
   width: 100%;
 }

 /* Styles for screens wider than 768px */
 @media (min-width: 768px) {
   .container {
     width: 80%;
   }
 }

 /* Styles for screens wider than 1200px */
 @media (min-width: 1200px) {
   .container {
     width: 60%;
   }
 }

  3. Flexible Images: Use max-width: 100% to make images resize according to their container’s width.

     img {
   max-width: 100%;
   height: auto;
 }

  4. Mobile-First Design: Start designing for small screens (mobile-first), and then progressively enhance the layout for larger screens using media queries.

An example of a CSS starter file for a new project with the responsive breakpoints included.

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and Basic Styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

/* Links */
a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  color: #0056b3;
}

/* Container for general layout */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: #333;
}

/* Flexbox Layout for Mobile First */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

/* Grid System (Desktop and Mobile) */
.grid {
  display: grid;
  gap: 20px;
}

/* Button Style */
button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* Image */
img {
  max-width: 100%;
  height: auto;
}

/* Media Queries */

/* Small devices (mobile) */
@media (max-width: 599px) {
  .container {
    width: 100%;
    padding: 10px;
  }

  .flex-container {
    flex-direction: column;
  }

  button {
    width: 100%;
  }
}

/* Medium devices (tablets) */
@media (min-width: 600px) and (max-width: 991px) {
  .container {
    width: 95%;
  }

  .flex-container {
    flex-direction: row;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }

  button {
    width: 48%;
  }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
  .container {
    width: 80%;
  }

  .flex-container {
    flex-direction: row;
  }

  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  button {
    width: auto;
  }
}

/* Extra Large devices (large desktops) */
@media (min-width: 1200px) {
  .container {
    width: 75%;
  }

  .flex-container {
    flex-direction: row;
  }

  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Key Elements:

  1. Global Reset: Resets margins, padding, and box-sizing across all elements.

  2. Responsive Design: Media queries for four common breakpoints (max-width: 599px, 600px to 991px, 992px to 1199px, 1200px+) to adjust layout for different screen sizes.

  3. Flexbox: Used for mobile-first responsive design.

  4. Grid Layout: Adjusts for multiple columns based on screen size.

  5. Buttons and Images: Styled to ensure they look good on all devices.

Feel free to adjust or expand on this starter to suit your specific project needs!

Hope that helps.

CSSHTML5Web DevelopmentwebdevFrontend Developmentfrontend