Summary
Below you will find a collection of tutorials on the basics of CSS, the stylesheet language.
Before You Start
These tutorials assume you have a basic understanding of HTML.
Tutorials
Table of Contents
- Introduction
- Syntax
- Values
- Properties
- Selectors
- Useful HTML elements
- Other ways of writing CSS
- Intermediate topics
- CSS concepts
- Building Projects
Introduction
Why should I use CSS?
Learn why you should use CSS.
Creating and saving a CSS file
The file extension for CSS files is .css
.
Linking an external CSS file to an HTML file
<link rel="stylesheet" href="main.css">
Syntax
Comments
/* A comment in CSS */
Understanding the style rule syntax*
Learn how to understand the style rule syntax used in CSS.
Values
Color values
You can use RGB, hexadecimal, HSL, or keyword values for colors in CSS.
Length units*
The most common length units in CSS are px, percentages, ems, rems, vh, and vw.
Properties
Text color
color: red;
Background color
background-color: red;
Font properties*
font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 2;
font-family: Arial, sans-serif;
Border properties
border-width: 1px;
border-style: solid;
border-color: red;
border-radius: 4px;
Margins
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Padding
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Selectors
Element selector
p {}
Multiple elements selector
h1, h2, p {}
Class selector*
.class-name {}
ID selector
#id-name {}
Child selector
.class-name > p {}
Descendant selector
.class-name p {}
Pseudo-classes
p:pseudo-class {}
Useful HTML Elements
div element*
<div class="my-class">
<h1>Group</h1>
<p>The heading element and this paragraph will share similar styles.</p>
</div>
span element*
<p>The span element is used to <span class="my-class">style text inside</span> of another element.</p>
Other ways of writing CSS
Internal stylesheet
<style>
p {
color: red;
}
</style>
Inline styles
<p style="color:red;">Paragraph text with a style attribute.</p>
Intermediate topics
Custom properties
:root {
--main-color: red;
}
p {
color: var(--main-color);
}
Media queries
@media screen and (min-width: 576px) {
p {
/* add properties here */
}
}
Flexbox
.flex-container {
display: flex;
}
Grid
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
CSS Concepts
The cascade
Learn how the cascade affects how CSS rules are applied.
Specificity
Learn how specificity affects how CSS rules are applied.
Inheritance
Learn how inheritance affects how CSS rules are applied.
!important keyword
p {
color: red !important;
}
Building projects
HTML and CSS project structure
Learn how to structure an HTML and CSS project.
* work in progress
** coming soon!
Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.