Scribd
Upload
8 views

CSS Notes For Students

Uploaded by

Divya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

CSS Notes For Students

Uploaded by

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

CSS Introduction

CSS Definition:-
• CSS is a style sheet language that is used to handle the presentation of the web page
containing HTML.
•It makes our websites beautiful and modern looking.

Types Of CSS :-There are three type of css.


1 Inline css
2 Internal css
3 External css

1. Inline CSS :- allows you to apply a unique style to one HTML element at a time.

<body>
<h1>This is CSS tutorial</h1> <p style= “color: red;”>hello I m applying inline css</p> </body>
2. Internal CSS :- It is used to define a style tag for a single HTML page. It is defined in the <head>
section within a <style> element. Let us understand the External CSS with the help of an example.

<head>
<style> p{ color: purple; } <style>

<head>

3. External CSS :- It is mostly used when you want to make changes on multiple pages. When
we use external css in our project then we make a new css file and link with html file.

<head>
<link rel= “stylesheet” href= “cssfile”>
<head>

p{ Color: greenyellow; }
CSS Selector:- CSS Selectors are used to target HTML elements
Type of Selector :- There are Four types of selectors.
1. Element Selector
2. Class Selector
3. Id Selector
4. Grouping Slector

1. Element Selector:-
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
</div>

2. Class Selector:-
<style> .redElement{ Color: red; } .bgBlue{ Background-color: blue; } </style>

<body>
<h3>CSS Selectors</h3>
<p>This is a simple paragraph to demonstrate css selectors</p> <p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to
demonstrate css selectors</p> <div> <p>This is yet another simple paragraph inside div to demonstrate css selectors</p> </div> </body>
3. Id Selector:-
<body>
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p>This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
</div>
</body>

<style> #firstPara{ color: green; } </style>

4. Grouping Selector:-
<body>
<h3>CSS Selectors</h3>
<p>This is a simple paragraph to demonstrate css selectors</p>
<p>This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
<span>this is span</span>
</div> <footer>This is footer</footer>
</body>

<style> footer, span{ Background-color: pink; } </style>


CSS Fonts:- The CSS font properties define the font family, boldness, size, and the style of a text. Like
as font-size, font-style, font-weight

CSS Color:- Color property use to add color any tag.


-
<body>
<h2>This is my first box</h2>
<p id="firstPara">This is a paragraph from first box</p>
<h2>This is my first box</h2>
<p id="secondPara">This is a paragraph from second box</p>
<h2>This is my first box</h2>
<p id="thirdPara">This is a paragraph from third box</p> </body>

#firstPara{ color:blueviolet; /* Color by name */ }

Backgrounds:- This property use to change background.


<body>
<h3>This is heading</h3>
<p id="firstPara">This is a paragraph</p>
</body>

#firstPara{ background-color: red;}


Border:- Border property use to add border.

<body>
<h3>This is heading</h3>
<p id="firstPara">This is a paragraph</p>
<h3>This is second heading</h3>
<p id="secondPara">This is my second paragraph</p>
<h3>This is third heading</h3>
<p id="thirdPara">This is my third paragraph</p>
</body>

#firstPara{ background-color: red;


height: 100px; width:455px;
border: 4px solid green; /* border-width: 4px; border-color: green; border-style: solid; */
border-radius: 11px; }

#secondPara{
background-color: rgb(58, 243, 98);
height: 100px;
width:455px;
border-top: 2px solid rgb(231, 22, 231);
border-right: 2px solid rgb(18, 10, 133);
border-bottom: 2px solid rgba(9, 144, 27, 0.774);
border-left: 2px solid rgb(156, 42, 13);
border-top-left-radius: 4px;
border-top-right-radius: 14px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 24px;
}
Margin :- It clears an area outside the border. The margin is also transparent.
Padding :- It clears an area around the content. The padding is transparent.

.container{
background-color: rgb(231, 230, 241);
border: 3px solid rgb(64, 6, 119);
/* We can set margin/padding for top, bottom, left and right like this */ /*
padding-top: 79px;
padding-bottom: 79px;
padding-left:
34px;
padding-right: 79px;*/ /*
margin-top: 3px;
margin-bottom: 5px;
margin-left: 34px;
margin-right:5px;
padding: 34px 19px;
margin: 14px 19px;
border-radius: 23px;
width: 533px
}
Styling Buttons:-
<button class="btn">Contact us</button>

.btn{
font-weight: bold;
background-color: crimson;
padding:6px;
border: none;
cursor:pointer;
font-size: 13px;
border-radius: 4px;
}

.btn:hover{
color:darkgoldenrod;
background-color:rgb(223, 245, 201);
border: 2px solid black;
}
#fruit {
float: right;
width: 48%;
}
#computer {
float: left;
width: 48%;
}
#stationary {
/* float: left; */
width: 100%;
}
Display Property:-
Display inline:- you can not define width and height. It takes automatic height and width.

Display Block:- you can define width and height and it always start new line.

Display Inline-block:- you can define height and width. It not start from new line.

Display flex:- This property use to set all item in the row
Position property:- This property use to set position of the element.
Types of Position:- There are five types of position property.
• static
• relative
• absolute
• fixed
• Sticky

1. position: static:- It is the default position of HTML elements.


2. position: relative; It is used when we need to position an HTML element relative to its normal
position.
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>

.box{ border: 2px solid red;


display: inline-block;
width: 150px;
height: 150px;
margin: 2px; }

#box3 {
position: relative;
top: 34px;
left: 34px;
}
3. position: absolute; An element with the absolute position will move according to the position of its
parent element

#box3 {
position: absolute;
top: 34px;
left: 34px;
}
4. position: fixed; This position property is used when we want to keep an HTML element at a fixed spot
no matter where on the page the user is.

#box3{
position: fixed;
right: 4px;
}

5. position: sticky; It is a hybrid of relative and fixed position.

#box3 {
position: sticky;
top: 3px;
}
CSS Visibility Property:
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>

.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box1 {
background-color: greenyellow;
}
#box2 {
background-color: rebeccapurple;
}
#box3 {
background-color: blue;
}
#box4 {
background-color: lightcoral;
}
Visibility:hidden :- Its use to hide element of content.
#box2 {
background-color: rebeccapurple;
visibility: hidden;
}
Display:none :-

#box2 {
background-color: rebeccapurple;
display: none;
}
Box Shadow:- box shadow propery is use to define the shadow vertical
and horizontal
Out-put
Media Query:- Media queries are used when we want to customize our website's presentation
according to the user's screen size. With the help of media queries, you can display different markups
based upon the device's general type(mobile, desktop, tablet).

You might also like