CSS 

Links
In this tutorial you will learn how to style different states of a link using CSS.

Styling Links with CSS

Links or hyperlinks are an essential part of a website. It allows visitors to navigate
through the site. Therefore styling the links properly is an important aspect of
building a user-friendly website.

See the tutorial on HTML links to learn more about links and how to create them.

A link has four different states — link, visited, active and hover. These four

states of a link can be styled differently through using the following anchor
pseudo-class selectors.

 a:link — define styles for normal or unvisited links.

 a:visited — define styles for links that the user has already visited.
 a:hover — define styles for a link when the user place the mouse pointer
over it.
 a:active — define styles for links when they are being clicked.

You can specify any CSS property you'd like e.g. color, font, background, border,

etc. to each of these selectors to customize the style of links, just like you do with
the normal text.

Example
Try this code »
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
 color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}

The order in which you are setting the style for different states of links is
important, because what defines last takes precedence over the style rules
defined earlier.

Note: In general, the order of the pseudo classes should be the following
— :link, :visited, :hover, :active, :focus in order for these to work properly.

Modifying Standard Link Styles

In all major web browsers such as Chrome, Firefox, Safari, etc. links on the web
pages have underlines and uses the browser's default link colors, if you do not set
the styles exclusively for them.

By default, text links will appear as follow in most of the browsers:

 An unvisited link as underlined blue text.

 A visited link as underlined purple text.
 An active link as underlined red text.

However, there is no change in the appearance of link in case of the hover state.
It remains blue, purple or red depending on which state (i.e. unvisited, visited or
active) they are in.

Now let's see how to customize the links by overriding its default styling.

Setting Custom Color of Links

Simply use the CSS color property to define the color of your choice for different
state of a link. But when choosing colors make sure that user can clearly
differentiate between normal text and links.
Let's try out the following example to understand how it basically works:

Example
Try this code »
a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}

Removing the Default Underline from Links

If you don't like the default underline on links, you can simply use the CSS text-
decoration property to get rid of it. Alternatively, you can apply other styling on
links like background color, bottom border, bold font, etc. to make it stand out
from the normal text a little better.

The following example shows how to remove or set underline for different states
of a link.

Example
Try this code »
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}

Making Text Links Look Like Buttons

You can also make your ordinary text links look like button using CSS. To do this
we need to utilize few more CSS properties such as background-
color, border, display, padding, etc. You will learn about these properties in
detail in upcoming chapters.

Let's check out the following example and see how it really works:

Example
Try this code »
a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}
CSS Lists
In this tutorial you will learn how to format HTML lists using CSS.

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.

See the tutorial on HTML lists to learn more about the lists and how to create
them.

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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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;
}

You will learn about the CSS display and padding properties in detail in

upcoming chapters.
CSS Tables
In this tutorial you will learn how to style HTML tables with CSS.

Styling Tables with CSS

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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
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
Try this code »
table {
border-collapse: separate;
empty-cells: hide;
}

Note: Placing a non-breaking space (&nbsp;) 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
Try this code »
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
Try this code »
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div>