More CSS. Today I Learned: Thursday, July 7, 2022

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 &lt;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?