CSS Properties
Background
CSS background property is used to define the background effects on Html element. There are
5 CSS background properties that affect the Html elements.
● background-color
● background-image
● background-repeat
● background-attachment
● background-position
background-color
The background-color property is used to specify the background color of the Html element.
Example
<html>
<head>
<style>
h3{ background:yellow; }
p{ background:cyan; }
</style>
</head>
<body>
<h3>This is h3 Heading</h3>
<p>This is paragraph</p>
</body>
</html>
Output:
This is h3 Heading
This is paragraph.
In above example we set the background color cyan for <p> and yellow for <h3>.
background-image
The background-image property is used to specify the image in background of the Html element.
Example
<html>
<head>
<style>
p{background-image:url(car2.png);}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically. If you do not want to repeat
background image then set no-repeat.
Example: repeat in x-axis
<html>
<head>
<style>
p{
background-image:url(car2.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
Example: repeat in y-axis
<html>
<head>
<style>
p{
background-image:url(car2.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
background-position
background-position is use only in case of when you use image in background of any Html
elements. It is used to define the initial position of the background image. By default, the
background image is placed on the top-left of the webpage. You can set position of background,
all background image position are given below;
● top
● bottom
● center
● left
● right
example:
p{
background-image:url(car3.png);
background-repeat: no-repeat;
background-position: bottom;
}
CSS Border
The CSS border properties allow you to specify the style, size, and color of an Html element
border. Following CSS border properties are used for Html elements,
● border-style
● border-width
● border-color
● border-radius
● border-shadow : HposVerposblurradius spread shadowcolor
Border Style
The border-style property specifies what kind of border to display.
Value Description
none It is used for does not define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
It defines two borders with the same border-width
double
value.
It defines a 3D grooved border. effect is generated
groove
according to border-color value.
It defines a 3D ridged border. effect is generated
ridge
according to border-color value.
It defines a 3D inset border. effect is generated
inset
according to border-color value.
It defines a 3D outset border. effect is generated
outset
according to border-color value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Output
No border.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
Border Width
The border-width property is used to set the border width. It is set in pixels. You can also set the
width of the border by using pre-defined values, thin, medium or thick.
Example: css border-color
<!DOCTYPE html>
<html>
<head>
<style>
p.para1 {
border-style: solid;
width:200px;
border-color: green;
}
p.para2{
border-style: solid;
width:100px;
border-color: red;
}
</style>
</head>
<body>
<p class="para1">This is a solid red border</p>
<p class="para2">This is a solid green border</p>
</body>
</html>
Output
border-radius 50px
border-radius 10px
Border Color
This properties are used for set the color of Html elements border. There are three method to set
the color of border.
● Name: It specifies the color name. For example: "red".
● RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
● Hex: It specifies the hex value of the color. For example: "#ff0000".
Example: css border-color
<!DOCTYPE html>
<html>
<head>
<style>
p.para1 {
border-style: solid;
border-color: green;
}
p.para2 {
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<p class="para1">This is a solid red border</p>
<p class="para2">This is a solid green border</p>
</body>
</html>
Output
This is a solid red border
This is a solid green border
Border Radius
border-radius are used for give the radius for border, using this you can make a circle.
Example: css border-color
<!DOCTYPE html>
<html>
<head>
<style>
p.parar1 {
border-style: solid;
border-radius: 100%;
border-color: green;
}
p.parar2 {
border-style: solid;
border-radius: 50%;
height:100px;
width:100px;
border-color: red;
}
</style>
</head>
<body>
<p class="parar1">This is a solid red border</p>
<p class="parar2">This is a solid green border</p>
</body>
</html>
CSS Display
CSS display is the most important property of CSS which is used to display Html elements on
web page. Every Html element on the webpage is a rectangular box and the CSS display
property specifies the type of box used for an Html element.
CSS display values
Values Description
It is used to displays an Html element in same line
inline
(like <span>).
none It is used to hide the Html element.
It is used to displays an element as a block element
block
(like <p>).
list-item Let the element behave like a <li> element.
display:inline
It is used to display an Html elements in same line without any line break. In below example three
paragraph display in same line.
<!DOCTYPE html>
<html>
<head>
<style>
p{
display:inline;
}
</style>
</head>
<body>
<p>Inline display</p>
<p>Inline display</p>
<p>Inline display</p>
</body>
</html>
Output:
Inline display Inline display Inline display
display:none
It is used for hide text on browser but it does not take any space. In below example we hide three
paragraph texts.
<!DOCTYPE html>
<html>
<head>
<style>
p{
display:none;
}
</style>
</head>
<body>
<p>Text not display</p>
<p>Text not display</p>
<p>Text not display</p>
</body>
</html>
display:block
It is used to displays an element as a block element. It displays elements same like <p> tag. In
below example we display text by using <span> tag. It take some space and also line break
same like paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<span>Block display elements</span>
<span>Block display elements</span>
<span>Block display elements</span>
</body>
</html>
Output
Inline-Block elements
inline-Block elements
display:inline-block
It is used to displays an element as a block element. It display an elements same like <p> tag. In
below example we display text by using <span> tag. It take some space but it display all element
in same line.
<!DOCTYPE html>
<html>
<head>
<style>
p{
display:inline-block;
}
</style>
</head>
<body>
<span>Inline-block elements</span>
<span>Inline-block elements</span>
<span>Inline-block elements</span>
</body>
</html>
Output
Inline-Block elements Inline-Block elements
CSS Float
The CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.
How it works
Elements are floated only horizontally. So it is possible only to float elements left or right, not up
or down.
● A floated element may be moved as far to the left or the right as possible.
Simply, it means that a floated element can display at extreme left or
extreme right.
● The elements after the floating element will flow around it.
● The elements before the floating element will not be affected.
● If the image floated to the right, the texts flow around it, to the left and if
the image floated to the left, the text flows around it, to the right.
CSS Float Properties
Property Description Values
The clear property is used to
left, right, both, none,
clear avoid elements after the floating
inherit
elements which flow around it.
It specifies whether the box left, right, none,
float
should float or not. inherit
<!DOCTYPE html>
<html>
<head>
<style>
input{
float:right;
}
</style>
</head>
<body>
<p>Float textbox's from right</p>
<input><input><input><input>
</body>
</html>
CSS Font
CSS font is used for design text or font for display on web page. CSS font properties define the font
family, boldness, size, and the style of a text.
Font-style property:
Font styles are used for set font style. Font style property has three values they are;
● normal: The text is shown normally
● italic: The text is shown in italics
● oblique: The text is "leaning" (oblique is very similar to italic, but less
supported)
Example: font style
<html>
<head>
<style>
h1 {
font-style: normal;
}
h2 {
font-style: italic;
}
p{
font-style: oblique;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Output
This is h1 Heading
This is h2 Heading
This is Paragraph
Font-Size property:
We can define size of font in following way
With Em
With Percent
With Pixels
If you set the text size with pixels then you can gives full control over the text size.
Example:
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Font size in Em
The em size unit is recommended by the W3C. 1em is equal to default text size in browsers (16px).
The size convert pixels to em using this formula: pixels/16=em
Example:
<html>
<head>
<style>
h1 {
font-size: 2.5em; * 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Font size in percent
Text size work on all browsers, you can use default font-size in percent for the <body> element.
Example:
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p{
font-size: 0.875em;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
CSS Margin
margins are used for give sufficient space around an element (outside the border). The margin
does not have a background color, and it is completely transparent. Margin have four properties
which is given below;
● top
● bottom
● left
● right
Example
<html>
<body>
<p style="margin-top:150px;"> Margin from top</p>
<p style="margin-bottom:100px;">Margin from bottom</p>
<p style="margin-right:50px;">Margin from right</p>
<p style="margin-left:50px;">Margin from left</p>
</body>
</html>
CSS Padding
The padding clears an area around the content (inside the border) of an element. The padding is
affected by the background color of the element. Padding have four properties which is given
below;
● top
● bottom
● left
● right
Example
<html>
<body>
<div style="border:2px solid red;">
<p style="padding-top:50px;">padding from top</p>
<p style="padding-bottom:10px;">padding from bottom</p>
</div>
<p style="padding-right:50px;">padding from right</p>
<p style="padding-left:50px;">padding from left</p>
<!—NORMAL TEXTFIELD 🡪
<input type="text" name="t1"/>
<!—TEXTFIELD WITH PADDING SETTINGS 🡪
<input type="text" name="t1" style="padding-right:10px;padding-left:10px;padding-
top:5px;padding-bottom:5px;"/>
</body>
</html>
Output
CSS Overflow
CSS overflow property used to handle the content when it overflows its block level container.
Why the need for Overflow?
Suppose if you do not set the height and width of any box then it goes larger as content, but if
you do not set height or width of box but content cannot fit inside the box then it goes overflow.
The CSS overflow property is used to overcome this problem.
Overflow property values
Values Description
It specifies that overflow is not clipped. It renders
visible
outside the element's box. This is a default value.
It specifies that the overflow is clipped, and rest of
hidden
the content will be invisible.
It specifies that the overflow is clipped, and a scroll
scroll
bar is used to see the rest of the content.
It specifies that if overflow is clipped, a scroll bar is
auto
needed to see the rest of the content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: cyan;
width: 200px;
height: 150px;
overflow: scroll;
}
div.hidden {
background-color: pink;
width: 100px;
height: 150px;
overflow: hidden;
}
div.auto {
background-color: yellow;
width: 100px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>overflow:scroll</p>
<div class="scroll">
If contents go out of the container then a scroll bar is used to see the rest of the content.
</div>
<p>overflow:hidden</p>
<div class="hidden">
It specifies that the overflow is clipped, and the rest of the content will be invisible.
</div>
<p>overflow:auto</p>
<div class="auto">
It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
</div>
</body>
</html>
Output
CSS Position
position properties are used for set the position of Html elements. css position properties are
used for set the position of text, image for display on web page.
CSS have following position properties;
● Static
● Relative
● Absolute
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_static {
position: static;
top: 80px;
right: 40px;
color: green;
}
</style>
</head>
<body>
<p class="pos_static">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_relative {
position: relative;
top: 20px;
right: 10px;
color: green;
}
</style>
</head>
<body>
<p class="pos_relative">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_absolute {
position: absolute;
top: 140px;
right: 50px;
color: green;
}
</style>
</head>
<body>
<p class="pos_absolute">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>
CSS Opacity
In CSS we can easily create transparent images v ery easily by using Opacity.The CSS
Opacity property is used to specify the transparency of any Html element. In simple word, you
can say that it specifies the clarity of the image.
Opacity value should be range 0 to 1 only.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* this one for For IE8 and earlier */
}
</style>
</head>
<body>
<imgsrc="car3.png" alt="logo">
<img class="trans" src="car3.png" alt="logo">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#i{
background-image:url("w.jpg");
}
#div1{
width:500px;
height:300px;
background-color:#3399ff;
opacity:0.6;
}
</style>
</head>
<body id="i">
<div id="div1">
hello world
</div>
</body>
</html>
CSS TextStyles
CSS text styles are used specify space between letters, words, lines etc…
Value Description
Letter-spacing This property specifies the gap between letters.
Word-spacing This property specifies the gap between words.
Line-height This property specifies the height of the line of text.
This property specifies
Text-decoration underline/overline/strikeout/overline/line-through/none.
Default value is none.
This property specifies the case of text. Those are
Text-transform uppercase / lowercase / capitalize / none. Default value is
none.
Used to specify alignment of text. Alignments are left / right /
Text-align
center / justify. Default is left.
Used to apply shadow for the text.
Text-shadow
Syn: Hposverposblurradiusshadowcolor
Example
<!-- text spaces -->
<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size:20px; }
.p1{ letter-spacing: 5px; }
.p2{ letter-spacing: -1px; }
.p3{ word-spacing: 10px; }
.p4{ line-height: 40px; }
.p5{ text-decoration: line-through; }
.p6{text-transform:uppercase; }
.p7{ text-align: center; }
</style>
</head>
<body>
<p class="p1">This line Demonstrate letter spacing </p>
<p class="p2">This line Demonstrate letter spacing -ve value</p>
<p class="p3">This line Demonstrate word spacing </p>
<p class="p4">This line Demonstrate line height </p>
<p class="p5">This line Demonstrate text-decoration </p>
<p class="p6">This line Demonstrate text-transform </p>
<p class="p7">This line Demonstrate text-align </p>
</body>
</html>
Output
This line Demonstrate letter spacing
This line Demonstrate letter spacing -ve value
This line Demonstrate word spacing
This line Demonstrate line height
This line Demonstrate text-decoration
THIS LINE DEMONSTRATE TEXT-TRANSFORM
This line Demonstrate text-align
CSS Word Wrap
CSS Word Wrap properties are used for breaks the long words and wrap onto the next line. The
main use of these properties is to prevent overflow when a long string is unable to fit into a
containing box.
word wrap values
Value Description
This property is used to break words only at allowed
normal
break points.
break-word It is used to break unbreakable words.
initial It sets this property to its default value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
width: 200px;
border: 1px solid #ff3333;
}
.p2{
width: 200px;
border: 1px solid #ff3333;
word-wrap: break-word;
}
</style>
</head>
<body>
<h3>without word-wrap</h3>
<p class="p1">Word Wrap properties are used for break the loooooooooooooooooooooooooooong
words and wrap onto the next line. </p>
<h3>with word-wrap</h3>
<p class="p2">Word Wrap properties are used for break the loooooooooooooooooooooooooooong
words and wrap onto the next line. </p>
</body>
</html>
Output
