CSS Outline, CSS Visibility, and CSS Counters

CSS Outline

The CSS outline property is like the CSS border property. It lets you draw an extra border around any element to obtain visual attention. It is easy to apply, just like a border is.

Observe this example:

<!DOCTYPE html>  
<html>  
<style type="text/css">  
.box {  
        background-color: #00ffff;  
        outline: 3px solid black;  
        border: 3px solid violet;  
        padding: 5px 10px;  
}  
</style>  
<div class="box">Hello Humans!</div>  
</body>  
</html>

Difference Between Border and Outline

If you are a newbie, border and outline look alike, but there are essential differences between them:

With outline, it is impossible to apply a different width, style, and color for the four sides of an element, but with the border property, you can simply use the given value for all four sides of an element.
The border is a part of the element's dimension, and the outline is not a part of the element's dimension. This means that no matter how thick the outline you apply to the element, its dimensions won't change.

The outline property can be referred to as a shorthand property. It allows you to use any property alone if you need it. Among its properties are outline-width, outline-style, and outline-color.

Observe this example:

<!DOCTYPE html>  
<html>  
<style type="text/css">  
.box {  
        background-color: #00ffff;  
        border: 3px solid black;  
        padding: 5px 10px;  
        outline-width: 3px;  
        outline-style: solid;  
        outline-color: violet;  
}  
</style>  
<div class="box">Hello Humans</div>  
</body>  
</html>

In the above example, the three outline properties are used:

Outline-width: This is quite similar to margin and padding, and it can be an absolute, relative, or predefined outline width value, i.e., thin, medium, or thick. Choosing a relative or absolute value is preferred since predefined outline width values like thin, medium, or thick may be interpreted differently by different browsers.

Outline-color: It sets the color you want to use for the outline. It works with all colors available in HTML and CSS.

Outline-style: In the example above, only the solid outline style is used though there are a lot of other outline styles like hidden, dotted, dashed, double, groove, ridge, inset, and outset.

Here's an example of how you can use the different outline styles.

<!DOCTYPE html>  
<html>  
<style type="text/css">  
.box {  
        outline-color: blue;  
        outline-width: 4px;  
        margin: 10px;  
        float: left;  
        border: 2px solid black;  
        padding: 5px 10px;  
}  
</style>  
<div class="box" style="outline-style: dashed;">A dashed outline.</div>  
<div class="box" style="outline-style: dotted;">A dotted outline.</div>  
<div class="box" style="outline-style: double;">A double outline.</div>  
<div class="box" style="outline-style: groove;">A groove outline.</div>  
<div class="box" style="outline-style: inset;">An inset outline.</div>  
<div class="box" style="outline-style: outset;">An outset outline.</div>  
<div class="box" style="outline-style: ridge;">A ridge outline.</div>  
<div class="box" style="outline-style: solid;">A solid outline.</div>  
</body>  
</html>

Outline Offset

The outline offset creates a distance between the outline and the border. After taking a CSS length unit and making the blank space between the border and outline transparent, it takes the parent element's background color making the difference between an outline and border visible.

Below is an example to show the difference between outline and border.

<!DOCTYPE html>  
<html>  
<style type="text/css">  
.box {  
        background-color: #00ffff;  
        outline: 3px solid black;  
        outline-offset: 6px;  
        border: 3px solid violet;  
        padding: 5px 10px;  
}  
</style>  
<div class="box">Hello Humans</div>  
</body>  
</html>

CSS Visibility

The CSS visibility property helps to specify the visibility of an element. An invisible element can take up space on the page, but by using the display property, you can create hidden elements that won't take up space.

CSS Visibility Parameters

Visible: It is the default value. It ensures that the element is visual.

Hidden: It ensures that the element is invisible (but still takes up space).

Collapse: It removes a row or column of a table but does not affect the layout. If collapse is used on other elements, it renders "hidden."

Initial: It returns this property to its default value.

Inherit: It inherits this property from its original element.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.visible {  
    visibility: visible  
}  
h1.hidden {  
    visibility: hidden  
}  
</style>  
</head>  
<body>  
<h1 class="visible">Visible</h1>  
<h1 class="hidden">Invisible</h1>  
<p><strong>Note:</strong> An invisible element can take up space on the page.   
But the display property helps you create invisible elements that do not  
 take space.</p>  
</body>  
</html>

CSS Counters

CSS counters are just like variables. They are sustained by CSS and can be enhanced by CSS rules to follow its usage.

CSS counters enable simple CSS based incrementing and display of a number for generated content.

CSS Counter Properties

The following is a list of properties used with the CSS counter:

Counter-reset: This creates or resets a counter.
Counter-increment: It increments the counter value.
Content: It inserts generated content.
Counter() or Counters() function: Adds the value of a counter to an element.

CSS Counter Example

Observe the following example:

<!DOCTYPE html>  
<html>      
<head>  
<style>  
body {  
    counter-reset: section;  
}  
h2::before {  
    counter-increment: section;  
    content: "Section " counter(section) ": ";  
}  
</style>  
</head>  
<body>  
<h1>Example of CSS Counters:</h1>  
<h2>Counter A</h2>  
<h2>Counter B</h2>  
<h2>Counter C</h2>  
<h2>Counter D</h2>  
<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>  
</body>  
</html>

CSS Nesting Counters

A nesting counter is a counter created within the counter. Let's take an example to explain the nesting counter.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
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) " ";  
}  
</style>  
</head>  
<body>  
<h1>Counter A:</h1>  
<h2>Counter AA</h2>  
<h2>Counter AB</h2>  
<h2>Counter AC</h2>  
<h2>Counter AD</h2>  
<h2>Counter AE</h2>  
  
<h1>Counter B:</h1>  
<h2>Counter BA</h2>  
<h2>Counter BB</h2>  
<h2>Counter BC</h2>  
<h2>Counter BD</h2>  
  
<h1>Counter C:</h1>  
<h2>Counter CA</h2>  
<h2>Counter CB</h2>  
<h2>Counter CC</h2>  
<h2>Counter CD</h2>  
<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>  
</body>  
</html>

Different Levels Of Nesting Counters

An outlined list can be created by using nesting counters. It enables you to insert a string between different levels of nested counters.

Observe this example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
ol {  
    counter-reset: section;  
    list-style-type: none;  
}  
  
li::before {  
    counter-increment: section;  
    content: counters(section,".") " ";  
}  
</style>  
</head>  
<body>  
<h2>Different level of Nesting counters example</h2>  
<ol>  
  <li>stuff</li>  
  <li>stuff  
    <ol>  
      <li>stuff</li>  
      <li>stuff</li>  
      <li>stuff  
        <ol>  
          <li>stuff</li>  
          <li>stuff</li>  
          <li>stuff</li>  
        </ol>  
      </li>  
      <li>stuff</li>  
    </ol>  
  </li>  
  <li>stuff</li>  
  <li>stuff</li>  
</ol>  
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>  
</body>  
</html>