CodeFizz
A Free Learn-To-Code Website
CSS Syntax
No search results found.
🡹
Color
<style>
div {
color: blue;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
The color declaration is pretty basic. It simply just changes the color of all text inside of the selector.
Background
<style>
div {
color: white;
background: red;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
The background declaration changes the background color of all text inside of the selector.
Font-size
<style>
div {
font-size: 20px;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Font-size changes the font size of text.
Width
<style>
div {
width: 200px;
background: lightblue;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Width changes the width of the object. It will not stretch the text. Notice how the blue background doesn't stretch all of the way to the edge?
It can be replaced by the width HTML attribute on most objects.
Height
<style>
div {
height: 200px;
background: lightblue;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Height changes the height of the object. It will not stretch the text. Notice how the blue background stretches down further than the text?
It can be replaced by the height HTML attribute on most objects.
Float
<style>
div {
float: right;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Float will make the object 'float' in a certain direction, which simply anchors it to one side of the screen.
The float value is set to 'right' in this example. You can try replacing that with 'left' or 'none' - 'left' will make the object go to the left side instead of right, and 'none' is just the default behavior without any floating.
Padding
<style>
div {
background: lightpink;
padding: 20px;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Padding adds space around the content of the object. It is different to margin (below).
Margin
<style>
div {
background: lightpink;
margin: 20px;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Margin adds space around the object itself. It is different to padding (above).
Font-weight
<style>
div {
font-weight: bold;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Font-weight changes how thick or thin the text that is displayed is.
The values can be normal, bold, bolder, lighter, or a number between 100 and 900. 100 is the thinnest and 900 is the thinnest.
Font-style
<style>
div {
font-style: italic;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Font-style sets the style of the text that is displayed.
The values can be normal, italic, or oblique.
Text-decoration
<style>
div {
text-decoration: underline overline;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Text-decoration adds decoration around or on the text that is displayed.
The values can be underline, overline, line-through, or a combination of any of them separated by spaces.
Border-style
<style>
div {
border-style: solid;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Border-style adds a border around objects.
The values can be none (default, shows no border), solid, dashed, dotted, double, groove, inset, outset, or ridge.
This can be combined with border-width and border-color (below) to change the thickness and color of the border.
Border-width
<style>
div {
border-style: solid;
border-width: 10px;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Border-width changes the thickness of a border.
The values can be medium (default), thick, thin, or a custom length.
This can be combined with border-style (above) and border-color (below) to change the style and color of the border.
You cannot have border-width on its own - border-style must be included to show the border.
Border-color
<style>
div {
border-style: solid;
border-color: mediumpurple;
}
</style>
<div>Hello world!</div>
Try it »
Meaning and Usage
Border-color changes the color of a border.
The values can be transparent or any other color.
This can be combined with border-style and border-width (above) to change the style and thickness of the border.
You cannot have border-color on its own - border-style must be included to show the border.
