• The type selector is used in the CSS file to select certain element types and apply styling to them. Eg
  • p { \ color:green; \ }
• The universal selector * selects everything and applies styling to them. Eg.
  • • { \ font-family:arial; \ }
• Yesterday I wrote about classes being identified with a ‘.’ before the class name in the CSS file. This rulseset applies to classes aswell. Eg
  • .brand { \ color:green \ }
• It is possible to add multiple classes to a element. Eg. \ <h1 class='green bold'> ... </h1>
• id . ID’s are similar to classes. But they are only for a single element. Each ID canonly e used once per page. In the CSS file, the id is represented by a # symbol.
• You can use the attribute selector to select elements that use specific attributes. Eg. \ [href]{

       color: magenta;

• This will target all elements that use a href attribute.

  • You can be a bit more specific by using: \ img[src*='winter'] {

        height: 50px;
    

* `}`This will only target elements with src attributes that contain the string ‘winter’.
* The advantage of this is that no new HMTL markup needs to be added. Just some new CSS.

• Pseudo-classes are the used to change the appearance of an element after certain user interactions. They are represented with a colon : in front of them in the CSS file. Eg. \ p:hover {

      background-color: lime;

* This will make any <p> element turn lime green when you hover over it.
* :focus, :visited, :disabled, :active.

• Specificity is the order that the browser will display CSS style. Since id selectors are the most specific, this have the highest priority, whereas universal selectors * will be lower priority.
• Chaining is way to combine multiple selectors.
• Web Safe Fonts are fonts that are supported across multiple browsers. They will always be displayed properly.
• px, rem and em are all ways of representing font size in CSS.
  • px (pixels) is the standard unit.
  • rem represents the default font size for the browser. So 2rem would be twice the size of a the browser’s default font size.
  • em represents the font-size relative to the parent element. So if apparent element had a font-size of 10px, if the child element had size of 0.5em, it would be equivalent to 5px.
• The box model is used to describe the layers of styling on HTML page.
• There are two types of display types. Block and inline.
• flex is used to align elements horizontally.
  • flex-wrap is also used.
• float is used to poaition elements left or right of its neighbouring elements.
• woff2 stands for Web Open Font Format. It is a series of fonts developed by Mozilla for use online.
• jumbotron is a class in Bootstrap. I think that will be useful for the heat map in our work project.
• If you link a HTML file to both a CSS file AND a bootstrap template, which one does it prioritise? For example, what if there was a class named ‘row’ in both the CSS file and the bootstrap?
• &copy is what’s called character code. The browser interprets it as the copyright symbol ©.