These are CSS shadow properties:

1. text-shadow
2. box-shadow

1).CSS text shadow

The text-shadow property is used to apply shadow to the text.

Using text-shadow property you can add horizontal or vertical shadow with different color and blur radius.

This table summarizes use and properties of text-shadow:

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;

p{
    text-shadow: 2px 2px;
    font-size: 20px;
}

Output:

This paragraph has shadow property.

ii).Text shadow with different color

Syntax:

text-shadow: offset-x offset-y color;

p{
    text-shadow: 2px 2px blue;
    font-size: 20px;
}

Output:

This paragraph has blue shadow.

iii).Text shadow with different color and blur-radius

Syntax:

text-shadow: offset-x offset-y blur-radius color;

p{
    text-shadow: 2px 2px 5px blue;
    font-size: 20px;
}

CSS

This paragraph has blue shadow with blur-radius 5px.

iv).Multiple shadow

Syntax:

text-shadow: shadow1,shadow2,shadow3...;
#Where shadow = offset-x offset-y blur-radius color

p{
    text-shadow: 2px 2px 5px blue, 4px 4px 5px red, 6px 6px 5px #006699;
    font-size: 20px;
}

Output:

This paragraph has blue shadow with blur-radius 5px.

2).CSS box shadow

The box-shadow property is used to create shadow for elements.

CSS have the same property values for box-shadow as in text-shadow.

div{
    box-shadow: 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Creating CSS box-shadow with blur effect.

div{
    box-shadow: 10px 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

CSS Position defines how a certain element should be positioned on a web page. The main importance of this article is to show how to control the position part and display of the content. Doing Positioning with CSS old version is quite complicated therefore a new standard CSS flexible Layout has newer versions. Coming to the positioning and layout model it is quite a difficult part as they have to cope with the browser implementation issues. This positioning property has five different methods namely static, relative, absolute, sticky, fixed.

Syntax Relative:

Position:relative;
Top:10px;
Right:25px;

By default relative positioned element can be moved around with the initial element or we can say it is done in a normal position. The box position is calibrated to the normal flow later it can be used as left, right, top, bottom property.

Syntax Absolute:

Position:absolute;
Top:12px;
Right:23px;

This act according to the parent element. It is positioned exactly at the specified location.

Syntax Static:

Position:static;
display:inline;
Display:inline-block
float:left;
clear:both;
overflow:hidden;

How does CSS Position Work?

This property helps to calculate the layout and content specified in the websites.

There are three sets of properties done in positioning:

• Property 1: Left, Right, Top, Bottom (This implies the distance of an element from the edge corner of the viewport).
• Property 2: The positioning concepts.
• Property 3: Z-Index.
• Property 4: Formatting style.

Given below are some of the CSS positions with their working:

1. Static

Static position elements are set by default and they have no impact on the properties like right, left, bottom, top. They don’t have any special direction it was made positioned with respect to the normal Page.

2. Relative

It is helpful while creating CSS layout and it finds quite difficult. An HTML element with this property works the same as static and they differed by setting the right, left values to the ancestor element.

3. Fixed

Fixed positions are exactly similar to absolute positioning, but they are violated from the normal flow of the text and made fixed in an exact point on the web page and all other elements of HTML behave as it doesn’t exist on the page. The key difference between absolute positioning and fixed positioning is a fixed position will retain their space on the ongoing page when there happened to have some page Scroll.

4. Absolute

In this position, an element is placed with respect to themselves and it is excluded from the normal flow of the document. In general, they are placed in the top-left of their ancestor or parent element.

5. Z-Index

There occurs a scenario where the elements in the web page get overlapped in the normal flow, to determine the exact positioning of those elements on the top or bottom Z- index is used. In layman terms, it sets the stacking order of an element or can be termed as a three-dimension viewport. The positive margin specifies an element should be pushed to the top and the negative margin implies to the bottom. And Z-index doesn’t make well with static positioning principles.

Examples to Implement CSS Position

Below are the different examples of CSS positions:

Examples #1: Using Static Position

This is the example of CSS static position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Static Positioning</title>
<style>
.box{
color: #fff;
background: #73AD21;
padding: 5px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px dotted;
font-family: Arial, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Static Positioned Box example</h2>
</div>
<p> HTML along with CSS makes websites beautiful </p> </div>
</body>
</html>

Output:

Examples #2: Using Relative Positioning

This is the example of the CSS relative position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Relative Positioning</title>
<style>
.box{
position: relative;
left: 50px;
color: #fff;
background: yellow;
padding: 15px;
}
.container{
padding: 45px;
margin: 45px;
border: 4px solid black;
font-family: italic, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Box</h2>
</div>
<p> Hello Folks.</p>
</div>
</body>
</html>

Below Output makes a border created in CSS and notes that an element can be moved in a layout.

Output:

Examples #3: Using Fixed Positioning

This is the example of the CSS fixed position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Fixed Positioning</title>
<style>
.box{
position: fixed;
top: 100px;
left: 150px;
color: #cce;
width: 50%;
background: #efefef;
padding: 20px;
}
.container{
padding:40px;
margin: 40px;
position: relative;
border: 4px solid black;
font-family: calibri, sans-serif;
}
.container p{
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned demo</h2>
<div><strong>Note:</strong> The position of this box is fixed relative to the document's viewport. It doesn't scroll with the page.</div>
</div>
<p> A new request has been posted according to the skills . And please decide to to apply for the course</p>
</div>
</body>
</html>

Output:

Examples #4: Using Absolute Positioning

This is the example of the CSS’s absolute position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Absolute</title>
<style>
.box-green {
position: absolute;
background: green;
width: 90px;
height: 95px;
left: 6px;
top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-green"></div>
<div class="box-blue"></div>
</div>
</body>
</html>

Below output displays an element at the beginning of its parent.

Output:

Examples #5: Demo Using all Three Positioning

This is the example of the CSS’s positions that is by using relative, static and absolute as follows.

Code: ppp.html

<!DOCTYPE HTML>
<html>
<head>
<title> CSS Positioning Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="EDUCBA">
<h1> <c>Position demo <c></h1>
<section>
<h2>relative type</h2>
<div>Static part</div>
<div class="relative">Relat type</div>
<div>Static box</div>
</section>
<section>
<h2>absolute</h2>
<div>Static test</div>
<div class="absolute">Absolute class</div>
<div>Static</div>
</section>
<section>
<h2>fixed Demo</h2>
<div>Static</div>
<div class="fixed">Fixed test</div>
<div>Static</div>
</section>
</body>
</html>

Code: new.css

body {
border: 2px solid black;
}
section {
border: 1px solid black;
margin: 1rem;
position: relative;
}
div {
background: linear-gradient(to bottom, blue, white);
border: 2px dashed black;
height: 26px;
margin: inherit;
width: 80px;
top: 81px;
left: 71px;
}
.relative {
background: linear-gradient (50deg, black, white);
position: relative;
}
.absolute {
background: red;
position: absolute;
}
.fixed {
background: yellow;
position: fixed;
}

Output:

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don’t take up space.

Syntax:

1. visibility: visible|hidden|collapse|initial|inherit;  

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

Are programmers terrified or excited about being a “Jack Of All Trades”? | Specialist or generalist?

hidden: It specifies that the element is invisible (but still takes up space).

collapse: It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as “hidden”

initial: It is used to set this property to its default value.

inherit: It is used to inherit this property from its parent element.

CSS Visibility Example

<!DOCTYPE html>  

<html>  

<head>  

<style>  

h1.visible {  

    visibility: visible ; 

}  

h1.hidden {  

    visibility: hidden  ;

}  

</style>  

</head>  

<body>  

<h1 class=”visible”>I am visible</h1>  

<h1 class=”hidden”>I am invisible</h1>  

<p><strong>Note:</strong> An invisible element also take up the space on the page.   

By using display property you can create invisible elements that don’t  

 take space.</p>  

</body>  

</html>  

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

Changing the Default Display Value

Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.

Note: The CSS display property is one of the most powerful and useful properties in all the CSS. It can be very useful for creating web pages that looks in a different way, but still follow the web standards.

The following section describes you the most commonly used CSS display values.

Display Block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:

Example

span {
    display: block;
}
a {
    display: block;
}

Note: Changing the display type of an element only changes the display behavior of an element, NOT the type of element it is. For example, an inline element set to display: block; is not allowed to have a block element nested inside of it.

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

Example

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Inline-Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:

Example

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None

The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.

Example

h1 {
    display: none;
}
p {
    display: none;
}

The CSS outline properties allow you to define an outline area around an element’s box.

An outline is a line that is drawn just outside the border edge of the elements. Outlines are generally used to indicate focus or active states of the elements such as buttons, links, form fields, etc.

The following section describes how to set the style, color, and width of the outline.

Outlines Vs Borders

An outline looks very similar to the border, but it differs from border in the following ways:

• Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements on the page.
• Unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
• Outlines do not have any impact on surrounding elements apart from overlapping.
• Unlike borders, outlines do not change the size or position of the element.
• Outlines may be non-rectangular, but you cannot create circular outlines.

Note: If you put an outline on an element, it will take up the same amount of space on the web pages as if you didn’t have an outline on that element. Because it overlap margins (transparent area outside of the border) and surrounding elements.

Understanding the Different Outline Styles

The outline-style property sets the style of an element’s outline such as: solid, dotted, etc.

The outline-style property can have one of the following values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge. Now, let’s take a look at the following illustration, it gives you a sense of the differences between the outline style types.

The value none displays no outline. The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the outline-color value. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the outline color.

Let’s try out the following example and see how it basically works:

Example

h1 {
    outline-style: dotted;
}
p {
    outline-style: ridge;
}

Note: You must specify a outline style in order to make the outline appear around an element, because the default outline style is none. Whereas, the default outline width or thickness is medium, and the default outline color is the same as the text color.

Setting the Outline Width

The outline-width property specifies the width of the outline to be added on an element.

Let’s try out the following example to understand how it actually works:

Example

p {
    outline-style: dashed;
    outline-width: 10px;
}

Tip: The outline width can be specified using any length value, such as px, em, rem, and so on. It can also be specified using one of the three keywords: thin, medium, and thick. Percentage or negative values are not allowed — just like the border-width property.

Specifying the Outline Color

The outline-color property sets the color of the outline.

This property accepts the same values as those used for the color property.

The following style rules adds a solid outline of blue color around the paragraphs.

Example

p {
    outline-style: solid;
    outline-color: #0000ff;
}

Note: The CSS outline-width or outline-color property does not work if it is used alone. Use the outline-style property to set the style of the outline first.

The Outline Shorthand Property

The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.

Let’s take a look at the following example to understand how it works:

Example

p {
    outline: 5px solid 	#ff00ff;
}

If the value for an individual outline property is omitted or not specified while setting the outline shorthand property, the default value for that property will be used instead, if any.

For instance, if the value for the outline-color property is missing or not specified when setting the outlines, the element’s color property will be used as the value for the outline color.

In the following example, the outline will be a solid green line of 5px width:

Example

p {
    color: green;
    outline: 5px solid;
}

But, in the case of outline-style, omitting the value will cause no outline to show at all, because the default value for this property is none. In the example below, there will be no outline:

Example

p {
    outline: 5px #00ff00;
}

Removing Outline Around Active Links

The outline property is widely used to remove the outline around active links.

However, it is recommended to apply some alternative style to indicate that the link has focus.

Let’s try out the following example and see how it basically works:

Example

a, a:active, a:focus {
    outline: none;
}

The CSS margin properties allow you to set the spacing around the border of an element’s box (or the edge of the element’s box, if it has no defined border).

An element’s margin is not affected by its background-color, it is always transparent. However, if the parent element has the background color it will be visible through its margin area.

Setting Margins for Individual Sides

You can specify the margins for the individual sides of an element such as top, right, bottom, and left sides using the CSS margin-top, margin-right, margin-bottom, and the margin-left properties, respectively. Let’s try out the following example to understand how it works:

Example

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

The margin properties can be specified using the following values:

• length – specifies a margin in px, em, rem, pt, cm, etc.
• % – specifies a margin in percentage (%) of the width of the containing element.
• auto – the browser calculates a suitable margin to use.
• inherit – specifies that the margin should be inherited from the parent element.

You can also specify negative margins on an element, e.g., margin: -10px;, margin: -5%;, etc.

The Margin Shorthand Property

The margin property is a shorthand property to avoid setting margin of each side separately, i.e., margin-top, margin-right, margin-bottom and margin-left.

Let’s take a look at the following example to understand how it basically works:

Example

h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}

This shorthand notation can take one, two, three, or four whitespace separated values.

• If one value is specified, it is applied to all four sides.
• If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element’s box.
• If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
• If four values are specified, they are applied to the top, right, bottom and the left side of the element’s box respectively in the specified order.

It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.

Horizontal Centering with Auto Margins

The auto value for the margin property tells the web browser to automatically calculate the margin. This is commonly used to center an element horizontally within a larger container.

Let’s try out the following example to understand how it works:

Example

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

The above style rules lets the <div> element take up 300 pixels of all the horizontal space available, and the remaining space will be equally divided between left and right margins.

The CSS border properties allow you to define the border area of an element’s box.

Borders appear directly between the margin and padding of an element. The border can either be a predefined style like, solid line, dotted line, double line, etc. or an image.

The following section describes how to set the style, color, and width of the border.

Understanding the Different Border Styles

The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge. Now, let’s take a look at the following illustration, it gives you a sense of the differences between the border style types.

The values none and hidden displays no border, however, there is a slight difference between these two values. In the case of table cell and border collapsing, the none value has the lowest priority, whereas the hidden value has the highest priority, if any other conflicting border is set.

The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the border-color value. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border color. Let’s check out an example:

Example

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Note: You must specify a border style in order to make the border appear around an element, because the default border style is none. Whereas, the default border width or thickness is medium, and the default border color is the same as the text color.

Setting the Border Width

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

Let’s try out the following example to understand how it works:

Example

p {
    border-style: dashed;
    border-width: 10px;
}

Tip: The border width can be specified using any length value, such as px, em, rem, and so on. In addition to length units, the border width may also be specified using one of three keywords: thin, medium, and thick. Percentage values are not allowed.

Specifying the Border Color

The border-color property specifies the color of the border area. This is also a shorthand property for setting the color of all the four sides of an element’s border.

The following style rules adds a solid border of red color around the paragraphs.

Example

p {
    border-style: solid;
    border-color: #ff0000;
}

Note: The CSS border-width or border-color property does not work if it is used alone. Use the border-style property to set the style of the border first.

The Border Shorthand Property

The border CSS property is a shorthand property for setting one or more of the individual border properties border-width, border-style and border-color in a single rule.

Let’s take a look at the following example to understand how it works:

Example

p {
    border: 5px solid #00ff00;
}

If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

For instance, if the value for the border-color property is missing or not specified when setting the border, the element’s color property will be used as the value for the border color.

In the example below, the border will be a solid red line of 5 pixels width:

Example

p {
    color: red;
    border: 5px solid;
}

But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for this property is none. In the following example, there will be no border:

Example

p {
    border: 5px #00ff00;
}

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determines how much space an element can take on a web page.

Padding is the transparent space between the element’s content and its border (or edge of the box, if it has no border), whereas margin is the transparent space around the border.

Also, if an element has the background color it will be visible through its padding area. The margin area is always remain transparent, it is not affected by the element’s background color, however, it causes the background color of the parent element to be seen through it.

Width and Height of the Elements

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of that element. The actual width and height of the element’s box depends on the several factors.

The actual space that an element’s box might take on a web page is calculated like this:

You will learn about each of these CSS properties in detail in upcoming chapters.

Now let’s try out the following example to understand how the box model actually works:

Example

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* set padding for all four sides */
    border: 10px solid black; /* set border for all four sides */
    margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}

Note: In CSS box model; the content area of an element’s box is the area where its content, e.g., text, image, video, etc. appears. It may also contain descendant elements boxes.

Tables are typically used to display tabular data, such as financial reports.

But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables.

CSS provides several properties that allow you to control the layout and presentation of the table elements. In the following section you will see how to use CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

Example

table, th, td {
    border: 1px solid black;
}

By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders.

Let’s take a look at the following illustration to understand how a border is applied to a table.

Collapsing Table Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.

In the separate border model, which is the default, each table cell has its own distinct borders, whereas in the collapsed border model, adjacent table cells share a common border. You can set the border model for an HTML table by using the CSS border-collapse property.

The following style rules will collapse the table cell borders and apply one pixel black border.

Example

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Note: You can also remove the space between the table cell borders through setting the value of CSS border-spacing property to 0. However, it only removes the space but do not merge the borders like when you set the border-collapse to collapse.

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells.

To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property. Let’s try out the following example and see how it works:

Example

th, td {
    padding: 15px;
}

You can also adjust the spacing between the borders of the cells using the CSS border-spacing property, if the borders of your table are separated (which is default).

The following style rules apply the spacing of 10 pixels between all borders within a table:

Example

table {
    border-spacing: 10px;
}

Setting Table Width and Height

By default, a table will render just wide and tall enough to contain all of its contents.

However, you can also set the width and height of the table as well as its cells explicitly using the width and height CSS property. The style rules in the following example will sets the width of the table to 100%, and the height of the table header cells to 40px.

Example

table {
    width: 100%;
}
th {
    height: 40px;
}

Controlling the Table Layout

A table expands and contracts to accommodate the data contained inside it. This is the default behavior. As data fills inside the table, it continues to expand as long as there is space. Sometimes, however, it is necessary to set a fixed width for the table in order to manage the layout.

You can do this with the help of CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows, and columns. This property takes one of two values:

• auto — Uses an automatic table layout algorithm. With this algorithm, the widths of the table and its cells are adjusted to fit the content. This is the default value.
• fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing. It is normally faster than auto.

The style rules in the following example specify that the HTML table is laid out using the fixed layout algorithm and has a fixed width of 300 pixels. Let’s try it out and see how it works:

Example

table {
    width: 300px;
    table-layout: fixed;
}

Tip: You can optimize the table rendering performance by specifying the value fixed for the table-layout property. Fixed value of this property causes the table to be rendered one row at a time, providing users with information at a faster pace.

Note: Without fixed value of the table-layout property on large tables, users won’t see any part of the table until the browser has rendered the whole table.

Aligning the Text Inside Table Cells

You can align text content inside the table cells either horizontally or vertically.

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you can use the text-align property in the same way as you use with other elements. You align text to either left, right, center or justify.

The following style rules will left-align the text inside the <th> elements.

Example

th {
    text-align: left;
}

Note: Text inside the <td> elements are left-aligned by default, whereas the text inside the <th> elements are center-aligned and rendered in bold font by default.

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the <th> and <td> elements to top, bottom, or middle using the CSS vertical-align property. The default vertical alignment is middle.

The following style rules will vertically bottom-align the text inside the <th> elements.

Example

th {
    height: 40px;
    vertical-align: bottom;
}

Controlling the Position of Table Caption

You can set the vertical position of a table caption using the CSS caption-side property.

The caption can be placed either at the top or bottom of the table. The default position is top.

Example

caption {
    caption-side: bottom;
}

Tip: To change the horizontal alignment of the table’s caption text (e.g. left or right), you can simply use the CSS text-align property, like you do with normal text.

Handling Empty Cells

In tables that uses separate border model, which is default, you can also control the rendering of the cells that have no visible content using the empty-cells CSS property.

This property accepts a value of either show or hide. The default value is show, which renders empty cells like normal cells, but if the value hide is specified no borders or backgrounds are drawn around the empty cells. Let’s try out an example to understand how it really works:

Example

table {
    border-collapse: separate;
    empty-cells: hide;
}

Note: Placing a non-breaking space ( ) inside a table cell make it non-empty. Therefore, even if that cell looks empty the hide value will not hide the borders and backgrounds.

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the readability of tables that has large amount of data. This is commonly known as zebra-striping a table.

You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.

The following style rules will highlight every odd rows within the table body.

Example

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

A zebra-striped table typically looks something like the following picture.

Note: The :nth-child() pseudo-class select elements based on their position in a group of siblings. It can take a number, a keyword even or odd, or an expression of the form xn+y where x and y are integers (e.g. 1n, 2n, 2n+1, …) as an argument.

Making a Table Responsive

Tables are not responsive in nature. However, to support mobile devices you can add responsiveness to your tables by enabling horizontal scrolling on small screens. To do this simply wrap your table with a <div> element and apply the style overflow-x: auto; as shown below:

Example

<div style="overflow-x: auto;"> 
    <table>
        ... table content ...
    </table>
</div>

List can be ordered or unordered. Ordered list shows list contents using numbers while unordered list shows list content using bullets.

In CSS we have following list properties to style list:

• CSS list-style-type This allows the user to change the shape of bullets or markers.
• CSS list-style-position Control content to be inside or outside of the bullet.
• CSS list-style-image This property replaces marker/bullet with specified image.
• CSS list-style This property let us use multiple list property at once.

Types of HTML Lists

There are three different types of list in HTML:

• Unordered lists — A list of items, where every list items are marked with bullets.
• Ordered lists — A list of items, where each list items are marked with numbers.
• Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:

• Control the shape or appearance of the marker.
• Specify an image for the marker rather than a bullet point or number.
• Set the distance between a marker and the text in the list.
• Specify whether the marker would appear inside or outside of the box containing the list items.

In the following section we will discuss the properties that can be used to style HTML lists.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on), whereas in an unordered list, items are marked with round bullets (•).

But, you can change this default list marker type to any other type such as roman numerals, latin letters, circle, square, and so on using the list-style-type property.

Let’s try out the following example to understand how this property actually works:

Example

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

However, you can also position these markers or bullet points inside of the list item’s display boxes using the list-style-position property along with the value inside. In this case the lines will wrap under the marker instead of being indented. Here’s an example:

Example

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

Let’s take a look at the following illustration to understand how markers or bullets are positioned.

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.

The style rule in the following example assigns a transparent PNG image “arrow.png” as the list marker for all the items in the unordered list. Let’s try it out and see how it works:

Example

ul li {
    list-style-image: url("images/bullet.png");
}

Sometimes, the list-style-image property may not produce the expected output. Alternatively, you can use the following solution for better control over the positioning of image markers.

As a work-around, you can also set image bullets via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.

The following example displays the image markers equally in all browsers:

Example

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-type, list-style-image, and list-style-position of a list in one place.

The following style rule sets all the list properties in a single declaration.

Example

ul {
    list-style: square inside url("images/bullet.png");
}

Note: When using the list-style shorthand property, the orders of the values are: list-style-type | list-style-position | list-style-image. It does not matter if one of the values above is missing as long as the rest are in the specified order.

Creating Navigation Menus Using Lists

HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property. Let’s try out an example to see how it really works:

Example

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}