← Back to list

What is CSS?

CSS is a styling technique we use to style our web pages. Before getting into CSS, we will have an introduction to HTML. Basically, HTML…

Chamath Theekshana Gunasekara · 2025-08-20 04:37 · 1 claps · 1.8 min read

#what-is-css

Open on Medium ↗

Wiki topics: 🌐 · Web Development 👗 · Fashion

What is CSS?

CSS is a styling technique we use to style our web pages. Before getting into CSS, we will have an introduction to HTML. Basically, HTML creates the plain structure of a web page. Yet it is not eye-catching as it is just the skeleton of the page. But we need to add colors to it, right? There comes CSS!

Web Page Without Styles

Web Page Without Styles

CSS, referred to as “Cascading Style Sheets,” is a major technique we use to style our HTML web pages. There are a bunch of attributes we may choose from. It includes colors, alignments, padding, margin, image styling, and much more.

Web Page With Styles

Web Page With Styles

Further there are 3 main ways we can follow to apply styles to our web page. They are,

Internal CSS

Inline CSS

External CSS

In inline CSS, we write the styling code along with the HTML code itself.

<h1 style="color: red; font-size: 28px; text-align: center;">My favourite quote</h1>

In internal CSS, we can easily write CSS code within the <style></style> tags of the HTML code placed in the head section.

<head>
<style>
h1{
    color: blue;
    text-align: center;
}
body{
    background-color: rgb(226, 226, 137);
}
p{
    color: green;
    font-size: 18px;
}

</style>

</head>

Yet the problems with using inline and internal CSS is, they make our HTML file longer and messier. Therefore, the best alternative solution is to use external CSS.

In External CSS, we make a separate file for CSS with .css extension and link it to our HTML file. One of the other benefits is in this case, we can simply link the same CSS styles to multiple HTML files. Further, it is easier to modify the code.

When linking styles to HTML elements, we use multiple ways as a connection between the particular tag and style. They are called “CSS selectors”. Universal selector, class selector, ID selector are some of them.

[Following is a sample code snippet of using external CSS.]

body{
    background-color: lightgray;
}

h1{

    font-size: 30px;
    color:darkorange;
    text-align: center;
}

p{
    color: navy;
    font-size: 18px;
}

메타데이터

post_id: e8ff14d59e73
slug: what-is-css-e8ff14d59e73
url: https://medium.com/@chamath.theekshana2004/what-is-css-e8ff14d59e73
canonical_url: https://medium.com/@chamath.theekshana2004/what-is-css-e8ff14d59e73
author_url: https://medium.com/@chamath.theekshana2004
status: ok
fetched_at: 2026-09-12 10:42:26