CSS Basics - Styling the Web
CSS Basics : A Beginner Guide

CSS Basics : A Beginner Guide

Styling the Web with the CSS

Rana Vikram Sinha's photo
Rana Vikram Sinha
·

6 min read

Table of contents

Have you ever wondered how unattractive web pages transform into attractive, stunning and interactive web pages. The answer lies in CSS (Cascading Style Sheets). It is the backbone of web styling. Understanding CSS fundamentals will take your web development journey to the next level. Then lets start exploring CSS from the basics and understand what CSS is and how to use it.

Note →

What is CSS ?

CSS stands for Cascading Style Sheets. It is a stylesheet (means a set of CSS rules used to control the layout and design of a webpage) language used to describe the look and formatting of a web page written in HTML. CSS allow developers to style web pages by defining the layout, colours, fonts, spacing, animations, etc. It controls the appearance of HTML elements and enables the way to use of reusable styles across web pages. CSS helps to make a responsive web page across different devices like desktops, laptops, tablets and smartphones.

Example →

Without CSS →

With CSS →

Ways to Declare CSS

There are three primary ways to apply CSS to a web page →

1 → Inline CSS → Inline CSS is written directly within an HTML elements style attribute. It is used for applying styles to specific HTML elements. Example →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline CSS</title>
</head>
<body>
  <p style="background-color: #222222; color: blue;">This is inline CSS</p>
</body>
</html>

Advantages →

→ Quick and easy for small changes.

→ Useful for overriding styles in specific scenarios.

Disadvantages →

→ Not reusable.

→ Makes HTML elements hard to maintain.

2 → Internal CSS → Internal CSS is written within a <style> tag inside the <head> section of the HTML document. It applies styles to the entire document. Example →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Internal CSS</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is internal CSS</p>
</body>
</html>

Advantages →

→ Styles are scoped to a single document.

→ No need for external files.

Disadvantages →

→ Increases the size of the HTML file.

→ Not ideal for larger projects.

3 → External CSS → External CSS is written in a separate file with the .css extension and linked to the HTML document using the <link> tag. It is the most common practice and suitable way to style web pages. Examples →

CSS File (name → styles.css) →

body {
  background-color: #222222;
}

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

HTML File →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>External CSS</title>

  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <p>This is external CSS</p>
</body>
</html>

Advantages →

→ Reusable across multiple pages.

→ Keeps HTML clean and organized.

→ Makes styles easier to maintain.

Disadvantages →

→ Styles are less immediate compared to inline or internal CSS.

Which to Use and When ?

→ Inline CSS → Use for quick fixes or testing. Avoid it in production as it clutters HTML.

→ Internal CSS → Use for single-page projects or prototyping.

→ External CSS → Use for larger projects with multiple pages. It ensures scalability, consistency and maintainability.

Now next lets start to understand the CSS box model.

CSS Box Model

CSS box model is the foundation of layout design. Every HTML element is a rectangle box consisting of -

1 → Content → The actual content inside the box (like text, images, etc).

2 → Padding → The space between the content and the border.

3 → Border → A line wrapping around the padding (by the way if set).

4 → Margin → The space outside the border separates this element from others.

Why is it Important ?

Understanding how these layers work together helps in controlling the layout and spacing of elements on the page. Example → (also in example i use class which you will see in upcoming sections so don’t worry)

Code →

CSS →

.primary {
    padding: 10px 20px;
    margin: 10px;
    border: 2px solid blue;
  }

 .secondary {
    padding: 5px 15px;
    margin: 5px;
    border: 1px solid rgb(255, 0, 0);
  }

HTML →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <link rel="stylesheet" href="box-model.css">
</head>
<body>
    <button class="primary">Click Me</button>
    <button class="secondary">Cancel</button>
</body>
</html>

By changing the values of margins, padding and borders you control their appearance and position.

Adding CSS Changes the Look of a Webpage

CSS helps you to transform simple HTML into visually stunning designs. CSS adds style and usability to your webpage by controlling colours, fonts, alignment, spacing, etc. Example →

Code →

CSS →

h1 {
    color: teal;
    font-size: 2.5rem;
    text-align: center;
}

p {
    color: gray;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
}

HTML →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <link rel="stylesheet" href="box-model.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Classes and IDs

Understanding the role of classes and IDs is important for CSS.

Classes →

→ Reusable across multiple elements.

→ Same class has multiple names which are separated by space. (see the below example)

→ Denoted with a . in CSS.

Example →

Code →

CSS →

.box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
}

.special {
    border: 2px dashed red;
}

HTML →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classes</title>
    <link rel="stylesheet" href="box-model.css">
</head>
<body>
    <div class="box special"></div>    
</body>
</html>

IDs →

→ Unique and applied to only one element.

→ Denoted with a # in CSS.

Example →

Code →

CSS →

#uniqueBox {
  width: 300px;
  height: 300px;
  background-color: green;
}

HTML →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <link rel="stylesheet" href="box-model.css">
</head>
<body>
    <div id="uniqueBox"></div>
</body>
</html>

Best Practice →

→ Use classes for reusable styles.

→ Use IDs for unique elements like navigation bars or forms.

CSS Specificity Algorithm

CSS specificity determines which styles are applied when multiple rules target the same HTML element. In simple terms its a way for CSS to decide whose rule is more important.

Example → (i mentioned score for visualization)

→ Inline styles → The highest priority (score → 1000).

→ IDs → Stronger than classes (score → 100).

→ Classes, attributes and pseudo-classes → Moderate strength (score → 10).

→ Elements and pseudo-elements → Lowest priority (score → 1). (its advance topic of CSS)

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        color: yellow;
      }

      .highlight {
        color: blue;
      }

      #special {
        color: red;
      }

      p#special.highlight {
        color: purple;
      }

    </style>
  </head>
  <body>
    <p style="color: green" id="special" class="highlight">This is a special paragraph.</p>
  </body>
</html>

Conclusion

CSS is a way to design beautiful, responsive and user friendly websites. Without CSS it is difficult and next to impossible to make web pages attractive and easy to use by the user. But remember one thing CSS is an endless journey and some time confusing also and there is so much to learn and it depends on your creativity in how to CSS to make web pages exceptionally beautiful.

Thanks for reading this far truly appreciate it.

ChaiCodeCSS