08CSS basics

What is CSS?

Easy20MIN

CSS (Cascading Style Sheets) is a style language that defines the appearance and layout of a webpage separately from HTML. The use of CSS enables more precise formatting, flexibility, and consistent appearance across different devices.

You have so far seen quite old-fashioned and ugly-looking HTML. With CSS, the website can be made to look just as fabulous as your imagination and CSS skills allow.

Here is an example of a button styled with CSS:

CSS
1.button {
2  display: inline-block;
3  border: none;
4  border-radius: 20px;
5  padding: 10px 20px;
6  background-color: #4CAF50;
7  color: white;
8  font-size: 16px;
9  font-weight: bold;
10  text-align: center;
11  text-decoration: none;
12  transition: all 0.3s ease;
13  cursor: pointer;
14  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
15}
16/* Hover Styles */
17.button:hover {
18  background-color: #3e8e41;
19  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
20}
21/* Active Styles */
22.button:active {
23  background-color: #3e8e41;
24  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
25  transform: translateY(2px);
26}
HTML
1<a href="#" class="button">Click me!</a>
TRY ITREPLIT

NOTE

Valitettavasti Replit-palvelu on muuttunut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.

The History of CSS

The development of CSS began as early as in 1994, when Håkon Wium Lie and Bert Bos developed the first version of a style language called Cascading HTML Style Sheets (CHSS). This was the first attempt to separate the content and layout of web pages.

In the following year, 1995, CSS1 was introduced, which was the first standardized version of CSS. CSS1 defined basic properties such as color, font, and background definition. CSS2 was released in 1998 and brought with it, among other things, media queries, which allow for styling webpages to fit different display devices.

CSS3 is the latest standardized version and it includes many new features such as complex background images, animations, and gradients. CSS3 is divided into different modules, such as Selectors, Box Model, Backgrounds and Borders, and Typography.

The development of CSS has been fast, and new features are constantly being added. The importance of CSS in website design has grown significantly, and it is now an essential part of modern web development.

Hakatemia Pro

Learn to hack — start here

Hundreds of interactive courses, virtual labs and CTF challenges in your browser. Start a free trial — no card required.