Tag: css flex

CSS Multiple Backgrounds

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following properties:

  • background-size
  • background-origin
  • background-clip

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. Continue reading CSS Multiple Backgrounds

CSS Border Images

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

  1. The image to use as the border
  2. Where to slice the image
  3. Define whether the middle sections should be repeated or stretched

Continue reading CSS Border Images

CSS Rounded Corners

CSS Rounded Corners

With the CSS border-radius property, you can give any element “rounded corners”.

Example

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Continue reading CSS Rounded Corners

CSS Math Functions

The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(),
max() and min() functions.

The calc() Function

The calc() function performs a calculation to be used as the property value.

CSS Syntax

calc(expression)

Continue reading CSS Math Functions

CSS !important Rule

What is !important?

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Let us look at an example:

Example

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

Continue reading CSS !important Rule

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