What Is CSS

What is CSS

Introduction

HTML is just an skeletal layout of a website. We need CSS to design a website, add styles to it and make it look beautiful.

Now What Is CSS ?

CSS stands for cascading style sheets. CSS is optional but it converts an off looking HTML page into a beautiful and responsive website.

Installing VS Code :

We will use Microsoft Visual Studio Code as a tool to edit our code. It is very powerful, free and customizable .

Why Learn CSS ?

CSS is a very demanded skill in the world of web development. If you are successfully able to master CSS, you can customize your website as per your liking.

Your First Line Of CSS :

Create a CSS file inside you directory and add it to your HTML. Add the following line to your CSS.

body { background – color : red }  = This will make your page background as red.

HTML Refresher :

HTML is a bunch of tags used to lay the structure of a page. If you want HTML in details then you can read our HTML post, if you want to basic HTML then continue !

Create Our First CSS Website

We will create our first CSS website in this section.

So First We Need To Know What is DOM ?

DOM stands for Document Object Metal. When a page is loaded, the browser creates a DOM of the page which is constructed as  a tree of object.

HTML id and class attributes :

When an HTML element is given an id, it serves as a unique identifier for that element. On the other hand, when an HTML element is given a class, it now belongs to that class. More than one elements can belong to a single class but every element must have a unique id (if assigned).

There are 3 ways to add CSS to HTML :

  1. <style> tag = Adding <style> . . . . </style> to HTML
  2. Inline CSS = Adding using style attribute
  3. External CSS = Adding stylesheed (.CSS) to HTML using <link> tag

CSS Selectors :

A CSS selector is used to select on HTML elements for styling.

body { color: red; =Declaration

background: pink; =Declaration }

Element Selector :

It is used to select an element based off the tag name for example –  h2 { color: blue; }

Id Selector :

It is used to select an element with a given id for example – (# = is used to target by id)

#first { color: white;  background: black; }

Class Selector :

It is used to select an element with a given class for example –  .red { background : red; }

Important Notes :

  • We can group selectors like this –

h1, h2, h3, div {color: blue; }

  • We can use element class as a selector like this –

P .red { color: red; } = all paragraphs will become red

  • * Can be used as a universal selector to select all the elements

* { margin: 0; padding: 0;}

An inline style will override external and internal styles.

One Comment on “What Is CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *