Learn CSS from scratch
Hello! Welcome
We are going to learn CSS from scratch to make your web pages look amazing!
What is CSS?
CSS (Cascading Style Sheets) is a language that allows you to style web pages, such as colors, fonts, and layouts.
- Cascading: This means that styles are applied in order of priority. If there are multiple styles for the same element, the most specific or the last defined is chosen.
Applying CSS to HTML
You can apply CSS to your HTML pages in three ways:
- inline with the
style=""attribute - In internal block delimited by
<style>...</style>tags - Or in an external file included with
<link rel="stylesheet" href="mystyle.css">(this is the most recommended option)
Structure of a CSS file
A CSS file contains style rules that apply to the HTML elements of your page.
Rules are written in,
- Selectors that delimit which elements are affected
- Declarations that establish the properties
You’re doing great!
Now let’s talk about the syntax of CSS.
Selectors in CSS
Selectors in CSS allow you to **choose the HTML elements you want to apply styles to.
Some types of selectors:
- Tag selector: Styles all tags of a type. Example:
p { } - Class selector: Styles elements with a specific class. Example:
.my-class { } - ID selector: Styles an element with a unique ID. Example:
#my-id { }
Use selectors to apply styles to any part of your page!
Properties and values in CSS
In CSS, properties define what aspect of the style to change, and values determine how it will look.
For example:
.my-class {
color: red;
font-size: 16px;
}Combine properties and values to customize your page!
Colors in CSS
In CSS, you will need to use colors frequently to bring your page to life. There are many ways to use colors.
- Color names: Use words like
red,blue,green, etc. - Hex codes: These are codes that start with
#followed by numbers and letters, like#ff0000(red). - RGB values: Use
rgb()with values between 0 and 255 for red, green, and blue. Example:rgb(255, 0, 0)(red).
Experiment with different colors and formats!
Typography in CSS
CSS allows you to customize text using different typography properties.
font-family: Defines the font you want to use. Example:font-family: 'Arial', sans-serif;font-size: Changes the text size. Example:font-size: 20px;font-weight: Adjusts the thickness of the text. Example:font-weight: bold;font-style: Applies styles like italic. Example:font-style: italic;
Use these properties to make the text look exactly how you want!
Box Model
The box model is a structure that defines how the size and spacing of elements on the page are calculated. It is very important!
- Content: The content of the element.
- Padding: The internal space around the content.
- Border: The border that surrounds the padding.
- Margin: The external space between the border and other elements.
You’re almost there!
Now let’s take a look at something a bit more complicated like layouts, variables, and tools.
Flexbox and Grid
Flexbox and Grid are advanced methods for creating complex and responsive layouts in CSS.
- Flexbox: It is ideal for distributing and aligning elements in a single direction (horizontal or vertical).
- Grid: Allows you to create layouts in two dimensions (rows and columns).
Responsive Design
Responsive design is designing your website to look good on different screen sizes and devices (for example, desktop and mobile).
One way is using Media Queries, which allow you to apply styles based on the width of the screen or other factors.
@media (max-width: 991px) {
}Variables in CSS
CSS variables allow you to store reusable values to make style management easier.
- They are defined using
--variable-name. Example: - Then you can use them with the
var()function. Example:
With variables, your CSS code will be cleaner and easier to maintain!
Useful tools
There are tools like preprocessors (Sass, Less) and frameworks (Tailwind) that can help you write and manage CSS more efficiently.
In addition to methodologies (like BEM) that establish formats and rules for organizing CSS files.
Well done!
Now you have the basics to start creating and styling web pages with CSS!
