HTML
Lesson:- We can imagine a HTML document as a series of boxes
- Inside each box, there can be text and other boxes
- There is one root box for the visual elements: the body box
- The official name for the boxes is element
- There are different types of elements, that can be used for different purposes
- Using the elements according to their original purpose is generally a good practice and also helps with web accessibility
CSS
- To style an HTML element, we can put the styling directly into the element's style attribute (this is called inline styling)
- See CSS reference on MDN for the styling possibilities
- To reuse styling across elements, we must mark elements that should be styled in the same way, and also extract the styling to a common place.
- There are multiple ways to mark an element for styling:
- for marking unique elements: provide an id attribute
- for marking non-unique elements or grouping elements together based on a common attribute: provide one or more class attributes
- for more fine-tuned styling, we can use other attributes than class (like data-*) as well to identify a certain element.
- the type of elements (like div) can also be used to identify elements for styling, but it's less flexible compared to the class attribute.
- These marks that enable selecting an element for styling are called CSS Selectors
- The common place the styling is extracted to can be within a style tag or a separate file
- To sum it up: CSS is these two things: the selectors and the styling together
- CSS Selectors can be used for selecting elements on a page for other purpuses as well (like testing or interactive behavior)
- Browsers provide default styling for the HTML elements
- Not all styles can be applied to all elements
- Not all styles are supported by all browsers
- In case of clashing styles:
- The style with the more specific selector for a given element will win
- The style that was loaded later will win
- Consider separate classes for styling the look (eg. has no margin) and behavior (eg. primary button)
- It is not recommended to use the id attribute unless you can guarantee that there will be no other element with the same id on the whole webpage (including embedded content)
- It is not recommended to use inline styling
- It is recommended to use relative units for sizing (eg. rem instead of px)