CSS Basics Summary

• 2.
• Top
• Prev
• Next
• Bottom

CSS Selectors

1. CSS element Selector

The element selector selects HTML elements based on the element name.

2. The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

3. The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

You can also specify that only specific HTML elements should be affected by a class.

p.center {
  text-align:center;
  color:red;
}

HTML elements can also refer to more than one class. <p class="center large">This paragraph refers to two classes.</p>

📝 Note: A class name cannot start with a number!

4. The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

5. The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

from this:

h1 {
  text-align:center;
  color:red;
}

h2 {
  text-align:center;
  color:red;
}

p {
  text-align:center;
  color:red;
}

h1, h2, p {
  text-align:center;
  color:red;
}

In group selectors, separate each selector with a comma.

• 4.
• Top
• Prev
• Next
• Bottom

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */

Comments can added anywhere in the code.

Comments can span multiple lines.

• 6.
• Top
• Prev
• Next
• Bottom

CSS Backgrounds

1. background-color specifies the background color of an element

2. background-image specifies an image to use as the background of an element -by default, the image is repeated so it covers the entire element.

3. background-repeat By default, the background-image property repeats an image both horizontally and vertically
   background-repeat:no-repeat Shows background image only once
   background-position property is used to specify the position of the background image.
   

   body {
     background-image:url("img_tree.png");
     background-repeat:no-repeat;
     background-position:right top;
   }
   

4. background-attachment specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
   

   body {
     background-image:url("img_tree.png");
     background-repeat:no-repeat;
     background-position:right top;
     background-attachment:fixed;
   }
   

5. background is shorthand to specify all the background properties in one single property:
   from:
   

   body {
     background-color:#ffffff;
     background-image:url("img_tree.png");
     background-repeat:no-repeat;
     background-position:right top;
   }
   

   to this:
   

   body {
     background:#ffffff url("img_tree.png") no-repeat right top;
   }
   

When using the background property the order of the property values is:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Opacity/Transparency

The opacity property specifies the opacity/transparency of an element.

• It can take a value from 0.0 - 1.0.
• The lower value, the more transparent.

div {
  background-color:green;
  opacity:0.3;
}

Transparency using RGBA

If you do not want to apply opacity to child elements, use RGBA color values. ie. set opacity for background color- not the text.

• 8.
• Top
• Prev
• Next
• Bottom

CSS Margins

Margin properties are used to create space around elements, outside of any defined borders.

Can have full control over the margins.

There are properties for setting the margin for each side of an element:

• top
• right
• bottom
• left

1. Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

📎 Tip: Negative values are allowed.

p {
  /*margin-top:-1.0em; to get 0 top try:  margin-top:-1.0em;*/
  margin-top:100px;
  margin-bottom:100px;
  margin-right:150px;
  margin-left:80px;
}

2. Shorthand: margin property

margin property is shorthand for all the margin properties.

margin property is shorthand for the following individual margin properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

If the margin property has four values:

• margin:25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

If the margin property has three values:

• margin:25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

If the margin property has two values:

• margin:25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px

If the margin property has one value:

• margin:25px;
• all four margins are 25px

3. The auto Value

Setting margin property to auto will horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

div {
  width:300px;
  margin:auto;
  border:1px solid red;
}

4. The inherit Value

div {
  border:1px solid red;
  margin-left:100px;
}

p.ex1 {
  margin-left:inherit;
}

5. CSS Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

• 10.
• Top
• Prev
• Next
• Bottom

CSS Height and Width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

1. height and width Values

2. Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in:

• length values ▶ like px, cm, etc.
• in percent (%) of the containing block
• set to none ▶ this is default - means that there is no maximum width

A commom problem with a <div> occurs when the browser window is smaller than the width of the element (ie. 500px). The browser will add a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

• 12.
• Top
• Prev
• Next
• Bottom

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element stand out.

🚴 w3schools outline

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.

1. CSS Outline Style

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

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

p.dotted{
  outline-style:dotted;
}

2. CSS 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

2. CSS Outline Color

The outline-color property is used to set the color of the outline.

outline-color:red;
outline-color:#ff0000; /* red */
outline-color:rgb(255, 0, 0); /* red */
outline-color:hsl(0, 100%, 50%); /* red */
outline-color:invert;

3. CSS Outline Property Shorthand

outline property is shorthand 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.

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

4. CSS 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.

Property	Description
outline	shorthand to set outline-width, outline-style, and outline-color in one declaration
outline-color	sets color of an outline
outline-offset	specifies the space between an outline and the edge or border of an element
outline-style	sets style of an outline
outline-width	sets width of an outline

• 14.
• Top
• Prev
• Next
• Bottom

CSS Fonts

The CSS font properties define the following for text:

• font family
• boldness
• size

1. CSS Font Families

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

• generic family ▶ a group of font families with a similar look ie. Serif or Monospace
• font family ▶ a specific font family ie. Times New Roman or Arial

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

2. Font Family

The font family of 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".

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

🚴 w3schools Web Safe Font Combinations

3. Font Style

font-style property has three values:

• normal ▶ text is shown normally
• italic ▶ text is shown in italics
• oblique ▶ 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;
}

4. Font Weight

p.normal {
  font-weight:normal;
}

p.thick {
  font-weight:bold;
}

5. Font Variant

font-variant property specifies whether or not 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;
}

6. Font Size

font-size property sets text size

Being able to manage text size is important in web design. However, do 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:

• absolute
• or
• relative

Absolute size:

• ▶sets text to a specified size
• ▶does not allow a user to change text size in all browsers → bad for accessibility reasons
• ▶is useful when the physical size of the output is known

Relative size:

• ▶ sets size relative to surrounding elements
• ▶ allows an user to change text size in browsers

📝 Note: If font size is not specified, the default size for normal text, like paragraphs, is 16px (16px=1em).

7. Set Font Size With Pixels

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

h1 {
  font-size:40px;
}

8. Set Font Size With Em

Many developers use em instead of pixels to allow users to resize the text in the browser menu.

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 */
}

9. Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the <body> element:

body {
  font-size:100%;
}

h1 {
  font-size:2.5em;
}

10. Responsive Font Size

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 style="font-size:10vw">Hello World</h1>

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

11. Shorthand: Font Property

The font property is shorthand for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

p.a {
  font:20px Arial, sans-serif;
}

p.b {
  font:italic small-caps bold 12px/30px Georgia, serif;
}

📝 Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.

• 16.
• Top
• Prev
• Next
• Bottom

CSS Links

Links can be styled in different ways.

1. Styling Links

Links can be styled with any CSS property.

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 user has visited
• a:hover ▶ a link when user mouses over it
• a:active ▶ a link when it is clicked

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

2. Text Decoration

a:link {
  text-decoration:none;
}

3. Background Color

a:link {
  background-color:yellow;
}

4. Link Buttons

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

• 18.
• Top
• Prev
• Next
• Bottom

CSS Tables

more details/examples at:

• 🚴 w3schools CSS Tables

1. Table Borders

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

Notice: When the above code is used the table will have double borders. This is because the table and the <th> and <td> elements have separate borders.

2. Collapse Table Borders

table {
  border-collapse:collapse;
}

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

table {
  border:1px solid black;
}

3. Table Width and Height

table {
  width:100%;
}

th {
  height:50px;
}

4. Horizontal Alignment

The text-align property sets the horizontal alignment:

• left
• right
• center

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

th {
  text-align:left;
}

5. Vertical Alignment

The vertical-align property sets the vertical alignment:

• top
• bottom
• middle

By default, the vertical alignment of the content in a table is middle - for both <th> and <td> elements.

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

6. Table Padding

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

7. Horizontal Dividers

th, td {
  border-bottom:1px solid #ddd;
}

8. Hoverable Table

tr:hover {
  background-color:#f5f5f5;
}

9. Striped Tables

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

10. Table Color

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

11. Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

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

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

</div>

📝 Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used - even though overflow:scroll is set).

• 20.
• Top
• Prev
• Next
• Bottom

CSS Layout: max-width

Using width, max-width and margin:auto;

As mentioned before - a block-level element always takes up the full width available - stretches out to the left and right as far as it can.

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, the margins can be set to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins.

📝 Note: A problem can happen with a <div> when the browser window is smaller than the width of the element. The browser will add a horizontal scrollbar to the page.

Using max-width in such a situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices:

div.ex1 {
  width:500px;
  margin:auto;
  border:3px solid #73AD21;
}

div.ex2 {
  max-width:500px;
  margin:auto;
  border:3px solid #73AD21;
}

• 22.
• Top
• Prev
• Next
• Bottom

CSS Layout - Overflow

overflow property controls what happens to content that is too big to fit into an area.

overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

overflow property has the following values:

• visible ▶ default - overflow not clipped - content renders outside element's box
• hidden ▶ overflow is clipped, and the rest of the content will be invisible
• scroll ▶ overflow is clipped, and a scrollbar is added to see rest of the content
• auto ▶ similar to scroll, but it adds scrollbars only when necessary

📝 Note: The overflow property only works for block elements with a specified height.

📝 Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used - even though overflow:scroll is set.

1. overflow:visible;

div {
  width:200px;
  height:50px;
  background-color:#eee;
  overflow:visible;
}

2. overflow:hidden;

div {
  overflow:hidden;
}

3. overflow:scroll;

div {
  overflow:scroll;
}

4. overflow:auto;

div {
  overflow:auto;
}

5. overflow-x and overflow-y

The overflow-x and overflow-y properties specify whether to change the overflow of content just horizontally or vertically or both:

• overflow-x ▶ specifies what to do with left/right edges of the content
• overflow-y ▶ specifies what to do with the top/bottom edges of the content

div {
  overflow-x:hidden; /* Hide horizontal scrollbar */
  overflow-y:scroll; /* Add vertical scrollbar */
}

• 24.
• Top
• Prev
• Next
• Bottom

CSS Layout - display:inline-block

1. The display:inline-block Value

Compared to display:inline, the major difference is that display:inline-block allows setting width and height on an element:

• display:inline-block respects top and bottom margins/paddings
• display:inline doesn't respect top and bottom margins/paddings

Major difference between display:inline-block and display:block:

• inline-block doesn't add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of:

• display:inline
• display:inline-block
• display:block

span.a {
  display:inline; /* the default for span */
  width:100px;
  height:100px;
  padding:5px;
  border:1px solid blue;
  background-color:yellow;
}

span.b {
  display:inline-block;
  width:100px;
  height:100px;
  padding:5px;
  border:1px solid blue;
  background-color:yellow;
}

span.c {
  display:block;
  width:100px;
  height:100px;
  padding:5px;
  border:1px solid blue;
  background-color:yellow;
}

2. Using inline-block to Create Navigation Links

One common use for display:inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

.nav {
  background-color:yellow;
  list-style-type:none;
  text-align:center; 
  padding:0;
  margin:0;
}

.nav li {
  display:inline-block;
  font-size:20px;
  padding:20px;
}

• 26.
• Top
• Prev
• Next
• Bottom

CSS Combinators

A combinator is something that explains the relationship between selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, a combinator can be included.

There are four different combinators in CSS:

• descendant selector space
• child selector >
• adjacent sibling selector +
• general sibling selector ~

1. Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

div p {
  background-color:yellow;
}

2. Child Selector

The child selector selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a <div> element:

div > p {
  background-color:yellow;
}

3. Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and adjacent means immediately following.

The following example selects all <p> elements that are placed immediately after <div> elements:

div + p {
  background-color:yellow;
}

4. General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

div ~ p {
  background-color:yellow;
}

• 28.
• Top
• Prev
• Next
• Bottom

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• ▶ style the first letter, or line, of an element
• ▶ insert content before, or after, the content of an element

1. Syntax

selector::pseudo-element {
  property:value;
}

2. The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all <p> elements:

p::first-line {
  color:#ff0000;
  font-variant:small-caps;
}

📝 Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

3. The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:

p::first-letter {
  color:#ff0000;
  font-size:xx-large;
}

📝 Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo-element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align only if float is none
• text-transform
• line-height
• float
• clear

4. Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

/*will display the first letter of paragraphs with class="intro", in red and in a larger size.*/
p.intro::first-letter {
  color:#ff0000;
  font-size:200%;
}

5. Multiple Pseudo-elements

Several pseudo-elements can also be combined.

/*
-the first letter of a paragraph will be red in an xx-large font size
-the rest of the first line will be blue, and in small-caps
-the rest of the paragraph will be the default font size and color
*/
p::first-letter {
  color:#ff0000;
  font-size:xx-large;
}

p::first-line {
  color:#0000ff;
  font-variant:small-caps;
}

6. CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

/*inserts an image before the content of each <h1> element*/
h1::before {
  content:url(smiley.gif);
}

7. CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

/*inserts an image after the content of each <h1> element*/
h1::after {
  content:url(smiley.gif);
}

8. CSS - The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection:

• color
• background
• cursor
• outline

/*makes the selected text red on a yellow background*/
::selection {
  color:red;
  background:yellow;
}

• 30.
• Top
• Prev
• Next
• Bottom

CSS Navigation Bar

🚴 w3schools CSS Navigation Bar Tutorial

Navigation Bars

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

1. Navigation Bar = List of Links

A navigation bar uses standard HTML as a base.

The examples show how to build navigation bars from a standard HTML list.

2. CSS Vertical Navigation Bar

🚴 w3schools CSS Vertical Navigation Bar Tutorial

<style>
/* Step 1:
remove the bullets and the margins and padding from the list
makes a vertical nav bar*/
ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

/* Step 2:
style the <a> elements inside the list
*/
li a {
  display:block;
  width:60px;
}
/*
display:block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
width:60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width
*/
</style>

<!--sart with <ul> and <li> elements-->
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

2.1 Active/Current Navigation Link

Add an active class to the current link to let the user know which page he/she is on:

.active {
  background-color:#4CAF50;
  color:white;
}

2.2 Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.

Add the border property to <ul> to add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:

ul {
  border:1px solid #555;
}

li {
  text-align:center;
  border-bottom:1px solid #555;
}

li:last-child {
  border-bottom:none;
}

2.3 Full-height Fixed Vertical Navbar

Create a full-height, sticky side navigation:

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  width:25%;
  background-color:#f1f1f1;
  height:100%; /* Full height */
  position:fixed; /* Make it stick, even on scroll */
  overflow:auto; /* Enable scrolling if the sidenav has too much content */
}

3. CSS Horizontal Navigation Bar

🚴 w3schools CSS Horizontal Navigation Bar Tutorial

There are two ways to create a horizontal navigation bar:

• inline
• or
• floating

3.1 Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the code from CSS Vertical Navigation Bar example:

/*
display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
*/
li {
  display:inline;
}

3.2 Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:

li {
  float:left;
}

a {
  display:block;
  padding:8px;
  background-color:#dddddd;
}

📝 Note: If a !DOCTYPE is not specified, floating items can produce unexpected results.

Example explained:

• float:left; ▶ use float to get block elements to slide next to each other

• display:block; ▶ displaying the links as block elements makes the whole link area clickable - not just the text, and it allows specifying padding - and height, width, margins, etc. if wanted

• padding:8px; ▶ since block elements take up the full width available, they cannot float next to each other - therefore, specify some padding to make them look good

• background-color:#d3d3d3; ▶ add a lightgrey background-color to each a element

📎 Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color.

4. Horizontal Navigation Bar Examples

/*
1. basic horizontal navigation bar
2. with a dark background color
3. change the background color of the links when the user moves the mouse over them
*/
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}

li {
  float:left;
}

li a {
  display:block;
  color:white;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color:#111;
}

4.1 Active/Current Navigation Link

/*
Add an "active" class to the current link to let the user know which page is showing:
*/
.active {
  background-color:#4CAF50;
}

4.2 Right-Align Links

<!--
Right-align links by floating the list items to the right (float:right;):
-->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

4.3 Border Dividers

/*
Add the border-right property to <li> to create link dividers
Add a gray right border to all list items, except the last item (last-child)
*/
li {
  border-right:1px solid #bbb;
}

li:last-child {
  border-right:none;
}

4.4 Fixed Navigation Bar

/*Fixed Top*/
ul {
  position:fixed;
  top:0;
  width:100%;
}

/*Fixed Bottom*/
ul {
  position:fixed;
  bottom:0;
  width:100%;
}

📝 Note: Fixed position might not work properly on mobile devices.

4.5 Gray Horizontal Navbar

/*gray horizontal navigation bar with a thin gray border*/
ul {
  border:1px solid #e7e7e7;
  background-color:#f3f3f3;
}

li a {
  color:#666;
}

4.6 Sticky Navbar

Add position:sticky; to <ul> to create a sticky navbar.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it sticks in place like position:fixed.

ul {
  position:-webkit-sticky; /* Safari */
  position:sticky;
  top: 0;
}

📝 Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix -see example above. Must also specify at least one of:

• top
• right
• bottom
• left

5. More Examples

🚴 w3schools CSS Horizontal Navigation Bar Tutorial examples near bottom of page above ads

• Responsive Topnav
• Responsive Sidenav
• Dropdown Navbar

• 32.
• Top
• Prev
• Next
• Bottom

CSS Image Gallery

🚴 w3schools CSS Image Gallery Tutorial

CSS can be used to create an image gallery.

Responsive Image Gallery

• 34.
• Top
• Prev
• Next
• Bottom

CSS Attribute Selectors

1. Style HTML Elements With Specific Attributes

It is possible to style HTML elements with attributes.

2. CSS [attribute] Selector

The [attribute] selector is used to select elements with a specific attribute.

/* select all <a> elements with a target attribute */
a[target] {
  background-color:yellow;
}

3. CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specific attribute and value.

/* select all <a> elements with a target="_blank" attribute */
a[target="_blank"] {
  background-color:yellow;
}

4. CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specific word.

/*
select all elements with a title attribute that contains a space-separated list of words, one of which is "flower"

will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers"
*/
[title~="flower"] {
  border:5px solid yellow;
}

5. CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.

/*
select all elements with a class attribute value that begins with "top"

*** Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! 
*/
[class|="top"] {
  background:yellow;
}

6. CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specific value.

/*
select all elements with a class attribute value that begins with "top"

*** Note: The value does not have to be a whole word! 
*/
[class^="top"] {
  background:yellow;
}

7. CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specific value.

/*
select all elements with a class attribute value that ends with "test"

*** Note: The value does not have to be a whole word!  
*/
[class$="test"] {
  background:yellow;
}

8. CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specifiec value.

/*
select all elements with a class attribute value that contains "te"

*** Note: The value does not have to be a whole word!  
*/
[class*="te"] {
  background:yellow;
}

9. Styling Forms

/* attribute selectors can be useful for styling forms without class or ID */
input[type="text"] {
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
}

input[type="button"] {
  width:120px;
  margin-left:35px;
  display:block;
}

📎 Tip: Visit 🚴 w3schools CSS Forms Tutorial for more examples on how to style forms with CSS.

• 36.
• Top
• Prev
• Next
• Bottom

CSS Counters

CSS counters are variables maintained by CSS whose values can be incremented by CSS rules - to track how many times they are used. Counters allow adjusting the appearance of content based on its placement in the document.

1. Automatic Numbering With Counters

To work with CSS counters use the following properties:

• counter-reset ▶ creates or resets a counter
• counter-increment ▶ increments a counter value
• content ▶ inserts generated content
• counter() or counters() function ▶ adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page in the body selector, then increments the counter value for each <h2> element and adds Section <value of the counter>: to the beginning of each <h2> element:

body {
  counter-reset:section;
}

h2::before {
  counter-increment:section;
  content:"Section " counter(section) ": ";
}

2. Nesting Counters

The following example creates one counter for the page section and one counter for each <h1> element subsection. The section counter will be counted for each <h1> element with Section <value of the section counter>., and the subsection counter will be counted for each <h2> element with <value of the section counter>.<value of the subsection counter>:

body {
  counter-reset:section;
}

h1 {
  counter-reset:subsection;
}

h1::before {
  counter-increment:section;
  content:"Section " counter(section) ". ";
}

h2::before {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}

A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here counters() function is used to insert a string between different levels of nested counters:

ol {
  counter-reset:section;
  list-style-type:none;
}

li::before {
  counter-increment:section;
  content:counters(section,".") " ";
}

• 38.
• Top
• Prev
• Next
• Bottom

CSS Units

CSS has several different units for expressing a length.

Length is a number followed by a length unit, such as 10px, 2em, etc.

📝 Note: A whitespace cannot appear between the number and the unit.

However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units:

• absolute
• relative

1. Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

📝 Note 1: Pixels px are relative to the viewing device. For low-dpi devices, 1px is one device pixel dot of the display. For printers and high resolution screens 1px implies multiple device pixels.

2. Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

📎 Tip: The em and rem units are practical in creating perfectly scalable layout!

📝 Note 2: Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.