This is the CSS Tutorial where we will discuss how to set CSS styling of images, table, and lists in CSS. After completion of this post, your concept of CSS properties about styling images, styling the tables and styling of lists will be clear because there are given a very simple description and syntax with an appropriate example.
- CSS Tutorial: Styling images
- CSS Tutorial: Styling for tables
- CSS Tutorial: Styling for lists
CSS Tutorial: Styling Images
CSS provides you some properties that help you optimize images. These properties define the height, width, border, radius, and opacity of images. Their list is being given below.
- image border
- image height
- image width
- image opacity
- image radius
Let's try to know about all of these properties in detail.
Image Border Property
By Border property, you can define the width of the border of an image, its type (solid, dotted, dashed etc.), and its color. By defining these attributes, you can optimize an image for your webpage. The syntax for defining Border property is given below.
syntax:- border: width | type | color;
example:- border: 3px solid red;
Here you can see in this example width is 3px, the type is solid and the color is red. After the border width, the type of border is defined. CSS has four basic types of borders.
- dotted - Border is represented in the form of dotes.
- dashed - Border is represented in the form of dashes.
- double - Border shows as the double lines.
- solid - Border is shown as a solid(regular) line.
After defining the type of Border, you can define its color with the color name(red, blue, green etc) or hex code(#ffffff, #540231, #ccc etc). CSS also provides you border-radius property related to the border of the Images, which makes images round. The value of this property is defined in pixel (px) and percent(%). If you want to make images completely round, then you have to give the value 50%. For example border-radius: 50%;
Example of Border property has given below.
<!DOCTYPE html>
<html>
<head>
<title> Image Border Property </title>
<style>
img{
border: 3px solid red;
border-radius: 15%;
//border-radius: 25px;
}
</style>
</head>
<body>
<h1> Image border with radius example </h1>
<img src = "image.jpg">
</body>
</html>
<html>
<head>
<title> Image Border Property </title>
<style>
img{
border: 3px solid red;
border-radius: 15%;
//border-radius: 25px;
}
</style>
</head>
<body>
<h1> Image border with radius example </h1>
<img src = "image.jpg">
</body>
</html>
The above code generates the below output.
Image Height Property
With the height property, you can define the height of the image. You can also define the height of the image in pixels(px) and in percent(%). When you define the height in %, the image takes that much height according to the container. If 50% height defines, then it will take 50% height of the image window.
An example of the image height property has given below.
<!DOCTYPE html>
<html>
<head>
<title> Image height property </title>
<style>
img{
height: 250px;
//height: 25%; Height in percent.
}
</style>
</head>
<body>
<h1> Image height property example </h1>
<img src = "image.jpg">
</body>
</html>
<html>
<head>
<title> Image height property </title>
<style>
img{
height: 250px;
//height: 25%; Height in percent.
}
</style>
</head>
<body>
<h1> Image height property example </h1>
<img src = "image.jpg">
</body>
</html>
The above code generates the below output.
Image Width Property
Width property is used to define the width of images. You can define the width in pixels and %. As I mentioned above when you define the width in % then the image is shown in the same width of the container. The example of Image width property has given below.
The above code generates the below output.
<!DOCTYPE html>
<html>
<head>
<title> Image width property example </title>
<style>
img{
width: 400px;
//width: 40%;
}
</style>
</head>
<body>
<h1> Image width example </h1>
<img src = "image.jpg">
</body>
</html>
<html>
<head>
<title> Image width property example </title>
<style>
img{
width: 400px;
//width: 40%;
}
</style>
</head>
<body>
<h1> Image width example </h1>
<img src = "image.jpg">
</body>
</html>
The above code generates the below output.
Image Opacity Property
By opacity property, you can define the sharpness and clarity of images. The value of this property can be from 0.1 to 1. The more value you increase, the more the image becomes clear and visible. Images in 0.1 values become most blurry and in 1 value the more clear. Example of Opacity property is given below.
The above code generates the below output.
<!DOCTYPE html>
<html>
<head>
<title> image opacity property </title>
<style>
img{
opacity: 0.6;
}
</style>
</head>
<body>
<h1> Image Opacity Example </h1>
<img src = "image.jpg">
</body>
</html>
<html>
<head>
<title> image opacity property </title>
<style>
img{
opacity: 0.6;
}
</style>
</head>
<body>
<h1> Image Opacity Example </h1>
<img src = "image.jpg">
</body>
</html>
The above code generates the below output.
CSS Tutorial: Styling for Tables
The tables are used to represent any information in a structured form. HTML provides you tag to create tables.
But if you look at the designing part, you can’t do a special design of tables by HTML. But you do not need to be frustrated because you can apply styles on tables even through CSS. For this, CSS provides you five properties.
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
You can design tables by using other common properties with these properties. Let's try to know about all of these properties.
Border-Collapse Property
As you see, the borders of all cells are merged into the HTML tables. But if you want to separate each table cell, you can present their borders separately. For this, you can use the border-collapse property.
This property has two possible values. The first value is the collapse. When you set this value, all the cells have collapse border and all the cells use the same border.
The second value of this property is separate. When you set this value, the border of each table cell is represented separately. This is the default value of the border-collapse property. Let's try to understand it with an example.
The above code generates the below output.
<!DOCTYPE html>
<html>
<head>
<title> Border collapse property example </title>
<style>
table{
border-collapse: separate;
// border-collapse: collapse;
}
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Name </th>
<th> Age </th>
<th>Country</th>
</tr>
<tr>
<td> Abraham </td>
<td> 40 </td>
<td>USA</td>
</tr>
<tr>
<td> John </td>
<td> 45 </td>
<td>UK</td>
</tr>
<tr>
<td> Jimmy </td>
<td> 33 </td>
<td>India</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> Border collapse property example </title>
<style>
table{
border-collapse: separate;
// border-collapse: collapse;
}
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Name </th>
<th> Age </th>
<th>Country</th>
</tr>
<tr>
<td> Abraham </td>
<td> 40 </td>
<td>USA</td>
</tr>
<tr>
<td> John </td>
<td> 45 </td>
<td>UK</td>
</tr>
<tr>
<td> Jimmy </td>
<td> 33 </td>
<td>India</td>
</tr>
</table>
</body>
</html>
The above code generates the below output.
Border-Spacing Property
With this property, you can define the space between the cells of any table. You can define this space both horizontally and vertically.
The value of this property can be one and can also be two. When you define one value, it is applied both horizontal and vertically. When you define two values, the first value is applied horizontally and the second value is applied vertically. An example of this has given below.
The above code generates the output below.
<!DOCTYPE html>
<html>
<head>
<title> Border spacing property example </title>
<style>
table{
border-collapse: separate;
border-spacing: 15px;
}
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Laptop </th>
<th>Cofiguration</th>
<th> Prices </th>
</tr>
<tr>
<td> Dell </td>
<td>RAM 4GB, HDD 500GB</td>
<td> 55,000 </td>
</tr>
<tr>
<td> HP </td>
<td>RAM 5GB, HDD 500GB</td>
<td> 45,000 </td>
</tr>
<tr>
<td> Compaq </td>
<td>RAM 3GB, HDD 500GB</td>
<td> 35,000 </td>
</tr>
<tr>
<td> Samsung </td>
<td>RAM 2GB, HDD 500GB</td>
<td> 25,000 </td>
</tr>
<tr>
<td> Apple </td>
<td>RAM 3GB, HDD 500GB</td>
<td> 60,000 </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> Border spacing property example </title>
<style>
table{
border-collapse: separate;
border-spacing: 15px;
}
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Laptop </th>
<th>Cofiguration</th>
<th> Prices </th>
</tr>
<tr>
<td> Dell </td>
<td>RAM 4GB, HDD 500GB</td>
<td> 55,000 </td>
</tr>
<tr>
<td> HP </td>
<td>RAM 5GB, HDD 500GB</td>
<td> 45,000 </td>
</tr>
<tr>
<td> Compaq </td>
<td>RAM 3GB, HDD 500GB</td>
<td> 35,000 </td>
</tr>
<tr>
<td> Samsung </td>
<td>RAM 2GB, HDD 500GB</td>
<td> 25,000 </td>
</tr>
<tr>
<td> Apple </td>
<td>RAM 3GB, HDD 500GB</td>
<td> 60,000 </td>
</tr>
</table>
</body>
</html>
The above code generates the output below.
Caption-Side Property
By this property, you can define where the caption (title) of the table will show. But this property works only when you use <caption> tag inside the table. The <caption> tag is used to define the title of the table.
You can define two values for this property. The first value is the top which displays the caption at the top of the table. The second value is bottom which shows the caption (title) at the bottom (below). An example of this has given below.
The above code generates the output below.
<!DOCTYPE html>
<html>
<head>
<title> caption-side property example </title>
<style>
table{
border-spacing: 20px;
caption-side: bottom;
}
</style>
</head>
<body>
<table border = "1">
<caption> Employee Table </caption>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Smith </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Adam </td>
<td> CEO </td>
<td> 60,000 </td>
</tr>
<tr>
<td> Gill </td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tony </td>
<td> Manager </td>
<td> 40,000 </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> caption-side property example </title>
<style>
table{
border-spacing: 20px;
caption-side: bottom;
}
</style>
</head>
<body>
<table border = "1">
<caption> Employee Table </caption>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Smith </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Adam </td>
<td> CEO </td>
<td> 60,000 </td>
</tr>
<tr>
<td> Gill </td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tony </td>
<td> Manager </td>
<td> 40,000 </td>
</tr>
</table>
</body>
</html>
The above code generates the output below.
Empty-Cells Property
By this property, you can define whether the cells in which there is no content will show their borders or not. This property can have two values. The first value can be hidden and the second value show.
When you set this value, the cells in which there is no content, are hidden. The second value may show borders when you define this value the cells in which the content does not contain. Let's try to understand it with an example.
The above code generates the output below.
<!DOCTYPE html>
<html>
<head>
<title> empty-cells property example </title>
<style>
table{
empty-cells: hide;
//empty-cells:show;
}
</style>
</head>
<body>
<table border="1">
<caption> Employee Table </caption>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Devid </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Jony </td>
<td></td>
<td> 60,000 </td>
</tr>
<tr>
<td></td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tom </td>
<td> Manager </td>
<td></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> empty-cells property example </title>
<style>
table{
empty-cells: hide;
//empty-cells:show;
}
</style>
</head>
<body>
<table border="1">
<caption> Employee Table </caption>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Devid </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Jony </td>
<td></td>
<td> 60,000 </td>
</tr>
<tr>
<td></td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tom </td>
<td> Manager </td>
<td></td>
</tr>
</table>
</body>
</html>
The above code generates the output below.
Table-Layout Property
By this property, you can define that the layout of the table will be the same in all browsers and windows or will automatically change. This property can have two values.
First value you can define fixed. When you define this value, the layout of the table remains fixed in all browsers.
Second value you can define auto. When you define this value, the layout of the table automatically changes according to browsers. An example of this has given below.
The above code generates the given output below.
<!DOCTYPE html>
<html>
<head>
<title> table layout border property </title>
<style>
border-collapse: collapse;
border: 1px solid black;
//table-layout: fixed;
table-layout: auto;
width: 50%;
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Devid </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Jony </td>
<td>CEO</td>
<td> 60,000 </td>
</tr>
<tr>
<td> John </td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tom </td>
<td> Manager </td>
<td> 40,000 </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> table layout border property </title>
<style>
border-collapse: collapse;
border: 1px solid black;
//table-layout: fixed;
table-layout: auto;
width: 50%;
</style>
</head>
<body>
<table border = "1">
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Salary </th>
</tr>
<tr>
<td> Devid </td>
<td> MD </td>
<td> 1,00000 </td>
</tr>
<tr>
<td> Jony </td>
<td>CEO</td>
<td> 60,000 </td>
</tr>
<tr>
<td> John </td>
<td> GM </td>
<td> 50,000 </td>
</tr>
<tr>
<td> Tom </td>
<td> Manager </td>
<td> 40,000 </td>
</tr>
</table>
</body>
</html>
The above code generates the given output below.
Apart from these, you can apply common properties of CSS to tables like background-color, color, etc.
CSS Tutorial: Styling for Lists
Lists are useful to easily present important points related to any topic. With HTML, you can create two types of lists which are called ordered lists and unordered lists. To create lists in HTML, you can use the following HTML tags.
- <ul> - Ordered list
- <ol> - Unordered list
- <li> - list Item
You can style the lists by applying CSS to the above HTML tags. To style the Lists, you have provided four important properties in CSS. The list of these properties has given below.
- list-style-type
- list-style-position
- list-style-image
- list-style (shorthand)
- All these properties have given in detail.
- list-style-type
With list-style-type property, you can control the numbering and bullets of lists. In the case of unordered lists, you can use different types of bullets through this property, and in the case of ordered lists, you can use a different type of numbering.
If you want to apply this property to the unordered list (<ul> tag) then you can use the given four values below.
- none - This value does not show any marker.
- disc - This value shows the dark circle as a marker.
- circle - This value shows an empty circle.
- square - This value shows a dark square.
If you want to apply this property to order lists (<ol> tag) then you can use the values given below.
- none - This value does not show any sort of numbering.
- decimal - This value is numbering with decimal (1,2,3,4,5,6).
- lower-roman - This value shows the roman numbers in lower case.
- upper-roman - This value shows the roman numbers in upper case.
- lower-alpha – This value shows alphabets in lower case.
- upper-alpha - This value shows alphabets in upper case.
Apart from this, there are more values that you can use. Let's now try to understand list-style-type property with an example.
<!DOCTYPE html>
<html>
<head>
<title> list-style-type example </title>
<style>
ol{
list-style-type: lower-alpha;
}
ul{
list-style-type: disc;
}
</style>
</head>
<body>
<h1> Ordered List </h1>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> Bootstrap </li>
<li> JavaScript </li>
</ol>
<h1> Un-Ordered List </h1>
<ul>
<li> PHP </li>
<li> Ruby </li>
<li> Java </li>
<li> JQuery </li>
</ul>
</body>
</html>
<html>
<head>
<title> list-style-type example </title>
<style>
ol{
list-style-type: lower-alpha;
}
ul{
list-style-type: disc;
}
</style>
</head>
<body>
<h1> Ordered List </h1>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> Bootstrap </li>
<li> JavaScript </li>
</ol>
<h1> Un-Ordered List </h1>
<ul>
<li> PHP </li>
<li> Ruby </li>
<li> Java </li>
<li> JQuery </li>
</ul>
</body>
</html>
The above example produces the below output.
list-style-position
By this property, you can define the position of numbering and bullets. You can define two values of this property.
outside - When you define this value, there is considerable space between bullets/numbers and text. This shows the text separately.
inside - When you define this value, the space between the bullets/numbers and the text is less and both appear simultaneously. This property has explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> list-style-position example </title>
</head>
<body>
<h1> Inside list style position </h1>
<ul style = "list-style-position: outside;">
<li> First Item </li>
<li> Second Item </li>
<li> Third Item </li>
<li> Fourth Item </li>
</ul>
<h1> Outside list style position </h1>
<ul style = "list-style-position: inside;">
<li> Fifth Item </li>
<li> Sixth Item </li>
<li> Seventh Item </li>
<li> Eighth Item </li>
</ul>
</body>
</html>
<html>
<head>
<title> list-style-position example </title>
</head>
<body>
<h1> Inside list style position </h1>
<ul style = "list-style-position: outside;">
<li> First Item </li>
<li> Second Item </li>
<li> Third Item </li>
<li> Fourth Item </li>
</ul>
<h1> Outside list style position </h1>
<ul style = "list-style-position: inside;">
<li> Fifth Item </li>
<li> Sixth Item </li>
<li> Seventh Item </li>
<li> Eighth Item </li>
</ul>
</body>
</html>
The above code generates the below output.
list-style-image
If you want to use the image instead of using the bullets and numbers as a marker in the list, you can use. This property is very useful in situations where you want to configure lists according to the design of your website. The basic syntax of this property has been given below.
list-style-type: url ('url-of-image');
Let's now try to understand this property through an example.
<!DOCTYPE html>
<html>
<head>
<title> list-style-image example </title>
<style>
ul{
list-style-image: url('list-image.png');
}
</style>
</head>
<body>
<h1> CSS list Image marker example </h1>
<ul>
<li> First Item</li>
<li> Second Item</li>
<li> Third Item</li>
<li> Fourth Item</li>
</ul>
</body>
</html>
<html>
<head>
<title> list-style-image example </title>
<style>
ul{
list-style-image: url('list-image.png');
}
</style>
</head>
<body>
<h1> CSS list Image marker example </h1>
<ul>
<li> First Item</li>
<li> Second Item</li>
<li> Third Item</li>
<li> Fourth Item</li>
</ul>
</body>
</html>
The above example produces the below output.
list-style (shorthand) Property
If you want to define all the properties simultaneously, you can use the list-style (shorthand) property for it. First of all, you will have to give the value of the list-style-type property. After this, you can give the value of list-style-position property and thereafter you have to define the value of the list-style-image property. The general syntax of this property has given below.
list-style: <list-style-type> <list-style-position> <list-style-image>
An example of a list-style property has given below.
<!DOCTYPE html>
<html>
<head>
<title>list-style example</title>
<style>
ul{
list-style:disc inside url(‘list-image.jpg’);
}
</style>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
</body>
</html>
<html>
<head>
<title>list-style example</title>
<style>
ul{
list-style:disc inside url(‘list-image.jpg’);
}
</style>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
</body>
</html>
The above example produces the below output.
CSS on List Items
If you want you can also apply CSS on list items. For this, you will have to use selectors.
You can use CSS for the unordered list as below.
You can use CSS for the unordered list as below.
<style>
ul li{
ul li{
// CSS properties
}
</style>
</style>
You can use CSS for the ordered list as below.
<style>
ol li{
ol li{
// CSS properties
}
</style>
</style>
Howdy! This blog post couldn't be written much better!
ReplyDeleteGoing through this post reminds me of my previous roommate!
He continually kept talking about this. I most certainly will forward
this information to him. Fairly certain he's going to have a great read.
Thanks for sharing!