CSS properties: what they are and how to use them

Summary

Разделение содержимого и стиля делает Веб разработку намного быстрее и проще. Когда вы определяете только стуктуру документа в вашем HTML файле и храните всю информацию о стиле в отдельном файле (называемом stylesheet), вы можете обновлять стили нескольких документов одновременно (а так же экономить ресурсы компьютера).

CSS syntax consists of easy-to-use, intuitive keywords.

p {
   font-family: "Times New Roman", georgia, sans-serif;
   font-size: 24px;
}

In the example above, p is a selector that applies styles to all the <p> elements at once. The CSS properties font-family and font-size are enclosed within curly braces and the corresponding values, right after the colon, determine the styles.

There are more than 250 properties you can apply to your document. From text to layout, (almost) anything is possible.

Active Learning

There is no active learning available yet. Please, consider contributing.

Deeper dive

If properties are fairly simple to use, selectors are another story. Okay, they aren't that hard, and mastering them unleashes the full potential of CSS. In the next examples, we will introduce the most common selectors.

A CSS rule consists of selectors associated with properties. Selectors specify which elements will receive the properties laid down in the rule. Multiple rules can apply to the same element; the CSS cascade (which we'll discuss later on) determines which rule ends up taking effect in the case of conflicts. For now, just remember that the rule with the most specific selector overrides the rules with more generic selectors.

The element selector

Element selectors select HTML elements by element names only. Moreover, like all CSS selectors, you can apply a common set of properties to several elements at once.

For our first example, let's assume the following HTML code fragment:

<h1>I'm an example</h1>
<p>In this example, I'm a paragraph</p>
<p>And I'm another paragraph</p>

In the following CSS rule, the element selector p applies the given styles simultaneously to all the <p> elements of our HTML document, preventing extensive rewriting. We are using the font-family property (which defines the font in which text appears) and the font-size (which defines text size).

p {
  font-family: "Helvetica", Arial, sans-serif;
  font-size  : 12px;
}

The next CSS rule only applies to <h1> elements. We are using the font-size property to make our title twice the size of the body text, and the font-weight property to make the title bold.

h1 {
  font-size  : 24px;
  font-weight: bold;
}

The following CSS rule applies the requisite styles to both <h1> and <p> elements, potentially removing even more duplication. (This use is called "group selector" or "chain selector". Notice the comma separating the selectors). Here we are using the color property to specify the same text color for both headings and paragraphs.

h1, p {
  color: darkmagenta;
}

Here is the result of all this code:

The id selector

The id attribute of a particular HTML element uniquely identifies that element. Hence, an id selector is used only when a set of style rules applies to a single element.

For our next example, let's assume the following HTML code fragment:

<p id="hello">Hello world!</p> 

The following CSS rule applies only to that unique identified element. To make a selector into an id selector, you must put a hash character (#) in front of the id name. We are using three properties: text-align to center the text within the paragraph border to add a thin line around the paragraph, and padding to add some extra inner-margin between the text and the border.

#hello {
  text-align: center;
  border    : 1px solid black;
  padding   : 8px;
}

And the result is the following:

The class selector

Within HTML, the class attribute lets you apply multiple identifiers to HTML elements. Those identifiers can be used with CSS to match groups of elements regardless of element name.

For our next example, let's assume the following HTML code fragment:

<h1 class="hello">Hey there!</h1>
<p class="hello bye">Let's hang out together!</p>
<p class="bye">And walk over the mountain</p>

Let's apply a CSS rule for all elements with the class hello. To make the selector into a class selector, put a period/full stop before the class name. We use the font-style property to italicize the text.

.hello {
  font-style: italic;
}

And another one for all elements with the class bye. Here we are using the text-decoration property to draw a line through the text.

.bye {
  text-decoration: line-through;
}

Here's what happened:

Next step

So we've gone over the basics to get started with CSS. You can learn more about text styling or start exploring our CSS Tutorials right away.