DEV Community

Cover image for Getting Started with CSS: Styling Your Web Pages
Brian Omondi Amol
Brian Omondi Amol

Posted on

Getting Started with CSS: Styling Your Web Pages

CSS (Cascading Style Sheets) is the cornerstone of web design. It allows you to control the look and feel of your website from colors fonts to layouts and animations.

1. What is CSS?

CSS is a language used to describe the presentation of a document written in HTML. It defines how HTML elements should appear on screen, paper or in other media.

2. Basic Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

for example:

body {
  background-color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

This changes the background color of the page to light blue.

3. Selectors

Selectors allow you to target specific HTML elements to apply styles. You can select elements by:

  • Type: p {} targets all paragraphs.
  • Class: .my-class {} targets elements with the class "my-class".
  • ID: #my-id {} targets elements with the ID "my-id".

4. Box Model

Every HTML element can be thought of as a box, consisting of:

  • Content: The actual text or media inside.
  • Padding: The space between the content and the border.
  • Border: The outline around the element.
  • Margin: The space outside the border, seperating elements.

5. Common Properties

Color: color: red; changes text color.

  • Font: font-size: 16px; sets the text size.
  • Background: background-color: lightgray; changes the background color.
  • Width/Height: width: 100%; and height: 200px; define element dimensions.

6. Responsive Design

Use media querries to make your web pages look good on all devices. For example:

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}
Enter fullscreen mode Exit fullscreen mode

This changes the background color to light yellow when the screen width is 600px or less.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay