CSS Lists, CSS Table Style Properties and CSS Box Model

0 603

CSS Lists CSS Table Style Properties and CSS Box Model tutorials

in this tutorial we will talk on CSS Lists CSS Table Style Properties and CSS Box Model tutorials

lists in CSS

CSS allows you to add different markers to order and unordered lists. This can be achieved through CSS list properties. With CSS list properties we can add circle, square, image as a marker.

Different type list markers

list-style-type property allows specifying list marker for list items.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS list style type</title>
</head>
<body>


<h1>list-style-type property</h1>

<ul style="list-style-type:disc"> 
<li>Sunday</li> 
</ul>

<ul style="list-style-type:circle">
<li>Monday</li>
</ul>

<ul style="list-style-type:square">
<li>Tuesday</li> 
</ul>

<ul style="list-style-type:none">
<li>Wednesday</li> 
</ul>

</body>
</html>

Image as a list marker

To add an image as a list marker for list list-style-image property used.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS list style image</title>
<style>
ul {
list-style-image: url('icon.png');
}
</style>
</head>
<body>

<ul>
<li>Mobile</li>
<li>laptop</li>
<li>PC</li>
<li>Tablet</li>
</ul> 
</body>
</html>

Shorthand list property

list-style property is used for shorthand in one declaration.

While using shorthand property keep order value in mind.

list-style-type  if a list-style-image is defined the value list-style-type property will be displayed if the image is not available for some reason.
list-style-position will specify that weather list item marker should display inside or outside the content flow.
list-style-image will specify the image as a list marker

CSS Table Style Properties

Table Style Property

CSS allows you to change the look of HTML table how you want. To achieve this border property used.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS syntax example</title>

<style>
p{
border:1px solid indigo;
}
</style> 

</head>
<body>

<p>This is example explains that how to use border property to apply style to border</p> 
</body>
</html>

Table Borders

Border property used to apply a border to HTML table through CSS.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS table border example</title>

<style> table, th, td{
border:1px solid indigo;
}
</style> 

</head>
<body>

<h1>how to apply a border to table</h1>
<table>
<tbody>
<tr>
<th>Relative Length</th>
<th>Description</th>
</tr>
<tr>
<td>em </td>
<td>em specify the font size (height) em unit is relative of the Value of font-size property</td>
</tr>
<tr>
<td>ex</td>
<td>ex specify x-height of a font.</td>
</tr>

</tbody>
</table> 
</body>
</html>

Collapse Borders

border-collapse property defines the table border are collapsed into a single border or separated.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS table Collapse Border</title>

<style>
table {
border-collapse: collapse;
}
table, th, td{
border:1px solid indigo;
}
</style> 

</head>
<body>

<h1>how to apply a Collapse border to table</h1>
<table>
<tbody>
<tr>
<th>Relative Length</th>
<th>Description</th>
</tr>
<tr>
<td>em </td>
<td>em specify the font size (height) em unit is relative of the Value of font-size property</td>
</tr>
<tr>
<td>ex</td>
<td>ex specify x-height of a font.</td>
</tr>

</tbody>
</table> 
</body>
</html>

Width and Height of a Table

width and height properties are used to set height and width of a table.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS table height width to Border</title>

<style>
table, th, td{
border:1px solid indigo;
}
</style> 

</head>
<body>

<h1>how to apply height and width border to table</h1>
<table width="300">
<tbody>
<tr>
<th>Relative Length</th>
<th>Description</th>
</tr>
<tr>
<td height="80">ex</td>
<td height="80">ex specify x-height of a font.</td>
</tr>

</tbody>
</table> 
</body>
</html>

Table Padding

padding property used on <td> and <th> elements to control spacing between and its content.

CSS Box Model

The CSS Box Model

In a HTML page, all elements can be seen as a boxes when we are talking about design and layout.A box model is a box wrap around HTML element.box model allows us to define a border around element and space between elements.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Box model</title>

<style> 
div{ 
background-color: lightgrey;
width: 400px;
padding: 25px;
border: 20px solid navy;
margin: 20px;
}
</style>

</head>
<body>

<h1>CSS Box Model</h1>

<div><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

</body>
</html>

Width and height of an element

You must be familiar with model box works to set height and width of a box.

Comments

comments

Leave A Reply

Your email address will not be published.