CSS Class Day 2
# CSS Notes
CSS Properties
Index
1 B a ck g r o u n d s
2 Borders
3 Margin
4 Padding
5 Comments
Akash Technolabs www.akashsir.com
Background Properties
Backgrounds
CSS background properties are used to define the background effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
Akash Technolabs www.akashsir.com
background-color
The background-color property specifies the background color of an element.
h1 {background-color: green;}
h2 {background-color: blue;}
p {background-color: yellow;}
<h1>Hello world</h1>
<h2>Hello world</h2>
<p>Hello world</p>
Akash Technolabs www.akashsir.com
background-image
The background-image property specifies an image to use as the background of an
element.
By default, a background-image is placed on the top-left corner of any element, and
repeated both vertically and horizontally.
Akash Technolabs www.akashsir.com
Example
div
{
background-image:url('pic1.jpg');
height: 250px;
}
<div>This div has background image</div>
Akash Technolabs www.akashsir.com
Background Repeat
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and
vertically.
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
Akash Technolabs www.akashsir.com
Example
div {
background-image: url('pic1.jpg');
height: 250px;
background-repeat: no-repeat;
}
<div>This div has background image </div>
Akash Technolabs www.akashsir.com
Background Position
Background Image - Set position
div {
background-image: url('pic4.jpg');
height: 250px;
background-repeat: no-repeat;
background-position: right top;
}
<div>This div has background image </div>
Akash Technolabs www.akashsir.com
background-attachment
background-attachment:fixed | scroll
body {
background-image: url('pic1.jpg');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
div{
height:500px;
}
<div>This div has background image </div>
Akash Technolabs www.akashsir.com
Border Property
Border
The CSS border properties allow you to specify the style, width, and color of an element's
border.
Akash Technolabs www.akashsir.com
border-style
The border-style property specifies what kind of border to display.
Style:
Solid |Dotted |Double |Groove |Hidden |None |Outset |ridge
div {
border-style: solid;
padding: 10px;
}
<div>
This div tag has border around it.
</div>
Akash Technolabs www.akashsir.com
border-width
The border-width property specifies the width of the borders.
div {
border-style: solid;
padding: 10px;
border-width: 10px;
}
<div>This div tag has border around it.
</div>
Akash Technolabs www.akashsir.com
border-color
The border-color property is used to set the color of border.
div {
border-style: solid;
padding: 10px;
border-width: 10px;
border-color: red;
}
<div>This div tag has border around it.</div>
Akash Technolabs www.akashsir.com
Shorthand Property :-
p{
border: 1px solid red;
// width style color
}
<p>Hello CSS</p>
Akash Technolabs www.akashsir.com
All Border Properties
border-width:5px;
border-width:thin | medium | thick;
border-style:solid | dotted | dashed | double | groove | ridge ;
border-color:blue;
border:8px ridge red;
border-top:5px solid green;
border-bottom:8px grove orange;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-style: dotted solid double; (top, left right, bottom)
border-style: dotted solid double dashed; (top,right, bottom, left)
Akash Technolabs www.akashsir.com
CSS Margin
Margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border.
margin-top
margin-right
margin-bottom
margin-left
Akash Technolabs www.akashsir.com
Example
div
{
border: 1px solid red;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
}
<div>This div tag has border and margin around it.</div>
Akash Technolabs www.akashsir.com
If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Akash Technolabs www.akashsir.com
CSS Padding
Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content inside the border of an element.
padding-top
padding-right
padding-bottom
padding-left
Akash Technolabs www.akashsir.com
Example
div {
border: 1px solid red;
padding-left: 30px;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 30px;
}
<div>This div tag has border and padding around it.</div>
Akash Technolabs www.akashsir.com
If the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
Akash Technolabs www.akashsir.com
CSS Comments
CSS comments
CSS comments are generally write to explain your code.
It is very helpful for the users who reads your code in future so that they can easily
understand the code.
Comments are ignored by browsers.
Akash Technolabs www.akashsir.com
Types of Comments
There are 2 types of comments in CSS language.
Single Line Comments
Multi Line Comments
Akash Technolabs www.akashsir.com
Single Line Comments
Single line comments are represented by double slash //.
Multi Line Comments
Multi line comments are represented by slash asterisk
/* ... */.
Akash Technolabs www.akashsir.com
Example
<style>
p{
color: blue;
// This is a single-line comment
text-align: center;
}
/* This is
a multi-line comment */
</style>
Akash Technolabs www.akashsir.com
Get Exclusive
Video Tutorials
www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now
Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET
Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info
Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar
+91 99786-21654
www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com
