Learn the concept of HTML and CSS in 5 minutes

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
• See: HTML elements reference on MDN

Good to know:

• Using the elements according to their original purpose is generally a good practice and also helps with web accessibility

Exercise: explore the Elements panel of your browser's Developer tools. (Usually opens with F12, or you can reach it via "Inspect this element" from the right click menu on any page.)

CSS

Lesson:

• 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

Good to know:

• 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

Best Practice:

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

Exercise: open your browser's Developer tools and take a look at the Styles tab (usually on the right side) on the Elements panel. Play around with adding or removing styles, and observe which selectors affect the elements of the page. Check out the Computed tab as well.

CSS: frequently used selectors

Basic selectors 

Wildcard selector: selects all elements

* {}

Type selector: selects all elements of the given type

div {}

Attribute selector ([]): selects all elements that has the given attribute

[src] {}

ID selector (#): selects the element with the given ID attribute

#menu {} /* or [id="menu"] {} */

Class selector (.): selects all elements with the given class attribute

.centered {} /* or [class~="centered"] {} */

Selector grouping

selector grouping (,): enables to specify common values in one place

div, #menu, .centered {}

Selector chaining

Selector chaining

div.#menu.centered[name="Menu"]:first-child::first-letter {}

Attribute value selectors

[attribute="value"] selector: selects all elements with the specified attribute and value

[target="_blank"] {}

[attribute~="value"] selector: selects all elements whose attribute value contains the specified whole word.

[title~="flower"] {}

[attribute|="value"] selector: selects all elements whose attribute value starts with the specified value, the value being a whole word or the first part of a hyphenated word.

[class|="top"] {}

[attribute^="value"] selector: selects all elements whose attribute value begins with the specified value. (like in regex)

[class^="top"] {}

[attribute$="value"] selector: selects all elements whose attribute value ends with the specified value. (like in regex)

[class$="test"] {}

[attribute*="value"] selector: selects all elements whose attribute value contains the specified value.

[class*="te"] {}

Selector combination

Descendant selector (space): matches all elements that are descendants of a specified element

div p {}

Child selector (>): selects all elements that are the immediate children of a specified element

div > p {}

Adjacent sibling selector (+): selects all elements that are the adjacent siblings of a specified element

div + p {}

General sibling selector (~): selects all elements that are siblings of a specified element

div ~ p {}

CSS: box-sizing: content-box vs border-box

Sources: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp | https://css-tricks.com/box-sizing/ | http://www.binvisions.com/articles/box-sizing-property-difference-content-border/

Box-sizing

• content-box
• Default. 
• Width or height = content's width or height. Border, padding, or margin are not included

• border-box
• Width or height = content + padding + border width or height. Margin is not included.

• initial
• Sets this property to its default value.
• inherit
• Inherits this property from its parent element.

CSS position: static, relative, absolute and fixed

Sources: W3Schools CSS Layout - The position Property | CSS Tricks Absolute, Relative, Fixed Positioning: How Do They Differ?

• Static
• The default. Positioned according to the normal flow of the page.
• Not affected by the top, bottom, left, and right or z-index properties.
• It is useful when you forcefully want to remove some other positioning that was applied to the element outside of your control.
• Relative
• "Relative to itself". Relative to as if it were positioned as static.
• Affected by the top, bottom, left, right and z-index properties.
• Other content will not be adjusted to fit into any gap left by the element.
• Limits the scope of absolutely positioned child elements.
• 
  
• Absolute
• Positioned relative to the nearest non-static positioned ancestor, or the body if there are no such ancestors. 
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• Does not affect the position of any other same-level element
• 
  
• Fixed
• Positioned relative to the viewport (or window), which means it always stays in the same place even if the page is scrolled.
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• The downside of this element is the usability on different screen-sizes. It does not scroll, so if it does not fit the screen, the content is cropped and unreachable.
•