Scribd
Upload
7 views

CSS BASIC NOTES

Uploaded by

Agent D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS BASIC NOTES

Uploaded by

Agent D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS COMPLETE BASIC NOTES:

Chapter 0: Introduction

HTML is just a skeleton of a website whereas CSS is needed to design a website.


CSS enables the user to make their website look more visually appealing by
adding different styles to the website in different forms to make it look beautiful.

What is CSS?
● CSS stands for ‘Cascading Style Sheets’
● CSS is used for styling of the backbone page or the content created using
the HTML language.
● CSS is an optional language but it helps in converting an absolute simple
webpage with no styling to a very visually appealing and responsive
website.

Your first line of CSS!


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

body {
background-color : red;
}

This will make the background of the page blue


Chapter 1: Creating our first CSS Website
We will create our first CSS website in this section.

What is DOM?
DOM stands for document object model. When a page is loaded, the browser
creates a DOM of the page, which is constructed as a tree of objects.

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. One or more elements can belong to a single class but every element must
have a unique id (if assigned).

We can add multiple classes to an element like this:

<div id= “first” class=“C1 C2 C3”> [Multiple classes followed by spaces]


…….
</div>

Three ways to add CSS to HTML:


1. <style> tag → Adding <style> … <style> to HTML
2. Inline CSS → Adding CSS using style attribute
3. External CSS → Adding a stylesheet (.CSS) to HTML using <link> tag.

CSS Selectors:
A CSS Selector is used to select an HTML element(s) for studying.

body {
color : red; → Declaration (property : value)
background : pink; → Declaration
}

Element Selector:
It is used to select an element based off the tagname for example:

h2 {
color : blue;
}
id Selector:
It is used to select an element with a given id for example:

#first{

You might also like