Part 2. HTML + CSS: A Closer Look
Helpful CSS terms and definitions
CSS stands for “Cascading Style Sheets.” Style sheet languages are those that deal in presenting structured documents on a website browser. CSS is a seminal part of the web and web development, especially in conjunction with HTML. For a deeper dive into HTML, read Part 1 of this post here.
Using CSS allows developers to separate style and content, and alter specific design elements on a page that allow for accessibility and user-friendly interfaces. In order to implement CSS styling into a React web application, one must first import the CSS file into the document using HTML to build the page.
CSS Properties are the styling traits that change a given element based on the selector that you have designated. Syntactically, they are placed between the curly brackets that come after a selector, each with their own line and ended with a semi-colon(;).
There are a multitude of CSS Properties (color, padding, font-family, margin, etc.) that I do not have the patience to cover individually, but I’ll provide you with a helpful W3 Schools glossary here.
CSS selectors are design elements to which stylistic properties are adhered. What elements are altered depend on the sort of selector used in a CSS document:
- Type Selectors will change any like element to the desired styling. The syntax for type selectors in a CSS file can be seen in the example below: simply list the element (not including the <> symbols), followed by open curly brackets which will contain the elements style properties.
- Class Selectors are used to affect the styling of any element with a particular “class” or “className” attribute. Syntactically, they require a period (.) before the particular className as seen below:
- ID Selectors change styling based on an HTML element’s “id” attribute, similar to what we see with the “class selector.” Syntactically, they require a # before the particular className as seen below:
- Attribute Selectors will apply to a given element only if the element has the specific attribute provided. Syntactically, attribute selectors consist of the naked element name followed by square brackets containing the specific attribute required to alter the styling. Attribute selectors are incredible useful for specific and complex styling needs. Read more on attribute selectors’ syntax and all their potential characteristics here.
- Universal Selectors are those that select all elements within a document and adjust them to any defined styling properties. Universal Selector syntax is an asterisk before the element type