Basic CSS: A Beginner-Friendly Guide

CSS is one of the core building blocks of web design. It is used to style HTML elements and improve the appearance of web pages. In this beginner guide, the basics of CSS will be explained in simple words and passive voice so that anyone can understand how web pages are styled.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to define how HTML content should be presented in a browser. With CSS, things like text color, font size, spacing, and layout can be controlled. Without CSS, websites would appear plain and unstyled.

Why CSS is Used

HTML is used to add content to a web page, while CSS is used to control how that content looks. With the help of CSS, a better user experience is created. Web pages can be made more visually attractive, and designs can be made consistent across different pages.

How CSS Works

CSS works by applying rules to HTML elements. These rules are made up of selectors and declarations.

Here is a basic example of a CSS rule:

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

In the above example:

p is the selector (it targets all <p> tags).
color: blue; and font-size: 16px; are declarations.
Each declaration has a property (like color) and a value (like blue).

This rule will be applied to all paragraphs on the page. The text will be displayed in blue, and the font size will be set to 16 pixels.

Ways to Add CSS to a Website

There are three main ways CSS can be added to a web page:

Inline CSS
CSS is added directly inside an HTML tag using the style attribute.
Example: htmlCopyEdit<p style="color: green;">This is styled with inline CSS.</p>
Internal CSS
CSS is written inside the <style> tag in the HTML <head>.
Example: htmlCopyEdit<head> <style> h1 { color: red; } </style> </head>
External CSS
A separate CSS file is created and linked to the HTML page using a <link> tag. This is the most common method for larger websites.
Example: htmlCopyEdit<link rel="stylesheet" href="styles.css">

Basic CSS Properties That Are Commonly Used

A few basic CSS properties are listed below, and they are used often when styling a website:

color: Changes the text color
background-color: Sets the background color of an element
font-size: Controls the size of the text
margin: Adds space outside an element
padding: Adds space inside an element
border: Adds a border around an element
text-align: Aligns text (left, center, right)
width and height: Set the size of an element

These properties are used in combination to create well-designed web pages.

CSS Selectors

Selectors are used to choose which HTML elements the styles should be applied to. Here are a few examples:

* – Targets all elements
p – Targets all <p> tags
.classname – Targets all elements with a specific class
#idname – Targets the element with a specific ID

Example:

cssCopyEdit#header {
  background-color: lightgray;
}

In this case, the element with the ID “header” will be given a light gray background.

Responsive Design and CSS

With CSS, websites can be made responsive. This means they will look good on all screen sizes—desktops, tablets, and mobile phones. Responsive design is often done using media queries, which are special CSS rules that are applied only when the screen meets certain conditions.

Example:

cssCopyEdit@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In this case, the background color will be changed when the screen size is 600 pixels or less.

Need Help Designing Your Website?

If styling and layout feel overwhelming, don’t worry. Help can be provided through our professional web design services. A beautiful, responsive website can be created for you, tailored to your brand and needs—without the stress of coding everything yourself.

Final Thoughts

In this guide, the basics of CSS have been covered using simple and passive language. CSS and Javascript are the powerful tool that helps websites look good and feel easy to use. With just a few lines of CSS, major changes can be made to how a website appears.

Key Points to Remember:

CSS is used to style HTML content.
Styles can be added inline, internally, or through external files.
Properties like color, padding, and font-size are commonly used.
Responsive design is made possible with media queries.

With practice, more CSS skills can be learned, and beautiful web designs can be created. CSS may seem tricky at first, but it becomes easier as more is explored and tried.