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 topcenterbottomleftright, 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s