Basics of CSS

What is «CSS»?
How are comments denoted in CSS?
What is a «selector»?
List the main types of selectors.
What is a pseudo-class?
What attribute selectors are there?
What is the difference between #my and .my?
What is the difference between margin and padding?
What is the difference between the values 0 and auto in the margin property?
Which property sets the background color?
How to remove the underline from all links on the page?
What is the clear property used for?
How to make text bold in all <p> elements?
How to set the color red for all elements with the class red?

What is «CSS»?

CSS, Cascading Style Sheets - is a formal language for describing the visual appearance of a document written in a markup language, using it on elements of a web page to control their look and position.

The primary goal of developing CSS was to separate the description of the logical structure of a web page, which is done via HTML or other markup languages, from the description of the appearance of that web page, which is done via CSS.

Back to Table of Contents

How are comments denoted in CSS?

To indicate that text is a comment, use the syntax /* ... */

Back to Table of Contents

What is a «selector»?

A selector is a rule that selects elements in an HTML document to apply certain styles.

p {
    text-align: center;
    font-size: 20px;
}
/* p is the selector, text-align and font-size are properties, and center and 20px are values. */

Back to Table of Contents

List the main types of selectors.

* selector - selects all elements;
element selector - selects all elements in an HTML document with the specified tag (e.g., div);
class selector - selects all elements in an HTML document with the specified class (e.g., .center);
id selector - selects an element in an HTML document with the specified id (e.g., #footer);
pseudo-class selectors - selects all elements in an HTML document with the specified pseudo-class (e.g., p:first-of-type);
attribute selectors - selects elements based on a specified attribute or its value (e.g., [href*="youtube"]).

Back to Table of Contents

What is a pseudo-class?

A pseudo-class defines a dynamic state of elements that changes as a result of user actions or corresponds to the current position in the document tree. Unlike a true class, a pseudo-class is not explicitly specified in HTML, but is specified in CSS using : directly after the selector.

The most well-known pseudo-classes are:

:link applies to unvisited links;
:visited applies to visited links;
:hover applies when the mouse cursor is over the element but does not activate it;
:active applies when the element is activated;
:focus applies to an element when it has focus;
:first-child applies to the first child element of a selector that is located in the document’s element tree.

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

Back to Table of Contents

What attribute selectors are there?

[attribute] - all elements that have the specified attribute;
[attribute=value] - all elements that have an attribute whose value is equal to "value";
[attribute^=value] - all elements that have an attribute whose value starts with value;
[attribute|=value] - all elements that have an attribute whose value is equal to value or starts with value followed by - (i.e., value-*, where value must be followed by more content);
[attribute$=value] - all elements that have an attribute whose value ends with value;
[attribute*=value] - all elements that have an attribute whose value contains the substring value;
[attribute~=value] - all elements that have an attribute whose value contains value as one of the space-separated values.