selector { rule: value; rule: value; rule: value; }
<p id="main" class="text paragraph" data-color="green">Dummy text</p>
#main {...} .text {...} p {...} p.text {...} .text.paragraph {...} p[data-color="green"] { color: green; }
<p style="color: #D00; font-size: 22px;">Dummy text</p>
Dummy text
<head> ... <style> .text { color: black; font-size: 22px; font-family: My awesome font, Verdana, Arial, sans-serif; } </style> </head> <body> <span class="text">Dummy text</span> Anyway
<link rel="stylesheet" href="http://cursor-education.github.io/.../css/style.css"> <link rel="stylesheet" href="css/style.css">
<div class="outer"> <div class="inner first"></div> ... <div class="inner fifth"></div> ... <div class="inner"></div> </div>
.inner { width: 40px; height: 40px; background: red; border: 3px solid black; }
.outer { background: url('http://lorempixel.com/100/100/') no-repeat 0 0 grey; }
.outer { background: url('http://lorempixel.com/100/100/') repeat-x 0 0 grey; }
.outer { background: url('http://lorempixel.com/100/100/') repeat-x 100px 100px grey; }
.outer { background: url('http://lorempixel.com/100/100/') 100px 100px grey; }
* { padding: 0px; margin: 0px; }
* { box-sizing: border-box; }
#container * { border: 1px solid black; }
#container { width: 960px; margin: auto; }
#container * { border: 1px solid black; }
.error { color: red; }
a { color: red; } ul { margin-left: 0; }
#container + p { border: 1px solid black; }
#container ~ li { border: 1px solid black; }
#container > p { border: 1px solid black; }
@import "style-1.css"; @import url("style-2.css");
Color:
#6609CF, #fc0
white, silver, gray, black, red, orange, ...
rgb(255, 0, 0)
rgba(0,255,0,0.3)
hsl(120,100%, 25%)
hsla(120,100%, 50%, 0.3)
Dimensions. Relative units:
Dimensions. Absolute units:
.element { position: static; position: relative; position: absolute; position: fixed; position: sticky; }
.element { float: left; }
.element { float: right; }
.element { float: left; }
.element { float: left; }
.footer { clear: both; float: none; }