What is CSS?

Dear users, this article will show you the benefits of the CSS. This definition refers to Cascading Style Sheets. CSS can determine the language that describes the appearance of a web page by using HTML markup language. The difference between these languages is that the HTML language describes the contents of the Web page, and CSS is directly designed to format the content. Cascading style sheets are working with fonts, represent text colors, backgrounds and other elements. They also are intended to describe different web page blocks, image layouts, format strings, height, width and other characteristics of any style. Of course, it is worth noting that the CSS language is supported by all major browsers.

Let's break down the major advantages of this language. CSS gives us the opportunity to represent the view of many pages by using only one file with the specific styles. This is useful, since you can change web page format at any time and at your will on your pages. This operation does not require you to make modifications for each page individually, everything can be changed in a single CSS file. You will be controlling the appearance of your web project by using cascading style sheets. This language allows you to create your own individual style by setting the parameters for to change look of some or all of the objects.

It's possible to bind style sheets in the HTML markup document or in a separate file. If you want to declare a style sheet in the document, then you need to place it between the <style> </ style> tags. When the style descriptions are located in a separate document, then you can refer to it in the main file by using the @import or <link> tag.

So, let's look at what types of blocks can be used in a syntax of CSS file. Each rule has a selector part and a declaration block. In the selector part, we are specifying part of the document which we will be formatting. The declaration block is placed in curly brackets and consists of a properties and its values. It is necessary to place a colon between the property and the value, and each subsequent value of the property is divided by symbol ";". If you want to set the same properties and values for multiple selectors, then just write them separated by commas before the declaration block. Here is an example of writing CSS styles.

selector 1, selector 2
{
    font - size: 16px;
    color: green;
    background: red;
}

There are many types of selectors. First of all, it is worth noting universal type selectors, they refer to any item that you can find in the document. It will look this way:

*{font-size 12px; color: yellow;}

Class selectors are very often used, since they are very convenient and allow to assign the same design for several elements. This can easily be done by specifying name the class. The syntax looks like this:

.Name of the class {property: value, property: value; ... property: value;}

Here is an example of how this type of selector works.

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title> Сlass selectors </title>
  <style type="text/css">
   .selclass {
    size: 12px;
    color: red;
    font-style: bold;
   }
  </style>
</head>
<body>
  <p> This text will be displayed without formatting and will use class selector.
  <b class="selclass"> And here the text which is shown as bold, red and in size of 12</b>.
</p>
</body>
</html>

In this case, we have declared a class style and named it .selclass in the <style> </ style> tag, also gave it the properties and values, namely, size - 12, color - red and bold font. Later, <p> will be displayed as unformatted in the first sentence of paragraph, and then we use our class in the form of <b class="selclass">, and get the second sentence, but by using formatting of specified style.

If you want to have a style that is owned by a particular tag, then you need to use a syntax like the following:

Tag.Name of the class {property: value, property: value; ... property: value;}

As you can see, you need to specify a tag that you want to format before the point.

Selectors can also be specified by identifiers. That means that properties can be set for one particular element when needed. Then the ID needs to be assigned. Name of the ID can include anything, but it should not contain names of parameters, tags and other common HTML or other concepts. You need to set the ID by using the id attribute in HTML. Here is an example.

<p id="blue">

Header with an identifier (id).

<html>
<head>
<title>CSS Identification</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id=" blue"> First title </h1>
<h2>The second title</h2>
</body>
</html>

Let's add properties to the style sheet only for the first header:

h1#blue{ color: blue; }

Thus, the first title will be shown in blue, while the second will have standard black color. In addition to these two types, it's possible to use selectors of elements, attributes, pseudo-classes, pseudo-elements, children, and so on.

It is worth noting that the use of CSS in HTML pages is based on inheritance and cascading. Style can be inherited from parent to child. If there are conflicting styles for one element, then the principle of cascading is used, according to which properties are selected by priority.

Now, let's summarize what we wrote before. In our time, it is not very convenient to build pages for your web projects without the use of CSS. In addition, by using cascading style sheets, you can transform your website and make it looking unique. If you are not familiar with CSS, then you have the opportunity to learn this technology.

Best regards, DYAMAR Engineering.

Language: 
Category: 

All rights reserved. You may not copy or distribute, electronically or otherwise, any part of this article for any purpose without prior written permission from the DYAMAR Engineering.