CSS is a description language
CSS is a description language
CSS is a language for describing the appearance of a document, that is, it is responsible for how web pages look: the color of the background and decorative elements, the size and style of fonts. The term stands for Cascading Style Sheets (cascading style sheets). CSS interacts with another markup language, HTML, which is responsible for laying out elements on a page.
You can imagine that HTML is such a general, conditional scheme, like a rough drawing of the layout of an apartment, from which you can find out where the doors and windows are, and which side the kitchen or corridor is on. In this case, the CSS for the site is a design blueprint that helps you see a more detailed layout with wall color, furniture, and decor.
What is CSS for?
Let’s say with HTML the text is already positioned at the top of the document. You can set the color, font type and size for it, make the text bold or italic without using CSS. To do this, you need to add a tag to the source code that defines the style of the text.
Using tags to format text in HTML clutters up the source code, makes it more complex, and therefore more likely to make a mistake in it. In order to avoid this, they created a separate language for style markup – CSS. In addition to font size and color, this markup language regulates the division of headings, subheadings and body text, the size of margins and indents, separate color frames for highlighting text, the color of the main background, header and footer.
How style sheets work
CSS, like any language, has its own syntax. It has rules – values that determine the appearance of elements. A CSS rule consists of a selector, CSS properties and their values:
- Selectors are labels that help the browser understand which part of the HTML code to apply the given options to.
- CSS properties are specific design settings, such as the color of an element or text (color) or the color of the background (background).
- A value is just a value and is expressed as text or a number, such as black.
CSS rules in the code are enclosed in curly braces {…}. Before opening the bracket, you must specify the selector to which this rule applies.
In the example, the selector is <p> and it selects all tags named <p> , color is the CSS property and black is the value of the CSS property. The property:value binding is called the style declaration block. Inside it, the property is separated from the value by a colon, and one block from another is separated by a semicolon.
Tables are called cascading tables because they work on the principle of a cascade – that is, the rule written below is considered a priority. For example, if in our example, under the value of the background color, we write another value color: red, then the color of the text will be red, not black.
CSS float properties
Float is a property that determines which side the element will align to: right or left.
This method is convenient to use, for example, to wrap images around text, but some time ago, almost everything was typeset using float. For example, this was a common menu layout method. For menu items to form a line, each element was given float: left or float: right so that they lined up one after the other.
flexbox
Flexbox replaced float in 2011. Its advantage was that the blocks became more flexible. Elements shrunk and stretched to fill the space, they could be aligned vertically and horizontally without any problems.
grid
Grid appeared in year, it helped to solve many problems that developers have faced for a long time. Problems were solved by methods that were not originally intended for this. The main innovation was the arrangement of elements relative to several axes – vertically and horizontally. You can stretch items that are not multiple rows or multiple columns by assigning each the values a, b, c, d, and so on.
CSS Methodology
A methodology is a standard for writing CSS in a way that can be maintained and read by other team members or third party developers. In other words, these are rules that will be clear to a person from the outside, so that he can understand the code without the author and make changes. Writing guidelines are called CSS methodologies.
A universal methodology does not exist today. Some of them are outdated, some are used more actively than others, and new, more advanced methodologies may appear in the near future. The most popular are two.
Atomic CSS. In this methodology, a set of classes is created – tools that unify the rules. Classes are combined directly in the HTML block, that is, element styles are not set in CSS. Thus, the task of the layout designer is facilitated, since he does not need to switch between contexts.