In the previous lesson we talked about the html text tags and used them in a simple web page. In this lesson we will focus on
styling the various elements of a web page. Some of the most important css properties are discussed below:
Width Property:
The css width property is used to define the width of an html element. Width can be assigned to an element in pixels (px) or percent (%). The width assigned in percentage is that if the width of let's say a div element is 60% then this means that the width of the div is 60% of the browser window. If you reduce the size of the browser window, the width of the div will decrease automatically with it and will adjust itself in the smaller window.
<div style="width:100%;height:40px;border:1px solid black;"></div>
Larger Browser Window:
Smaller Browser Window:
While the width assigned in pixels will be the fixed width of a div and won't decrease with smaller window size.
<div style="width:1360px;height:40px;border:1px solid black;"></div>
Larger Browser Window:
Smaller Browser Window:
The width of div can also be set to auto and in such case browser will determine the width of the div i.e width:auto;
Height Property:
The height property of css is used to define the height of an html element. Just like the width property, height can in pixels, percentage or auto.
Background Color Property:
Background Color property is used to set the background colour of an html element.
<div style="width:500px;height:200px;background-color:red;"></div>
Color Property:
The color property is used to change the default black text colour of an element to the specified colour.
<div style="width:500px;height:200px;color:red;border:1px solid black;">Sample Text</div>
Border Property:
Border property is used to set the border weight and border color of an html element. Border can be set for all 4 sides of an element or a single side.
Example of setting border for all 4 sides: <div style="width:500px;height:200px;border:1px solid black;"></div>
In the above example 1px is the weight of the border and black is the colour of the border.
Example of setting border for 1 side: <div style="width:500px;height:200px;border-bottom:1px solid black;"></div>
Similary border for the remaining 3 sides can be set like this:
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
Border Radius:
Border Radius property is used to make the corners of an html element rounder.
border-radius:10px 10px 10px 10px;
In the above property each 10px is the radius of one of the four corners. First 10px is the radius of top left corner, second is the radius of top right corner, third is the radius of bottom right corner and fourth is the radius of bottom left corner. Making the radius of one of these four corners equal to 0px will make that corner sharp again.
<div style="width:500px;height:200px;border:2px solid black;border-radius:10px 10px 10px 10px;"></div>
Related Posts
Width Property:
The css width property is used to define the width of an html element. Width can be assigned to an element in pixels (px) or percent (%). The width assigned in percentage is that if the width of let's say a div element is 60% then this means that the width of the div is 60% of the browser window. If you reduce the size of the browser window, the width of the div will decrease automatically with it and will adjust itself in the smaller window.
<div style="width:100%;height:40px;border:1px solid black;"></div>
Larger Browser Window:
Smaller Browser Window:
While the width assigned in pixels will be the fixed width of a div and won't decrease with smaller window size.
<div style="width:1360px;height:40px;border:1px solid black;"></div>
Larger Browser Window:
Smaller Browser Window:
The width of div can also be set to auto and in such case browser will determine the width of the div i.e width:auto;
Height Property:
The height property of css is used to define the height of an html element. Just like the width property, height can in pixels, percentage or auto.
Background Color Property:
Background Color property is used to set the background colour of an html element.
<div style="width:500px;height:200px;background-color:red;"></div>
Color Property:
The color property is used to change the default black text colour of an element to the specified colour.
<div style="width:500px;height:200px;color:red;border:1px solid black;">Sample Text</div>
Border Property:
Border property is used to set the border weight and border color of an html element. Border can be set for all 4 sides of an element or a single side.
Example of setting border for all 4 sides: <div style="width:500px;height:200px;border:1px solid black;"></div>
In the above example 1px is the weight of the border and black is the colour of the border.
Example of setting border for 1 side: <div style="width:500px;height:200px;border-bottom:1px solid black;"></div>
Similary border for the remaining 3 sides can be set like this:
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
Border Radius:
Border Radius property is used to make the corners of an html element rounder.
border-radius:10px 10px 10px 10px;
In the above property each 10px is the radius of one of the four corners. First 10px is the radius of top left corner, second is the radius of top right corner, third is the radius of bottom right corner and fourth is the radius of bottom left corner. Making the radius of one of these four corners equal to 0px will make that corner sharp again.
<div style="width:500px;height:200px;border:2px solid black;border-radius:10px 10px 10px 10px;"></div>
Css Margin and Padding Properties
Css Float Property
Types of Css
Making Navigation menus using unordered lists
No comments:
Post a Comment