What is CSS and How It Makes Websites Beautiful

By Viraj Harshana — Undergraduate, University of Moratuwa

Introduction

Have you ever visited a website and thought — “Wow, this looks amazing”? The colors, the fonts, the buttons, the layout — all of that is controlled by one thing: CSS.

Without CSS, every website would look like a plain black and white text document. CSS is what transforms that boring text into a beautiful, colorful, and modern website.

In this article, I will explain what CSS is, how it works, and how it makes websites look beautiful — in the simplest way possible.

What is CSS?

CSS stands for Cascading Style Sheets.

It is a language used to describe how HTML elements should look on a webpage. While HTML builds the structure of a page, CSS handles the visual appearance.

Think of it this way:

HTML is the structure of a house — the walls, doors, and windows.

CSS is the paint, furniture, and decoration that makes it look beautiful.

How Does CSS Work?

CSS works by selecting an HTML element and applying styles to it.

For example, you can tell CSS to find every heading on the page, make the text orange, set the font size to 40px, and center it on the page.

It is that simple. You select something, then describe how it should look.

3 Ways to Add CSS

There are 3 ways to add CSS to a webpage.

The first way is Inline CSS. This means writing the style directly inside the HTML tag itself. For example, you can make a paragraph red by adding the style directly to that paragraph tag.

The second way is Internal CSS. This means writing your CSS inside a style tag within your HTML file. All the styles sit at the top of the page.

The third way is External CSS. This is the best method. You write all your CSS in a separate file called style.css and link it to your HTML file. This keeps your code clean, organized, and easy to manage.

The Basic Structure of CSS

Every CSS rule has 3 parts.

The first part is the Selector. This tells CSS which element to style — for example a heading, a paragraph, or a button.

The second part is the Property. This tells CSS what to change — for example the color, the font size, or the background.

The third part is the Value. This tells CSS how to change it — for example red, 20px, or blue.

Together they form one simple rule that makes an element look exactly how you want.

How CSS Makes Websites Beautiful

Here are the main ways CSS transforms a plain webpage into something beautiful.

1. Colors and Backgrounds

CSS can add color to absolutely anything on your page. You can give the background a deep dark navy color, make the text bright white, and give buttons a bold orange color. Without CSS, everything would just be black text on a white background.

2. Fonts and Typography

CSS controls the font style, size, weight, and spacing of every piece of text on your page. You can choose beautiful Google Fonts, make headings large and bold, and give paragraphs comfortable line spacing so they are easy to read. Good typography makes a website feel professional and trustworthy.

3. Layouts with Flexbox and Grid

CSS controls how elements are arranged on the page. Using Flexbox you can place items side by side. Using Grid you can create columns and rows. Without layout CSS, every element would just stack on top of each other from top to bottom. Layout is one of the most powerful things CSS can do.

4. Buttons and Hover Effects

CSS makes buttons look beautiful and interactive. You can give a button rounded corners, a bold color, and comfortable padding. Then you can add a hover effect so that when the user moves their mouse over the button, it lifts up slightly or changes color. This small detail makes a huge difference in how professional a website feels.

5. Responsive Design

CSS makes websites look good on all screen sizes — phones, tablets, and desktops. Using something called Media Queries, you can tell CSS to change the layout when the screen gets smaller. For example, on a desktop you might show two columns side by side, but on a mobile phone those same columns stack on top of each other. This is called responsive design and it is one of the most important skills in web development today.

6. Animations

CSS can even animate elements without any JavaScript at all. You can make a heading fade in when the page loads, make a button bounce when clicked, or create a spinning circle that rotates forever. Animations make websites feel alive, modern, and engaging.

CSS Without Styling vs With Styling

The difference between a webpage with no CSS and one with CSS is enormous.

Without CSS, the text is plain black, the background is white, buttons look like grey boxes, everything is stacked with no layout, and the page looks broken on a mobile phone.

With CSS, the text has a custom font and color, the background is rich and designed, buttons are rounded and animated, the layout is structured in columns, and the page looks perfect on every device.

My Personal Experience with CSS

When I built my own portfolio website at the University of Moratuwa, CSS was what made it go from a plain webpage to something I was proud to show people.

I used CSS to create a dark navy background with glowing effects. I added orange accent colors across all the buttons and headings. I built a spinning animated circle around my profile photo. I added smooth hover effects on every card and button. And I made the entire layout fully responsive so it works perfectly on mobile.

All of that — just with CSS.

Conclusion

CSS is one of the most important and exciting tools in web development. It is what separates a boring plain text page from a beautiful, modern, professional website.

In this article we learned that CSS stands for Cascading Style Sheets. It controls the visual appearance of a webpage. It handles colors, fonts, layouts, buttons, animations, and much more. And it makes websites responsive for all screen sizes.

If you are just starting your web development journey, spend time learning CSS properly. It will make everything you build look amazing.

Thank you for reading. I am Viraj Harshana, an undergraduate student at the University of Moratuwa, learning and building one project at a time.