Cascading style sheets css3 modern styles: graphics and website animation

The HTML and CSS standards are created by The World Wide Web Consortium (W3C) https://www.w3.org/  . On its pages there is a full specification of styles: https://www.w3.org/standards/webdesign/ , although it must be admitted that it is better - it is more convenient to use the website in practice: https://www.w3schools.com/ where there is a list of full CSS references.

Basic CSS3 syntax

CSS styles are often called rules. These two names are used interchangeably. The style / rule consists of two main parts:
The selector - tells the browser what to format
the Declaration Block - contains a list of formatting instructions to be used by the browser, giving the style to the
p selector {color: blue; font-size: 1.2em;}
or the corresponding notation characteristic of the style sheet:
p {
color: blue;
font-size: 1.2em;
}

    declaration block
selector declaration declaration
p {color: blue; font-size: 12px;}
    property value property value
The above styles should be read:
Paragraph (p), it will be formatted in blue, and the font will be 12 pixels. Simple right?
Another example:
h2 {
  font-size: 1.05em;
  font-weight: bold;
}

The text contained in the h2 selector will be 1.05em (em is one of the CSS units) and will be bold.
Take a look at the examples directory, view the html document, and compare it with the entries in the attached (linked) style sheet.

SELECTORS - the basics of knowledge

Selectors indicate what styles are referring to, i.e. style indicates that the font color will be green and its size will be 13px:
p {color: green; font-size: 13px;}

Tag selectors, or styles for the entire page

You got to know the tags in the section about html. Each tag can be given certain properties using CSS, e.g. let's specify the font size for the h5 tag:
h4 {
  font-size: 0.8em;
}

The ID selector is a unique page element

The id selector cannot be repeated, it is used to identify unique parts of the page, such as banners, navigation bars or the main content area. The following example sets the background color and the width and height of the banner:
#banerek {
 background: # DD0000;
 height: 100px;
 width: 390px;
}
Assigning the ID selector in the html code:
<div id = "banner"> that is, the container div will be formatted according to the #banerek specification.

Class selector

The class selector is created in css styles and assigned to specific features. In the html code, we can refer to the class selector any number of times. The following example sets the background color and the width and height of the banner:
.banerek {
 background: # DD0000;
 height: 100px;
 width: 390px;
}
Assigning a class selector in the html code:
<div class = "banner">
Generally, we are rather moving away from using ID Selectors in favor of more universal class selectors.

View in side menu similar to: Cascading style sheets css3 modern styles: graphics and website animation