January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Background Images

Used in a very different way to the img HTML element, CSS background images are a powerful way to add detailed presentation to a page.

body {
    background: white url(http://www.ndangelo.com/images/bg.gif) no-repeat top right;
}

This amalgamates these properties:

• background-color, which we have come across before.
• background-image, which is the location of the image itself.
• background-repeat, which is how the image repeats itself. Its value can be:
  • repeat, the equivalent of a “tile” effect across the whole background,
  • repeat-y, repeating on the y-axis, above and below,
  • repeat-x (repeating on the x-axis, side-by-side), or
  • no-repeat (which shows just one instance of the image).
• background-position, which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

Assignment

• Please complete an example of the following:
• background-color
• background-image
• background-repeat: which is how the image repeats itself.
  • Its value can be: repeat, the equivalent of a “tile” effect across the whole background
  • repeat-y, repeating on the y-axis, above and below,
  • repeat-x (repeating on the x-axis, side-by-side),
  • no-repeat (which shows just one instance of the image).
• background-position, which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

• background-color, which we have come across before.
• background-image, which is the location of the image itself.
• background-repeat, which is how the image repeats itself. Its value can be:
  • repeat, the equivalent of a “tile” effect across the whole background,
  • repeat-y, repeating on the y-axis, above and below,
  • repeat-x (repeating on the x-axis, side-by-side), or
  • no-repeat (which shows just one instance of the image).
• background-position, which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

See the Pen Untitled by Nicholas D’Angelo (@ndangelo) on CodePen.

See the Pen Images: background-image by Nicholas D’Angelo (@ndangelo) on CodePen.

See the Pen Background Position 1 by Nicholas D’Angelo (@ndangelo) on CodePen.

See the Pen Background Image Size by Nicholas D’Angelo (@ndangelo) on CodePen.

Specificity

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts arising.

More Specific = Greater Precedence

If the selectors are the same then the last one will always take precedence. For example, if you had:

p { color: red }
p { color: blue }

The text in the box of p elements would be colored blue because that rule came last.

However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). Conflicts quite legitimately come up, though, when you have nested selectors.

div p { color: red }
p { color: blue }

In this example it might seem that a p within a div would be colored blue, seeing as a rule to color p boxes blue comes last, but they would actually be colored red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

Calculating Specificity

The actual specificity of a group of nested selectors takes some calculating. You can give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. When you add them all up, hey presto, you have a specificity value.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors, 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

From: https://www.htmldog.com/