What is CSS?

CSS

A basic website consists of 3 parts: HTML, CSS, and JavaScript. In this article, I’m going to give you a brief overview of CSS – what it is, how does it work and how can it help up. If you want to know about HTML, then read my HTML introduction.

#1 – What is CSS?

CSS stands for “Cascading Style Sheets” and represents a design language that helps HTML websites to get the web pages presentable. This means it has an important effect on the visual part of the websites.

CSS is really easy to learn and use. There are tons of materials in the web on how to achieve specific visual aspects with CSS.

Using CSS, you can control almost every visual aspect of your HTML presentation: the color of your text, the style of fonts, the spacing between paragraphs, background colors, borders, etc.

Web

CSS allows you to build visually-rich websites. So, if you ever wish to change your website drastically, then sometimes even one line of CSS might do the trick.

#2 – How does CSS work?

I assume you have played around with HTML a bit. HTML allows you to assign different classes and ids to different elements. Those classes allow CSS to easily select HTML elements and assign the style to those. A typical example would be something like this:

<div class="my-first-class"></div>

.my-first-class {
background-color: #000;
}

The code above creates a new HTML div container and sets its background color to black (#000).

There are 3 ways to apply a CSS code to HTML:

  • inline styling. CSS is written directly into the element: <div style="background-color: #000;"></div>
  • internal styling. CSS is added to the style tag in the document’s head section.
    <head>
    <style>
    .my-first-class {
    background-color: #000;
    }
    </style>
    </head>
  • external styling. CSS is written into the CSS file and included in the HTML file.
    <head>
    <link rel="stylesheet" href="my-styles.css">
    </head>

Browsers understand all of those ways and easily display a div element with a black background. While HTML describes the layout, CSS describes how that layout should visually be presented.

#3 – How can CSS help us?

There is one big point here. CSS controls how we see elements on websites. Every beautiful and less beautiful site uses CSS in some way.

Even if you use a website builder like Wix or Weebly or even WordPress, then it is important to know that those use CSS as well it is just handled behind the scenes. To create a perfect website you must know CSS, there is no way around it.

#4 Tips on how to use CSS efficiently for your web pages.

The most important thing here is the structure. You should always structure your HTML and CSS to be reusable, meaning that to similar block you should give the same classes and so on. And always use external CSS, because it gives you separation and reusability.

Chrome CSS editor

You can play with CSS of other pages in the developer tools as well. Right-click on the website and press inspect, the CSS will be on the right part of your screen.

I like clean, beautiful, and easy-to-use websites. I hope my articles will help you create one!

Site Footer

Sliding Sidebar