HTML and CSS notes for today!

I’m learning about HTML and CSS. Here are some important notes I want to save for myself:

• The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
• You can also apply a selector to a specific HTML element by simply stating the HTML selector first, example-> p.jam
• Grouping:

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

• Nesting:

#top {
background-color: #ccc;
padding: 1em
}


#top h1 {
color: #ff0;
}


#top p {
color: red;
font-weight: bold;
}


• psuedo classes (commonly used only for links)The following will apply colors to all links in a page depending on whether the user has visited that page before or not:

  a:link {
  color: blue;
  }

  a:visited {
  color: purple;
  }

• Dynamic Psuedo Classes
  • Also commonly used for links, the dynamic pseudo classes can be used to apply styles when something happens to something.
  • active is for when something activated by the user, such as when a link is clicked on.
  • hover is for a when something is passed over by an input from the user, such as when a cursor moves over a link.
  • focus is for when something gains focus, that is when it is selected by, or is ready for, keyboard input.
    • ^most often used on forms
• First Children
  • If you only want to style the first paragraph, you could use the following CSS:

    p:first-child {
    font-weight: bold;
    font-size: 40px;
    }

• Margin/padding shorthand
  • top – right – bottom – left
  • OR top/bottom – right/left
• Border shorthand
  • width/color/style
• Backgrounds

body {
    background: white url(http://www.htmldog.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.

Specificity

• 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.

Display

• Inline x-> x-> x->
• Block (vertically in boxes)
• none (can switch things off in a click)

That’s all I can handle for today.

-Matt