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{
