selector {
property: value;
anotherProperty: value;
}
CSS can be placed inline with a tag (Not recommended)
<h3 style="color:pink">blah blah blah</h3>
CSS Can be placed in the <style></style> tags (Not recommended)
<head>
<title>This is the title</title>
<style>
h3 {
color: pink
}
</style>
</head>
Write our CSS in a separate .CSS file using the <link>
tag (Recommended)
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
h1{
color:red;
/* This is a comment*/
}
h1 {
color:red;
}
# + String of 6 hexadecimal numbers (from 0-F)
h1 {
color:#FF0000;
}
3 channels: Red, Green and Blue. Each range from 0 - 255
h1 {
color:rgb(255,0,0);
}
Just like RGB, but with an alpha (tranparency) channel. Range from 0.0 - 1.0
h1 {
color:rgba(255,0,0,1);
}
Use color
to set text color and background
for background color
The background
property can also set a background image
body {
background:url(http://xxx.com/pic.jpg);
}
Select all instances of a given element
<div>
<p>You say yes</p>
</div>
div {
background:purple;
}
Select an element with an given ID. Only one per page!
<div>
<p id="special">You say yes</p>
</div>
#special {
background:purple;
}
Select all elements with a given Class
<div>
<p class="highlight">You say yes</p>
</div>
<div>
<p class="highlight">paragraph two</p>
</div>
.highlight {
background:yellow;
}
h1, h2, h3{
color:blue;
}
div span
will match all <span> elements that are inside a <div> element.
div span {
}
"In a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the standard box model. Each box has four edges: the margin edge, border edge, padding edge, and content edge." (MDN)
The box-sizing
CSS property defines how the user agent should calculate the total width and height of an element. Click [here] for MDN reference on box-sizing.
border-box
tells the browser to account for any border and padding in the values you specify for width
and height
. If you set an element's width
to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
Some experts recommend that web developers should consider routinely applying box-sizing: border-box
to all elements.
Properties | |
---|---|
color | font-family |
background-color | font-size |
background-image | font-weight (boldness) |
background-position | font-style |
background | overflow |
margin | display |
padding | list-style |
text-align | height |
float | min-height (vh) |
border-color | width |
border-width | line-height |
border-style | text decoration |
border | opacity (0 to 1) |
margin: auto;
background-color
, not background
padding: 10px;
text-decoration: none;
button
: to change text color, use color
border-radius: 10px;
To make a circle: border-radius: 50%;
list-style: none;
box-sizing: border-box
to all elements.* {
margin: 0;
padding: 0;
box-sizing: border-box;
}