Part 2. HTML + CSS: A Closer Look

Helpful CSS terms and definitions

This week we look closely at the CSS half of this marriage.

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.

Properties

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.

Selectors

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.
This type selector only affects the font color of <h3> elements.
  • 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:
These two class selectors affect the font-family of the className “div1”, and the font color of className “div 2” separately.
  • 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:
The ID Selector in action!
  • 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.
Only h1 tags with the title attribute “green” are affected by the color styling in the CSS file. *NOTE: the h4 element is not affected even though it has the same title attribute.
  • 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
The universal selector used here changes all font color to red.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.