Lesson 6 - CSS Selectors And Properties

6.2 Common CSS Properties

CSS properties define the styles you want to apply to the selected elements. Here are some common CSS properties:

1. Color Sets the text color of an element.

<style>
p {
 color: blue;
}
</style>
<p>This is a text.</p>

This will make the text in all <p> elements blue.

2. Font-size Sets the size of the text element.

<style>
p {
 font-size: 20px;
}
</style>
<p>This is a text.</p>

This will make the text in all <p> elements 20 pixels high.

3. Background-color Sets the background color of an element.

<style>
p {
 background-color: lightgrey;
}
</style>
<p>This is a text.</p>

This will make the background color of the paragraph element.

4. Margin Sets the space outside the border of an element.

<style>
h1 {
 margin: 20px;
}
</style>
<h1>Some text here</h1>

This will add 20 pixels of space around all <h1> elements.

5. Padding Sets the space inside the border of an element.

<style>
div {
 padding: 15px;
 background-color: lightgrey;
}
</style>
<div>Some text here</div>

This will add 15 pixels of space inside all <div> elements, between the content and the border.

6. Border Sets the border around an element.

<style>
p {
 border: 1px solid black;
}
</style>
<p>This is a text.</p>

This will add a 1-pixel solid black border around all <p> elements.

7. Width and Height Sets the width and height of an element.

<style>
div {
 width: 200px;
 height: 100px;
 background-color: lightgrey;
}
</style>
<div><div>

This will set the width of all <div> elements to 200 pixels and the height to 100 pixels.