Что такое CSS?

CSS означает Cascading Style Sheets - Каскадные Таблицы Стилей

Стили определяют как отображать HTML элементы

Стили были добавлены в HTML 4.0 чтобы решить проблему оформления веб страниц

Внешние Таблицы Стилей могут сохранить много времени

Внешние Таблицы Стилей хранятся в CSS файлах

Отступы - Индивидуальные значения для сторон

Этот параграф без отступов.

Это параграф с заданными отступами.

Как это выглядит "внутри"

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>

<body>
<p>Этот параграф без отступов.</p>
<p class="padding">Это параграф с заданными отступами.</p>
</body>

</html>

CSS фоновые цвета - пример!

Это текст внутри элемента div.

Этот параграф имеет свой собственный цвет фона.

Мы все еще внутри элемента div.

Как это выглядит "внутри"

<html>
<head>
<div style="background-color:#8C8B8A;color:black;padding:20px;">
<h1>CSS фоновые цвета - пример!</h1>
</div><div style="background-color:#A0A5B2;color:black;padding:20px;">
Это текст внутри элемента div.
<p>Этот параграф имеет свой собственный цвет фона.</p>
Мы все еще внутри элемента div.
</div>
</html>

Именно вот этот текст мы увеличим, и поменяем цвет!

Вот как это можно написать:


<p>Именно вот этот текст мы увеличим, и поменяем цвет!</p>
<style>
p{
    font-size: 120%;
    color: red
}
</style>

Текст в рамке, а вокруг рамки + ещё одна рамка

Как сделано


<style>
h3 {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
<h3>Рамки </h3>

рамка

Вот как это выглядит внутри


<style>
h2.border {border-style: solid;}
</style>
<h2 class="border">рамка</h2>