- Basic of CSS | CSS- Beginner to Advance
- CSS Comments | CSS- Beginner to Advance
- CSS Colors | CSS- Beginner to Advance
- CSS Backgrounds | CSS- Beginner to Advance
Hi 👋 fellow coders. Welcome to the first lesson of the course CSS – Basic to Advance. CSS stands for Cascading style sheets. We use CSS to style Webpages. In this course, we will go through the basic to the advanced level of CSS.
Table of Contents
This lesson requires basic HTML knowledge. If you want to learn HTML then, take our HTML – Beginner to Advance course. Free for a limited time only.
What is CSS?
CSS is a rule-based language, It describes how a markup language (HTML) webpage should look. CSS is a must for any webpage or website to style it.
How to use CSS with HTML?
On an HTML page, We can use CSS in three different ways.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS defines the unique style of a single HTML element with the help of a style attribute.
Internal CSS
Internal CSS defines the style of a single HTML page. We can define internal CSS in <style> element within the <head> element.
External CSS
External CSS defines the style of multiple HTML pages defined in a separate file. We use the “.css” file extension.
CSS Syntax
Here is the CSS syntax
selector { property: value; }Example
h1 { color: red; }Let’s learn the CSS syntax bit by bit.
CSS Selector
CSS selector is a reference or a pointer to the HTML element we want to style.
There are 5 CSS selectors
- Simple selectors
- Combinator selectors
- Pseudo-class selectors
- Pseudo-elements selectors
- Attribute selectors
In this lesson, we will learn the first type of CSS selectors (The Simple selectors)
(We will learn about other CSS selectors in the upcoming lessons.)
Simple selectors
here are mainly 3 Simple selectors in CSS
- Element selector
- ID selector
- Class selector
Element Selector
It selects the HTML element based on its name.
Example
h1 { color: red; }Here h1 is an HTML element selector
Universal Selector
It selects all the HTML elements on the page. To use this, we write an asterisk (*) character.
Example
* { text-align: center }ID selector
It selects the HTML element with its ID name. To use, we write a hash (#) character followed by the element ID.
Example
#heading1 { color: red; }here #heading1 is an ID selector
Class selector
The Class selector selects all the HTML elements with the same class name. To use, we write a dot (.) character followed by the class name.
Example
.container {
width: 50px;
height: 50px;
}Here .container is a class selector
CSS Property
A CSS property specifies what to style of the selected HTML element. Example- color, font size, and height.
CSS Property Value
A CSS property value specifies how to style the selected HTML element. Example- red, 50px, and 5s.
Practice Example
Let’s create a scenario where we want to change the color of all the h1 elements to red on the HTML page.
Because we want to select all the h1 elements on the page, we will use internal CSS.
First, we have to select the h1 element then we will use the color property to change its color to red.
<h1>I am a red heading</h1>
<style>
h1 {
color: red; /* Try to chage the color value to blue */
}
</style>Let’s run it by clicking on the play button in the top right corner.
Here, we used Internal CSS with the help of the style element.
The above code is editable, so change the color value from red to blue and run it again.
Like below
h1 {
color: blue; /* Here we changed color value from red to blue */
}With that said. This lesson ends here. Don’t forget to share this article with your friends.
Until next time 👋
