OneBite.Dev - Coding blog in a bite size

write css

Code snippet for how to write css with sample and detail explanation

Writing CSS - A Simple Guide

CSS (Cascading Style Sheets) is a language used for designing and styling web pages. It is the tool that brings your web content to life by adding colors, fonts, layout designs and much more.

Writing a Basic CSS Code Snippet

CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property and a value.

Let’s consider the following example:

body {
  background-color: lightblue;
}

Code Explanation

This piece of CSS code will set the background color of the webpage to light blue.

Let’s break this down:

  • body: This is the CSS selector. It targets the HTML element you want to style. In this case, it’s targeting the <body> element.

  • { background-color: lightblue; }: This is the CSS declaration, and it’s wrapped in curly brackets {}. The CSS declaration is further divided into a CSS property (background-color) and a CSS value (lightblue).

  • The CSS property is the style characteristic you want to change. Here, we’re changing the background-color.

  • The CSS value is just what it sounds like — the value you’re giving to the property. Here, it is lightblue, which is telling the browser to change the background color of the body element to light blue.

And that’s it! It might feel a bit abstract right now, but with practice, writing CSS will become as natural as writing your own name. The key is to keep practicing and experimenting. Happy coding!

css