CSS, or cascding style sheets, are used to add styles, like spacing and layout, to HTML web pages. While CSS can be done through in-line styles, it is common convention to have a style sheet for the webpage, or the style tag.
CSS rules consist of a selector and a declaration block, where the selector points to the HTML element or set of elements you want to style and the declaration denotes the style.
W3Schools provides interactive examples and exercises for basic CSS. below provides interactive examples and exercises for basic CSS.
Because of the existence of ids and classes in selectors, often multiple CSS declarations can apply to an HTML element, and they can conflict with each other. The browser needs to resolve these conflicts in order to display the final style onto the website, and this is done through CSS Cascade, which determines which declarations take precedence over others.
This website gives a detailed breakdown of CSS Cascade and its tiers.
The position property in CSS determines the way an HTML element is positioned on a webpage. For example, it can determine whether the position of an HTML element is static and unchanging or relative to the position of other elements. The possition property has 5 possible values, which are described here.
Flexbox, or the flexible box layout module, is an alternative to using positioning that makes it easier for a webpage to have a responsive layout, meaning that the elements within the flexbox can more easily respond to varying screen or webpage sizes. The positions of elements in the flexbox are relative to other items. This game is designed to teach Flexbox in an intuitive and fun way.
CSS grid is also a positioning alternative that provides a grid layout module, in order to display HTML elements within a row and column format. It consists of a parent element and child elements. This game can teach CSS grid basics in a visual, interactive and intuitive way.
Native CSS can be difficult to use, so CSS frameworks have been created so developers can use pre-made styles in order to create good looking website components, navigation bars, buttons, etc. in an easier and faster way without needing to know the semantics of CSS. Two popular CSS frameworks include Tailwind CSS and Bootstrap CSS.
React-Bootstrap is a Bootstrap CSS framework specifically for use on React apps.
Generally, Bootstrap is easier to use and will produce a good looking website in a shorter amount of time, while Tailwind CSS is more customizable and can create more unique looking elements, but requires more of a time investment and is a bit harder to learn and work with compared to Bootstrap.