Essential CSS Tips for Beginners

1. What is CSS ?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML . It defines how elements should be displayed on a webpage, controlling aspects like layout, colors, fonts, sizes, spacing, and other visual properties. CSS enables the separation of content from design, improving accessibility and flexibility.

2. How to apply CSS:

CSS can be applied via:

External: Linked stylesheet (<link rel="stylesheet" href="styles.css">).
Internal: Within <style> tags in the HTML head.
Inline: Directly in an element’s style attribute.

3. CSS boilerplate:

A CSS boilerplate is like a template or starter kit for your styles, helping you begin web projects faster and with better consistency across browsers.

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

html,body{
    height: 100%;
    width: 100%;
}

4. What is Box Model and How its work?

The CSS Box Model is how every HTML element is structured on a webpage. It treats each element as a box made up of four parts: content, padding, border, and margin. This model controls the element's size and spacing.

Think of every element on a webpage like a gift box 🎁.

Content – The actual gift inside the box (text, image, etc.).
Padding – Bubble wrap around the gift. It gives space inside the box, between the content and the edges. EX – padding-left, padding-right, padding-top, padding-bottom
Border – The cardboard box itself. It wraps around the padding. EX – border-size, border-color, border-radius, border-style.
Margin – The space outside the box. It separates this gift from other nearby gifts (elements). EX – margin-top, margin-right, margin-bottom, margin-left.

5. Unlocking the Full Size: How to Calculate Element Dimensions:

Total Width = Content Width + Left & Right Padding + Left & Right Border + Left & Right Margin.
Total Height = Content Height + Top & Bottom Padding + Top & Bottom Border + Top & Bottom Margin.

<head>
    <style>
        p{
            width: 200px;
            height: 300px;
            padding: 20px;
            border: 10px solid red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>Prithwijit</p>
</body>
</html>

Total width = 200px (width) + 20px (left padding) + 20px (right padding) + 10px (left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 270px.
Total Height = 300px (Height) + 20px (Top Padding) + 20px (Bottom Padding) + 10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom Margin) = 370px

6. CSS Box Sizing

The CSS box-sizing property defines how the width and height of an element are calculated, particularly in relation to padding and borders. It controls whether these properties are included in the element’s total size or added on top of it

Type of Box Sizing:

Content Box, Border Box and Inherit

Content-box (default):

The width and height are calculated only for the content area of the element.
Padding and border are not included in the width and height.
This is the default behavior for most elements in CSS.

.example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

200px (content) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 250px total width.

Border-box:

The width and height include the padding and border.
This makes it easier to manage layouts, as you don't need to add padding and borders to the element's width and height manually.

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Inherit:

The box-sizing value is inherited from the parent element.

7. CSS Selectors Explained:

Class:

CSS class is a reusable style definition that you can apply to one or more HTML elements to control their appearance or behaviour. Classes are defined in CSS using a period ( . classname) and applied to HTML elements using the class attribute.
Reusable: A single class can be applied to multiple elements.
Syntax : Class names should be meaningful, avoid spaces, and typically use lowercase.

.example {
     height: 100%;  /* we use . for class */
     width: 100%;
}

ID:

A CSS ID is a unique style definition applied to a single HTML element to control its appearance or behavior. IDs are defined in CSS using a hash (#)
Specificity: IDs have higher specificity than classes or element selectors.
Syntax: ID names should be unique, avoid spaces, and typically use lowercase or kebab-case (e.g., #my-id-name).

#example {
     height: 100vh;  /* we use # for id */
     width: 100vw;
}

Elements:

CSS elements refer to HTML elements styled directly using element selectors in CSS. An element selector targets all instances of a specific HTML tag (e.g., div, p, h1) to apply styles without needing a class or ID.
Low Specificity: Element selectors have lower specificity than classes or ID's.

Attribute:

A CSS attribute selector is a method of selecting HTML elements to style based on the presence or value of a specific attribute. Instead of relying on a class or an ID, you can target elements that have a certain attribute, such as href, target, or type, or an attribute with a specific value, like type="text" or target="_blank".
Purpose: Target elements based on their attributes or attribute values using square brackets.

Css Pseudo classes:

CSS pseudo-classes are keywords added to selectors to style elements based on their state or position. They start with a colon (:)
Common Pseudo-Classes: Hover, active, focus.

/* hover Applies whenthe mouse pointer hover over an element */
button:hover {background: cyan;}

/* active Applies when an element is being clicked */
a:active {color: green;} 

/* focus Applies when an element has focus via keyboard or mouse */
input:focus {border-color: yellow;}

Pseudo Elements:

CSS pseudo-elements are keywords added to selectors to style specific parts of an element's content or to insert content before or after an element. They use double colons (::)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        p::first-letter {
   font-size: 2rem;
   font-weight: bold;
   color: red;
}
    </style>
</head>
<body>
    <p>Prithwijit</p>
</body>
</html>

The “P“ will appear large, bold and red

8. CSS Units and Values:

px:- Definition: A pixel (px) is a relative unit of measurement, typically tied to the display's pixel density, but adjusted for consistent visual size across devices.

In CSS, px (pixels) is a unit of measurement used to define sizes, lengths, or distances for properties like width, height, font-size, margin, padding, and more.

Use: px (pixels) Fixed size, doesn’t change with screen size.
```
 .example{
     height: 100px;
     width: 100px;
 }
```

em: The em unit in CSS is a relative measurement unit based on the font size (font-size) of the parent element or the element itself, depending on the context. It’s used for scalable sizing, especially for typography, margins, padding, and more.

Use: em Relative to the parent’s font size.

 body {
   font-size: 16px; /* 1em = 16px */
 }

 .container {
   font-size: 1.5em;     /* 1.5 × 16px = 24px */
   padding: 2em;         /* 2 × 24px = 48px padding */
   background-color: red;
 }

 .text {
   font-size: 0.875em;   /* 0.875 × 24px = 21px */
   margin-top: 1em;      /* 1 × 21px = 21px */
   color: yellow;
 }

rem: The rem unit in CSS (short for "root em") is a relative measurement unit that is based on the font size (font-size) of the root element, typically the element.

rem equals the font size set for the root element (e.g., if has font-size: 16px, then 1rem = 16px).

Use: rem Relative to the root (html) font size.

 html {
   font-size: 16px; /* 1rem = 16px */
 }

 .container {
   font-size: 1.5rem;     /* 1.5 × 16px = 24px */
   padding: 2rem;         /* 2 × 16px = 32px */
   background-color: #e0f7fa;
 }

 .title {
   font-size: 2rem;       /* 2 × 16px = 32px */
   margin-bottom: 1rem;   /* 16px */
   color: #00796b;
 }

 .text {
   font-size: 1rem;       /* 16px */
   line-height: 1.5rem;   /* 24px */
   color: #333;
 }

vw: The vw unit stands for "viewport width." It’s a way to size things in CSS based on how wide the browser window (or viewport) is. Think of it as a percentage of the screen’s width—super handy for making your website look good no matter the screen size.

i. vw = 1% of the viewport’s width.

ii. So, if someone’s browser window is 1000 pixels wide, 1vw equals 10 pixels. If they resize the window to 500 pixels, 1vw becomes 5 pixels. It’s always relative to the viewport’s width.

Use: vw (viewport width) → Relative to browser width.
```
 .container {
   width: 80vw;             /* 80% of the viewport width */
   height: 50vw;            /* 50% of the viewport width */
   background-color: #ffecb3;
   padding: 5vw;            /* 5% of the viewport width */
   font-size: 2vw;          /* Font size scales with viewport width */
   border: 1vw solid #f57c00; /* Border also scales with viewport */
   box-sizing: border-box;
 }
```

vh: The vh unit stands for “viewport height.” It’s a way to size things in CSS based on how tall the browser window (the viewport) is.

i. 1vh = 1% of the viewport’s height. So, if the browser window is 800 pixels tall, 1vh = 8px. If the window’s resized to 400px tall, 1vh = 4px. It’s dynamic and adjusts.

Use: vw (viewport height) → Relative to browser height.

 .container {
   width: 80vh;             /* 80% of the viewport height */
   height: 50vh;            /* 50% of the viewport height */
   background-color: #ffecb3;
   padding: 5vh;            /* 5% of the viewport height */
   font-size: 2vh;          /* Font size scales with viewport height */
   border: 1vw solid #f57c00; /* Border also scales with viewport */
   box-sizing: border-box;
 }

%: The % (percentage) unit in CSS is a relative measurement that sizes things based on the parent element’s dimensions.

i. If the parent width is 400px and the child is 50% = 200px. If the parent font-size is 20px it's 150% = 30px

Use: % Relative to the parent’s size (or width for margin/padding).

 .box1 {
   width: 100%;
   height: 100%;
   padding: 5%;
   background-color: #d0f0fd;
 }

 .box2 {
   width: 50%;           /* 50% of the .wrapper's width */
   height: 50%;          /* 50% of the .wrapper's height */
   background-color: #0277bd;
   margin: 10%;          /* 10% of the width of the parent */
   color: white;
   font-size: 120%;
 }

Quick rule of thumb:

Use px for fixed details.
Use em/rem for text sizing.
Use vw/vh for screen-based layouts.
Use % for fluid, container-based sizing.

Conclusion :

CSS is more than just a way to style your website — it's a powerful tool that brings structure, flexibility, and creativity to your web designs. Understanding key concepts like box-sizing, inherit, and responsive units such as em, rem, vw, and % gives you the control to build layouts that look great on any screen size.

By mastering these foundational CSS properties and units, you're not just writing styles — you're crafting experiences. Whether you're creating a simple layout or a fully responsive UI, remember: clean, consistent CSS is the backbone of a great frontend.

Thanks for reading! 🙌
Feel free to share your thoughts, questions, or favorite CSS tips in the comments!

Beginner's Comprehensive Guide to CSS

Table of contents