Graduate Program KB

Module 0 - Fundamentals Recap

Anatomy

• Rule (style) is a collection of declarations targeting one or more selectors

  • The entire block below is a rule

  p h1 {
      font-size: 1rem;
  }
  

• Properties are the attributes you can specify values for

  • margin is the property here

  p {
      margin: 32px;
  }
  

• Selectors are descriptors that let you target specific elements on the page

  • The .apple class and h1 tag are selectors here

  .apple h1 {
      background-color: red;
  }
  

• Declarations are a combination of a property and value

  • font-size: 2rem; is the first and only declaration here

  h1 {
      font-size: 2rem;
  }
  

• A unit is the measurement of values. Some properties are assigned values with units such as px, %, em, etc.

  • px is the unit here

  p {
      padding-top: 24px;
  }
  

Media queries

• Need to accommodate screens of different shapes and sizes

• Media queries allow us to apply different CSS depending on the scenario using @media syntax

  • In the example below, if an element with the class .small-only has a width between 0px and 300px, then the CSS will be applied

  @media (condition) {
      /* Some CSS */
  }
  
  /* Example */
  @media (max-width: 300px) {
      .small-only {
          color: red;
      }
  }
  

  • Another example for hiding content/showing alternative interfaces
  • Display for a large screen if it has a width larger than 300px, otherwise display for a small screen

  .large-screens {
      display: none;
  }
  
  @media (min-width: 300px) {
      .large-screens {
          display: block;
      }
      .small-screens {
          display: none;
      }
  }
  

• Not all CSS properties have corresponding media features

  • Coincidentally, max-width is both a CSS property and media feature as shown in the previous example
  • However, font-size is only a CSS property and can't be queried if used like a media feature

Selectors

Pseudo-classes

• Pseudo-classes let us apply CSS based off an element's current state

• Here, when we hover over the button, it turns blue

  button:hover {
      background-color: blue;
      color: white;
  }
  

• The :focus pseudo-class allows styles to be applied when an interactive element has focus

  • Useful for users without a pointer-style input device

  button:focus {
      background: blue;
      color: white;
  }
  

• :checked is a pseudo-class that can only be applied to checkboxes and radio buttons that are "filled-in"

  input:checked {
      width: 20px;
      height: 20px;
  }
  

• We can also apply conditional logic with pseudo-classes

  • Consider a bunch of paragraphs spaced apart, however the last paragraph has more empty space beneath due to margin-bottom being applied

  p {
      margin-bottom: 1em;
  }
  

  • Using the :last-child pseudo-class, we can apply a unique style to the final element within a container
  • A similar functionality would occur for the :first-child pseudo-class

  p {
      margin-bottom: 1em;
  }
  
  p:last-child {
      margin-bottom: 0px;
  }
  

  • :first-of-type and :last-of-type are almost identical but they search for the first or last instance of a type within a container
  • Below, li:first-of-type looks for the first child within a container that's of type <li> tag, ignoring any sibling elements
  • If li:first-child was used, it wouldn't have found where <li> is the first child within a parent container because <h1> is the first element

  <style>
      li:first-of-type {
          color: red;
      }
  </style>
  
  <ul>
      <h1>List of fruit:</h1>
      <li>Apple</li>
      <li>Banana</li>
      <li>Carrot</li>
      <li>Durian</li>
  </ul>
  

Pseudo-elements

• Pseudo-elements are similar to pseudo-classes, but don't target a specific state

• Instead, they target sub-elements within an element and use the syntax :: (some pseudo-elements support single-colon syntax)

• These form of selectors are used to target elements in the DOM that haven't been explicitly created with HTML tags

• We can use ::placeholder to style the placeholder text in the input field

  • Even though a <placeholder> element is not explicitly created, adding it as an attribute creates a pseudo-element

  <style>
      input {
          font-size: 1rem;
      }
      input::placeholder {
          color: blue;
      }
  </style>
  
  <label>
      Postal Code:
      <input
          type="text"
          placeholder="A1A 1A1"
      />
  </label>
  

• ::before and ::after are two of the most common pseudo-elements to usually add decoration

  • They are basically just secret spans and their functionality can be replicated without the use of pseudo-elements
  • Not recommended to use due to accessibility concerns and there are better ways to bundle content

  <style>
      p::before {
          content: '→ ';
          color: blue;
      }
  
      p::after {
          content: ' ←';
          color: blue;
      }
  </style>
  
  <p>This paragraph has little arrows!</p>
  

  <style>
     .pseudo-pseudo {
         color: blue;
     }
  </style>
  
  <p>
  <span class="pseudo-pseudo">→ </span>
  This paragraph has little arrows!
  <span class="pseudo-pseudo"> ←</span>
  </p>
  

  • If an effect is entirely decorative such as shapes, can use an empty content string

  /* Display a ball before a paragraph */
  <style>
      p::before {
          content: '';
          display: block;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: peachpuff;
          margin: 8px;
      }
  </style>
  

Combinators

• Combining two selectors in a specific way

  • Let's say a rule has the selectors nav and a, styles should only be applied to <a> tags nested within <nav> tags
  • a in this case, is called a descendant selector
  • The descendant selector will apply to all descendants, no matter how deeply nested

• Differentiate between children and descendants

  • A child is only one level down from the parent
  • A descendant might be 1 level down (child) or more...

• To only target children elements, and not deeper descendants, use the > syntax

  • Here, there is a parent unordered list with three items, and the third item has its own unordered list with three more items
  • Using the > here, it applies the style only to child <li> tags of an element with the selector class .main-list which is the parent unordered list
  • If the syntax was omitted, all the nested <li> tags (descendants) would have dotted borders as well

  <style>
      .main-list > li {
          border: 2px dotted;
      }
  </style>
  
  <ul class="main-list">
      <li>Salt</li>
      <li>Pepper</li>
      <li>
          Fruits & Veg:
          <ul>
              <li>Apple</li>
              <li>Banana</li>
              <li>Carrots</li>
          </ul>
      </li>
  </ul>
  

Colours

• The color property adjusts the text colour of an element

• The background-color property adjusts the color of an element's background

• There are various types of colour formats

  • Name of the colour
  • Hex codes (#FF0000)
  • Hue/Saturation/Lightness

  color: hsl(0deg, 100%, 50%);
  

• Some colour formats allow an addition value to be supplied (alpha channel)

  • It's a measure of opacity, with value of 1 being the default
  • The range is between 0 to 1 with the former being fully transparent

  color: hsl(0deg, 100%, 50% / 0.5);
  

Units

• Pixel or px is the most popular unit for anything size-related, since it usually corresponds well to what is visualised

• The em unit is relative to the font size of the current element

  • If a <h1> tag has a font-size of 24px and a padding of 2em, then the padding is equivalent to 48px
  • Not used as much, using em means the UI is adjusted based off a container's font-size

• The rem unit is similar to em but it's always relative to the root element, the <html> tag

  • The <html> tag has a font-size of 16px by default, so 1rem is equivalent to 16px
  • rem is more commonly used, since it behaves consistently across all elements
  • Note: Don't use px to set font-size on the <html> tag, use a percentage instead

• Percentages are often used with height and width to adjust the available space

Typography

• To change the font, use the font-family property

  • Each font consists of multiple character sets, hence why it's called a family

  font-family: serif;
  
  font-family: sans-serif;
  

• Web fonts are custom fonts that can be loaded into CSS

  • Here's an example on how to use Roboto, a font provided by Google
  • The HTML snippet will make the web font available in our CSS

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

  font-family: "Roboto",  Arial, sans-serif;
  

  • The naming convention is to use quotes to identify web fonts
  • Apply a font stack so if the web font is not available, it defaults back to the next available font

• Formatting

  • Bold, use the font-weight property. Can also specify a value to adjust thin/thick text

  /* Equivalent to font-weight: 700; */
  font-weight: bold;
  
  /* Default, go higher for thick text, lower for thin text */
  font-weight: 400;
  

  • Italic, use the font-style property

  font-style: italic;
  

  • Underline, use the text-decoration property. Specify none to explicity remove underlines

  text-decoration: underline;
  

• There are specialised HTML tags used to deliver semantic meaning of the markup

  • The <strong> HTML tag conveys an element is important
  • The <em> HTML tag is used to emphasise something in particular

• Text can be aligned horizontally using the text-align property

  text-align: left;
  text-align: center;
  text-align: right;
  

• The text format can be adjusted using the text-transform property

  /* UPPER CASE */
  text-transform: uppercase;
  
  /* Capitalise First Letter */
  text-transform: capitalize;
  

• Spacing between characters in a text can be adjusted two ways

  • letter-spacing property tweaks the horizontal gap between characters
  • line-height property changes the vertical distance between lines

  letter-spacing: 4px;
  line-height: 1.5;
  

  • line-height has no units
  • It takes its multiplier and uses the element's font-size to obtain the actual line height

Debugging in the browser

• Inspect the Elements tab on the browser (Ctrl + Shift + I)
• Can view inactive CSS declarations
• Crossed-out styles are fallback values incase another style can't be applied
• If a CSS declaration isn't behaving as you expect, the debugger can give suggestions on how to fix it (Firefox)
• /* */ is the commenting syntax in CSS