August 28, 2023 by admin

HTML/CSS Reference for DMET 155/355

Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

Margins and Padding

margin allows you to amalgamate margin-top, margin-right, margin-bottom, and margin-left in the form of property: top right bottom left;

So:

p {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Can be summed up as:

p {
    margin: 1px 5px 10px 20px;
}

padding can be used in exactly the same way.

By stating just two values (such as padding: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left.

Borders

border-width can be used in the same way as margin and padding, too. You can also combine border-width, border-color, and border-style with the border property. So:

p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

Can be simplified to be:

p {
    border: 1px red solid;
}

The width/color/style combination can also be applied to border-top, border-right etc.

Fonts

Font-related properties can also be gathered together with the font property:

p {
    font: italic bold 12px/2 courier;
}

This combines font-style, font-weight, font-size, line-height, and font-family.

So, to put it all together, try this code:

p {
    font: 14px/1.5 "Times New Roman", times, serif;
    padding: 30px 10px;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 10px 50px;
}

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.

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/