June 15, 2021 Deccan Study

CSS tutorial part 1. Learn CSS chapter 1. Deccan Study

css logo

CHAPTER - 1.

We will create our first css website in this chapter.



Some Important Question :-
1. What is DOM?
Ans. 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.

2. What is HTML id and class attributes?
Ans:- When an HTML elements is given an ID, it serves as a unique identity for that element.
On the other hand, when an HTML elements 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).
For example:- suppose you are studying in class 8 section A.
You have a Roll. no. That is "id of elements" but in class 8 sec. A it will will lots of students that is "class of elements".


Note:- We can add multiple classes to an element.
Example:- 

<!DOCTYPE html>
<html>
<head>
<title>multiple classes</title>
</head>
<body>
	<div id="first_id">
	It can only one ID.
	</div>
	<div class="FirstClass SecondClass">
		After FirstClass the space is separate SecondClass. 
	</div>
</body>
</html>

3. How many ways of adding CSS?
there are three ways of adding CSS :-
  1. 1. by using <style> Tag.
  2. 2. inline CSS.
  3. 3. external CSS.

Example of all CSS linker:- 


<!DOCTYPE html>
<html>
<head>
<title> CSS linker</title>
<link rel="stylesheet" href="style. css"><!--style.CSS is name of my CSS file. -->
<style type="text/css">
body{
     background:red;
     /*it changes the background color of body*/
}
</style>
</head>
<body>
	<p style="color:blue;"> 
	It Changes the font color of p tag
	</p>
</body>
</html>

CSS selectors :-

A css selector is used to select an HTML elements for styling.
for example :- 

body{
	color:red;
	background:pink;
	/*it will change the background of 
	body to pink and text color to red
	*/
}
element selector:-

It is used to select an element based of the tag name.
For example :-

h1{
   color:red;
   /*it change the font color 
   of h1 tag*/
}
Id selector:-

It is used to select an element with a given Id.

for example :- 
#first_id{
	color:white;
	background:black;
}
class selector:-

It is used to select an element with the given class.

For example :- 
.red{
	background:red;
}
Important Notes:- 1. We can group selectors like this:- 
h1,h2,h3,p{
	color:blue;    
}
2. we can use element class as a selector like this:- 
p.red{
	color:red;/*it change all p tag of class red*/	
}
3. "*" can be used as universal selector to select all the elements. 
*{
	margin:0;
	padding:0;
/*it change the margin and padding of all tags*/
}
4. An inline style will override external and internal style code.

Deccan Study
Tags

Post a Comment

1 Comments