What is CSS

Web pages written solely in HTML tend to look somewhat boring. They simply fail to draw attention to the content because visitors get lost in a bunch of elements without good design. Perhaps HyperText Markup Language alone was enough to entertain Internet users in the early '90s, but now they've grown pickier and harder to impress.

The first versions of the HTML standard did not provide any means to change the way information was presented. It relied entirely on the styles built into the browser. The urgent need to give sites personal designs prompted HTML to add "enhanced tags" which allowed for broader control over how the information was displayed. As a result, HTML code became difficult to understand because of the terrible mixture of logical and design tags.

To separate markup from design management, CSS was developed. This division made code simpler and cleaner, reducing the duplication of lines.

What is CSS

CSS (Cascading Style Sheets) is a language responsible for the visual presentation of documents written in HTML. CSS allows changing the colors of the elements, their height and width, the location of individual blocks, background images, and much more. CSS files are saved in .css format.

To date, the latest version of this technology is CSS3. It even has its own logo:

A web page made with CSS would be drastically different from the very same page created without it. See for yourself in the following example:

On the left is a screenshot of a web page written in HTML, on the right — in HTML and CSS.

Here's a portion of the CSS used to style the HTML document above.

<style>

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
}

.hero {
    background-image: url('cave-path.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>

Here are a few more examples that demonstrate how using CSS for styling can make websites look more attractive and visually appealing.

• Netflix homepage without CSS:

• Netflix homepage with CSS:

• Hyperskill homepage without CSS:

• Hyperskill homepage with CSS:

The contrast is evident. It's hard to believe it's the same page, what a makeover!

Why use CSS

CSS got really popular, which makes a lot of sense when you think about all its benefits:

• It makes HTML pages more beautiful.

• It saves developers time. You can write a CSS file once and then connect it to several HTML pages.

• Pages load faster. Instead of writing the same property to different HTML elements, it is enough to write one CSS rule and apply it to several elements at once. Less code means faster loading time!

• It's compatible with multiple devices. Style sheets allow you to optimize content for more than one type of device. Using the same HTML document, you can present different versions of a website for computers, laptops, and smartphones.

• Last but not least, it is supported by all the latest browsers.

Short History of CSS

The concept of cascading style sheets was proposed in 1994 by Håkon Wium Lie, a Norwegian scientist and IT specialist working for the W3C consortium at the time. The first version of CSS (CSS1) was published only as a recommendation in 1996. In that version, it is possible to control the size of the font and change its style to or from italic and bold. One could also draw frames around the blocks, change the background, change the colors of the text, align tables and images, and much more.

CSS2 was released in 1998. That version allowed you to control the location of elements on the page and set different styles for different media. For example, it became possible to display the same web page with an individual design for computers, printers, and mobile phones.

CSS3 appeared in June 1999. The main feature of CSS3 is the ability to create animated elements without using programming languages.

Conclusion

CSS is most often used as a tool to describe and design the appearance of web pages written using markup languages. CSS is a powerful tool, and it's frankly difficult to imagine modern websites without it. This technology can change the appearance of HTML pages for the better: after CSS touch-up they look magical. So, let's master this magic together!