ArmenianChinese (Traditional)EnglishGermanRussian
Learn W3C CSS 3 continued 1 -

Learn W3C CSS 3 continued 1

CSS3 Tutorial & Video Lessons

HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn – You will enjoy it!

  1.  0:00 – Введение 
  2. 1:58 – Базовый синтаксис и применение стилей 
  3. 8:10 – Простые селекторы 
  4. 18:01 – Составные селекторы 
  5. 25:54 – Псевдоэлементы и псевдоклассы 
  6. 38:09 – Каскадность и наследование 
  7. 47:58 – Блочная модель и отступы 
  8. 57:48 – Позиционирование и z-index 
  9. 01:06:35 – Единицы, переполнение и уровни элементов 
  10. 01:17:09 – Плавающие элементы и очистка потока
  11. 01:26:00 – Шрифты и текст 
  12. 01:37:01 – Границы и тени 
  13. 01:46:35 – Скругление углов, списки и цвета 
  14. 01:56:33 – Отображение элементов и вендорные префиксы 
  15. 02:03:43 – Фон 
  16. 02:12:20 – Градиенты
  17. 02:20:43 – Фильтры 
  18. 02:26:43 – Трансформации 
  19. 02:35:19 – Плавные переходы 
  20. 02:41:25 – Анимации 
  21. 02:50:12 – Таблицы и курсор 
  22. 02:57:41 – Текстовые эффекты и многоколоночный текст 
  23. 03:04:13 – Медиазапросы 
  24. 03:12:07 – Стилизация плейсхолдера и скролла, CSS-спрайты

CSS3 Tutorial 1

CSS Colors

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.


CSS Color Names

In CSS, a color can be specified by using a predefined color name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Try it Yourself »

CSS/HTML support 140 standard color names.


CSS Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Try it Yourself »


CSS Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="background-color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Try it Yourself »


CSS Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

<h1 style=="border:2px solid Tomato;">Hello World</h1>
<h1 style=="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style=="border:2px solid Violet;">Hello World</h1>

Try it Yourself »


CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name “Tomato”:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

 

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Try it Yourself »

Learn more about Color Values

You will learn more about RGBHEX and HSL in the next chapters.

ArmenianChinese (Traditional)EnglishGermanRussian