Category: CSS

CSS Specificity

What is Specificity?

If there are two or more CSS rules that point to the same element, the selector with the highest specificity will “win”, and its style declaration will be applied to that HTML element.

Think of specificity as a hierarchy that determines which style declaration is ultimately applied to an element.

Look at the following examples:

Example 1

Here, we have used the “p” element as selector, and specified a red color for this element. Result: The text will be red:

<html>
<head>
  <style>
    p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

Continue reading CSS Specificity

CSS Units

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.

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

Example

Set different length values, using px (pixels):

h1 {
font-size: 60px;
}

p {
font-size: 25px;
line-height: 50px;
}

Continue reading CSS Units

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 let you adjust the appearance of content based on its placement in the document.

Automatic Numbering With Counters

CSS counters are like “variables”. The variable values can be incremented by CSS rules (which will track how many times they are used).

To work with CSS counters we will 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:

Example

body {
counter-reset: section;
}

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

Continue reading CSS Counters

CSS Attribute Selectors

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

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

The following example selects all <a> elements with a target attribute:

Example

a[target] {
  background-color: yellow;
}

Continue reading CSS Attribute Selectors

CSS Image Sprites

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Continue reading CSS Image Sprites

CSS – Image Gallery

CSS can be used to create an image gallery.

Image Gallery

The following image gallery is created with CSS : Continue reading CSS – Image Gallery

CSS Dropdowns

Create a hoverable dropdown with CSS.

Basic Dropdown

Create a dropdown box that appears when the user moves the mouse over an element.

Example

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Continue reading CSS Dropdowns

CSS Opacity and Transparency

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

Transparent Image

The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent.

Example

img {
  opacity: 0.5;
}

Continue reading CSS Opacity and Transparency