Introduction to CSS

1. The Birth of CSS

When it became clear that browsers are used not so much for scientific purposes as for entertainment, people started missing multimedia features: videos, animations, colors, sounds, transparency, and so on.

At first, developers thought about adding more tags for this, but later realized that there would be hundreds of new tags, and it would hugely complicate working with HTML documents. This sparked the idea to separate the "document styling" (design) from its content. That's how CSS came into being.

Cascading Style Sheets (CSS) are one of the key components of web development, responsible for the visual design of web pages.

CSS is a collection of properties, each having a name and a value. Web developers define these properties, and the browser takes care of rendering them. These properties can be applied to pretty much any element. Here's an example of CSS styles:

There are fewer than a hundred of these CSS parameters (also known as CSS properties). However, they can interact in clever ways and create unexpected effects. On CodeGym, you'll learn how to use them and create real magic on a page 🦄.

2. Element Styles

You can specify a CSS style for each HTML element using the style attribute.

Example:

      
<p style="color: blue; font-size: 16px;">This is an example of an inline style.</p>
      
    

This style tells the browser that the text inside the paragraph should be rendered in blue and the font size should be 16 pixels high.

Actually, there are two "styles" here:

• color = blue
• font-size = 16px

They're just written in a single line and separated by a semicolon.

You can also, for example, create a black rectangle with white text in it. The code would look like this:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
White text on black background 
</div>
      
    

3. Colors

We will explore CSS styles more deeply when we cover HTML. But to make it more fun, let's dive into colors today. CSS allows you to define any color that can be displayed by a computer and even beyond.

Colors in CSS are an essential part of web page styling. They help create visually appealing and intuitive interfaces. There are several ways to define colors in CSS, each with its own characteristics and use cases.

1. Color Names

CSS supports over 140 standard color names. This is a simple and easy way to specify a color.

      
<div style="color: lightblue;"> Light blue text</div>
      
    

Some common color names:

2. Hexadecimal Values

Another way to define any color is using hexadecimal codes. This allows you to specify 16 million shades — it's impossible to come up with names for such a variety, so numbers are used instead.

Hexadecimal values are set using the # symbol, followed by six numbers or letters that represent the intensity of the red, green, and blue colors (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Red on green </div>
      
    

You'll often come across this way of defining colors in examples. We'll return to this topic when we delve deeper into CSS studies.

1

Task

Frontend SELF EN, level 2, lesson 3

Locked

Inline Styles

Inline Styles

Open