Auto-translation used
Read the original

What is CSS? (Quick Guide)

While browsing various web pages, you probably noticed that some of them look amazing, while others are “so-so". And if you are interested in web development, you may also have wondered how the design of pages changes using code.

The main tool with which developers create and change the appearance of pages is CSS (Cascading Style Sheets, from English - cascading style sheets). In this article, we will look at the basic principles of CSS and talk about the importance of technology in development. You can use the quick links to go to the part of the article you need.:

CSS (Cascading Style Sheets) - this is a formatting language that allows you to make a site look attractive, create complex web page templates and give them personality. CSS makes HTML content well organized, more beautiful and readable.

In fact, CSS is the rules that tell the browser how to display a certain element on the page. CSS gives visual beauty to the page and is responsible for its aesthetics. In addition to changing basic parameters (for example, margins, colors and fonts), CSS is also used to optimize pages, create advanced visual effects (for example, hover effects, various animations, etc.) and adaptive web design.

How is a web page created?

Before we move on to a more in-depth introduction to CSS, let's take a few minutes to basic definitions, starting with the web page (if all this is “easier than easy” for you, then go straight to the next section):

A web page is a hypertext document connected to the World Wide Web.

A website is a collection of web pages hosted on a domain.

Each web page consists of three components:

  1. Content
  2. Presentation
  3. Behaviour

The content is the structure of a web page, i.e. the elements of which it consists. The HTML language (headers, text, links, images, etc.) is responsible for the structure of the page and the definition of its content.

A presentation is a visual representation of elements on a web page. This is where CSS comes on the scene.

Despite the fact that it is possible to write CSS directly in an HTML document, it is better not to do this, because the main idea of CSS is to ensure the separation of content and presentation. This allows you to format the same HTML document in many different ways, and at the same time it will remain accessible to different rendering methods (for example, screen readers).

Behavior describes how a user interacts with a web page. As a rule, the behavior on the page is handled using JavaScript.

Now that we've figured out which key elements web pages are built from, let's figure out how to use CSS to style content.

Using CSS, we can set different styles for the entire text enclosed in an HTML element. For example: font size is 40 pixels, font is Arial, color is green. You can also set more serious parameters - for example, add borders, change margins, control the exact positioning of an element, and even add various effects and animations.

The style sheet tells the browser how to display the document being viewed. One important CSS concept is embedded in its very name - style sheets are cascading. This means that at least one stylesheet affects each web page.

Even when we don't use CSS, HTML elements have certain "default" styles (i.e., which are added by default by browsers). For example, text and title elements usually take up the entire web page. In this case, the links are placed in a row without splitting the text.

There is one default font and some spacing added to each element for easy reading. Anything more than that already requires CSS to be enabled.

In most cases, it is best to refer not to multiple tables, but to a separate style sheet. In this case, it is much easier to manage it. You can have an unlimited number of documents linked to a single table - this allows you to edit styles more efficiently, unlike editing countless HTML documents.

It also greatly simplifies the process for those who may need to edit your documents in the future.

CSS styles can be added to, removed from, or modified from an HTML element. It is also possible to add animation to the style properties (for example, change the background color from pink to yellow). Or, for example, you can customize the appearance and disappearance of an element on the page.

The style applied to an element transmits information to the browser about how this element needs to be properly designed and displayed.

The language in which the style "speaks" to the browser is called syntax. For example, to set the font size and color for all paragraphs, you need to write: 

p {  color: blue; font-size: 2em; }

Here, the style gives the command: “The text should be blue with a height of 2em” (em is the unit of measurement, the font height standard).

Most styles have many formatting properties, so to make them easier to read, you can split the code into several lines. For example, we can write the code from the example above as follows: 

p {     color: blue;     font-size: 2em; }

It becomes much more convenient to read the code this way, doesn't it? Let's analyze the above fragment. It contains:

  • selector p
  • opening curly brace {
  • color property; blue value
  • font-size property
  • the value is 2em
  • closing curly brace }

Selector - defines the element to which the browser should assign a style. It can be a paragraph, title, link, image, etc. Accordingly, the p selector changes all the p elements on the page using the specified style.

It is also possible to assign styles to several elements by class at once. The class attribute is used for this purpose. Example: 

.className {     color: blue;     font-size: 2em; }

Similarly, you can assign styles to elements according to their identifiers. In this case, we use the id attribute: 

#idName {      color: blue;     font-size: 2em; }

But try not to abuse the use of identifiers, because the use of the id attribute has the highest priority compared to other options for accessing the element.

The ad block is the code after the selector. It includes the conditions of the changes applied to the selector. It starts with the sign { and ends with the sign }.

​A declaration is a code describing the property and value of an element. There is a semicolon at the end of each ad. There is a colon between the property and the value.

You can also put a space between the colon and the property value. This is optional, but it makes the code easier to read. It is acceptable to leave a space of any width between the elements (color: blue; or color: blue;)

Property. There are many variations in CSS called properties. They indicate a certain style effect. For most properties, the name directly reflects their purpose, for example:

font-size (font size);margin-top (indentation from the top edge);background-color (background color).

Value - describes exactly how the property will be processed by the browser. Each property has a set of acceptable values, for example: make the background green, orange or purple. Different CSS properties require their corresponding value types, such as color (red or #FF0000), length (30px, 8in or 2em), location (top, center or bottom), etc.

CSS is one of the main tools for managing the design of web pages. Using it, you can change the look and feel of websites in any way you want, while saving a huge amount of time due to the smaller amount of code required.

To summarize, here are the key benefits of CSS:

  • Flexibility - CSS gives you the freedom to place HTML elements anywhere on the page, while keeping the HTML markup organized and clean.
  • Cross-browser and cross-device compatibility - you can customize the display of a web page by different browsers and on different devices, taking into account their differences and features. In other words, it is an opportunity to create different versions of web pages and sites using the same HTML document, adapting each version to the necessary parameters.
  • Huge customization options - CSS allows you to make almost unlimited changes to page styles: colors, links, borders, hover and transition effects, fonts, etc.
  • Simplicity and efficiency - the ability to easily create and customize styles for multiple web pages at the same time.
  • Save time - you can write style sheets once and then reuse them for an unlimited number of pages.
  • High page loading speed - CSS significantly reduces the length of the HTML code, which, in turn, leads to faster loading of web pages.

#Tech Orda 2024, #Astana Hub, #IT-incubator

340

ДМИТРИЙ КУЗЮБЕРДИН

Oct. 22, 2024 15:03

Comments 4

Login to leave a comment

Lain Iwakura · Oct. 26, 2024 03:34

Супер статья, понятна мне, как новичку. Побольше бы таких материлов!

Reply