div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

All CSS Dimension Properties

CSS Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
  The box model allows us to add a border around elements, and to define space between elements.

div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Assume we want to style a <div> element to have a total width of 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
**= 350px**

The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Outline

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.
CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline
• ridge - Defines a 3D ridged outline
• inset - Defines a 3D inset outline
• outset - Defines a 3D outset outline
• none - Defines no outline
• hidden - Defines a hidden outline

The following example shows the different outline-style values:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Note: None of the other outline properties will have any effect, unless the outline-style property is set!

Outline Color

The outline-color property is used to set the color of the outline. The color can be set by:

• name - specify a color name, like “red”
• RGB - specify a RGB value, like “rgb(255,0,0)”
• Hex - specify a hex value, like “#ff0000”
• invert - performs a color inversion (which ensures that the outline is visible, regardless of color background) The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}

p.ex2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}

p.ex3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}

The following example uses outline-color: invert, which performs a color inversion. This ensures that the outline is visible, regardless of color background:

p.ex1 {
    border: 1px solid yellow;
    outline-style: solid;
    outline-color: invert;
}

Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

• thin (typically 1px)
• medium (typically 3px)
• thick (typically 5px)
• A specific size (in px, pt, cm, em, etc) The following example shows some outlines with different widths:

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thin;
}

p.ex2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
}

p.ex3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thick;
}

p.ex4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: 4px;
}

Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

• outline-width
• outline-style (required)
• outline-color The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
  The following example shows some outlines specified with the shorthand outline property:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
The following example specifies an outline 15px outside the border edge:

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

The following example shows that the space between an element and its outline is transparent:

p {
    margin: 30px;
    background: yellow;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

All CSS Outline Properties

CSS Text

Text Color

The color property is used to set the color of the text. The color is specified by:

• a color name - like “red”
• a HEX value - like “#ff0000”
• an RGB value - like “rgb(255,0,0)” The default text color for a page is defined in the body selector.

body {
    color: blue;
}

h1 {
    color: green;
}

Note: For W3C compliant CSS: If you define the color property, you must also define the background-color.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

When the text-align property is set to “justify”, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

div {
    text-align: justify;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:

a {
    text-decoration: none;
}

The other text-decoration values are used to decorate text:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

p {
    text-indent: 50px;
}

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters:

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

Line Height

The line-height property is used to specify the space between lines:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Text Direction

The direction property is used to change the text direction of an element:

p {
    direction: rtl;
}

Word Spacing

The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words:

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Text Shadow

The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):

h1 {
    text-shadow: 3px 2px red;
}

Disable text wrapping inside an element

This example demonstrates how to disable text wrapping inside an element.

p {
    white-space: nowrap;
}

Vertical alignment of an image

This example demonstrates how to set the vertical align of an image in a text.

<head>
<style>
img.top {
    vertical-align: text-top;
}
img.bottom {
    vertical-align: text-bottom;
}
</style>
</head>

<body>
<p>An <img src="image.png" alt="Image" width="270" height="50"> image with a default alignment.</p><br>
<p>An <img class="top" src="image.png" alt="Image" width="270" height="50"> image with a text-top alignment.</p><br>
<p>An <img class="bottom" src="image.png" alt="Image" width="270" height="50"> image with a text-bottom alignment.</p>
</body>

All CSS Text Properties

CSS Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

CSS Font Families

In CSS, there are two types of font family names:

• generic family - a group of font families with a similar look (like “Serif” or “Monospace”)
• font family - a specific font family (like “Times New Roman” or “Arial”)

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Font Family

The font family of a text is set with the font-family property.
The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: “Times New Roman”.

More than one font family is specified in a comma-separated list:

p {
    font-family: "Times New Roman", Times, serif;
}

Commonly Used Web Safe Font Combinations:

p.serif {
    font-family: "Times New Roman", Times, serif;
}
p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}
p.monospace {
    font-family: "Courier New", Courier, monospace;
}

Learn how to use Google Fonts on your web page:

<head>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<style>
body {
    font-family: 'Sofia';
    font-size: 20px;
}
</style>
</head>

Font Style

The font-style property is mostly used to specify italic text.
This property has three values:

• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is “leaning” (oblique is very similar to italic, but less supported)

p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}

Font Size

The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size. Absolute size:

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
p {
    font-size: 14px;
}

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for theelement:

body {
    font-size: 100%;
}
h1 {
    font-size: 2.5em;
}
h2 {
    font-size: 1.875em;
}
p {
    font-size: 0.875em;
}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

Font Weight

The font-weight property specifies the weight of a font:

p.normal {
    font-weight: normal;
}
p.light {
    font-weight: lighter;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

Responsive Font Size

The text size can be set with a vw unit, which means the “viewport width”. That way the text size will follow the size of the browser window:

h1 {
    font-size: 10vw;
}

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

p.normal {
    font-variant: normal;
}
p.small {
    font-variant: small-caps;
}

Font - Shorthand Property

The font property is a shorthand property for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family The font-size and font-family values are required. If one of the other values is missing, their default value are used. Note: The line-height property sets the space between lines.

p.a The font size is set to 15 pixels, and the font family is Arial.
p.b The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.

p.a {
    font: 15px arial, sans-serif;
}
p.b {
    font: italic bold 12px/30px Georgia, serif;
}

All CSS Font Properties

CSS Icons

Font Awesome Icons

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Note: No downloading or installation is required!

Copied from Font Awesome Official site

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<i class="fas fa-stroopwafel"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == stroopwafel -->
<i class="fas fa-stroopwafel"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-stroopwafel"></span> <!-- using a <span> element to reference the icon -->

Example

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<p>Some Font Awesome icons:</p>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Copied From https://google.github.io/material-design-icons/

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

CSS Links

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

a {
    color: hotpink;
}

<a href="default.asp" target="_blank">This is a link</a>

In addition, links can be styled differently depending on what state they are in.
The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

<a href="default.asp" target="_blank">This is a link</a>

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<a href="default.asp" target="_blank">This is a link</a>

Background Color

The background-color property can be used to specify a background color for links:

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

<a href="default.asp" target="_blank">This is a link</a>

Advanced - Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

<a href="default.asp" target="_blank">This is a link</a>

Add different styles to hyperlinks This example demonstrates how to add other styles to hyperlinks.

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}

<a class="one" href="default.asp" target="_blank">This link changes color</a>
<a class="two" href="default.asp" target="_blank">This link changes font-size</a>
<a class="three" href="default.asp" target="_blank">This link changes background-color</a>
<a class="four" href="default.asp" target="_blank">This link changes font-family</a>
<a class="five" href="default.asp" target="_blank">This link changes text-decoration</a>

Change the cursor The cursor property specifies the type of cursor to display. This example demonstrates the different types of cursors (can be useful for links).

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists <ul> - the list items are marked with bullets
• ordered lists <ol> - the list items are marked with numbers or letters The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:

ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

ul {
    list-style-image: url('sqpurple.gif');
}

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.

ul.a {
    list-style-position: outside;
}
ul.b {
    list-style-position: inside;
}

Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

ul {
    list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:

ol {
    background: #ff9999;
    padding: 20px;
}
ul {
    background: #3399ff;
    padding: 20px;
}
ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}
ul li {
    background: #cce5ff;
    margin: 5px;
}

This example demonstrates how to create a list with a red left border.

ul {
    border-left: 5px solid red;
    background-color: #f1f1f1;
    list-style-type: none;
    padding: 10px 20px;
}

This example demonstrates how to create a bordered list without bullets.

ul {
    list-style-type: none;
    padding: 0;
    border: 1px solid #ddd;
}
ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
}
ul li:last-child {
    border-bottom: none
}

This example demonstrates all the different list-item markers in CSS.

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}

All CSS List Properties

CSS Tables

The look of an HTML table can be greatly improved with CSS:

<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>


<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

Table Borders

To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:

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

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

table {
    border-collapse: collapse;
}

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

If you only want a border around the table, only specify the border property for <table>:

table {
    border: 1px solid black;
}

Table Width and Height

Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

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

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:

th {
    text-align: left;
}

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:

td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding

To control the space between the border and the content in a table, use the padding property onandelements:

th, td {
    padding: 15px;
    text-align: left;
}

Horizontal Dividers

Add the border-bottom property toandfor horizontal dividers:

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

Hoverable Table

Use the :hover selector onto highlight table rows on mouse over:

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}

Table Color

The example below specifies the background color and text color ofelements:

th {
    background-color: #4CAF50;
    color: white;
}

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Add a container element (like

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>

<table id="customers">
... table content ...
</table>

<style>
table, td, th {
    border: 1px solid black;
}
caption {
    caption-side: top;
    text-align: left;
}
</style>

<table>
<caption>Table 1.1 Customers</caption>
... table content ...
</table>