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 [Link]
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 [Link]
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 [Link]
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 [Link]
Example
div
{
background-image:url('[Link]');
height: 250px;
}
<div>This div has background image</div>
Akash Technolabs [Link]
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 [Link]
Example
div {
background-image: url('[Link]');
height: 250px;
background-repeat: no-repeat;
}
<div>This div has background image </div>
Akash Technolabs [Link]
Background Position
Background Image - Set position
div {
background-image: url('[Link]');
height: 250px;
background-repeat: no-repeat;
background-position: right top;
}
<div>This div has background image </div>
Akash Technolabs [Link]
background-attachment
background-attachment:fixed | scroll
body {
background-image: url('[Link]');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
div{
height:500px;
}
<div>This div has background image </div>
Akash Technolabs [Link]
Border Property
Border
The CSS border properties allow you to specify the style, width, and color of an element's
border.
Akash Technolabs [Link]
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 [Link]
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 [Link]
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 [Link]
Shorthand Property :-
p{
border: 1px solid red;
// width style color
}
<p>Hello CSS</p>
Akash Technolabs [Link]
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 [Link]
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 [Link]
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 [Link]
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 [Link]
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 [Link]
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 [Link]
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 [Link]
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 [Link]
Types of Comments
There are 2 types of comments in CSS language.
Single Line Comments
Multi Line Comments
Akash Technolabs [Link]
Single Line Comments
Single line comments are represented by double slash //.
Multi Line Comments
Multi line comments are represented by slash asterisk
/* ... */.
Akash Technolabs [Link]
Example
<style>
p{
color: blue;
// This is a single-line comment
text-align: center;
}
/* This is
a multi-line comment */
</style>
Akash Technolabs [Link]
Get Exclusive
Video Tutorials
[Link]
[Link]
[Link]
Rating Us Now
Just Dial
[Link]
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET
Sulekha
[Link]
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info
[Link]
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar
+91 99786-21654
[Link]
[Link] #Akashpadhiyar
[Link] #aptutorials
[Link]
