Basic of CSS
Basic of CSS
This is the lesson 1 of 4 in the course 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 πŸ‘‹

Course NavigationCSS Comments | CSS- Beginner to Advance >>

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply