<link> element
<link rel="stylesheet" href="styles.css" /><head> section of the document with the <style> element tag<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
color is the property and blue is the valueh1 {
color: blue;
}
calc()rotate()/* In 4-value shorthands like padding and margin, the values are applied
in the order top, right, bottom, left (clockwise from the top). There are also other
shorthand types, for example 2-value shorthands, which set padding/margin
for top/bottom, then left/right */
padding: 10px 15px 15px 5px;
/* the above is equivalent to these four lines of code */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;