Graduate Program KB

Fundamentals Recap

Anatomy of a Style rule

  • Properties are the attributes you can specify values for like "color" and "font-size"
  • Selectors are descriptors that let you target specific elements on the page.
  • Declarations are combinations of a property and a value.
  • Rule refers to the entire item that is being selected. The selector along with all its declarations are what is called a rule.
  • Some values have units like px, % or em.
.selector {
  property: value;
}

Media Queries

Exist to accomodate for screens of different shapes and sizes by altering rules for specific scenarios. Very similar to an if statement in javascript.

// Javascript
if (condition) {
}

/* CSS */
@media (condition) {
  /* CSS that runs if the condition is met */
}

An example is shown below in code. All it means is that if the width of the window is between 0px and 300px, the CSS within the media query will be applied.

<style>
  @media (max-width: 300px) {
    .small-only {
      color: red;
    }
  }
</style>

<div class="small-only">Hello there!</div>

A commmon use is to hide content. An example of this being used can be seen below.

<style>
 .large-screens {
   display: none;
 }

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

<div class="large-screens">I only show up on large screens.</div>
<div class="small-screens">Meanwhile, you'll only see me on small ones.</div>

Valid Conditions

max-width is commonly used to add styles on small screens whilst min-width is commonly used to add styles to large screens.
In the context of media queries, although the condition in the query looks like a declararion it is in fact a media feature, not a CSS property.
NOTE: Not all CSS properties have corresponding media features... to demonstrate, the below query is not valid because font size can't be queried.

@media (font-size: 32px) {}

Selectors

Some common selectors can be class names, ID's and tags

Pseudo-classes

Allow you to apply chunks of CSS based on an element's current state. For example :hover. Some common pseudo-classes include:

  • :hover - applies css when the mouse is over the element
  • :focus - applies css when an interactive element (button, link, input) has focus. By focus it essentially means clicked or tabbed on to.
    • really handy for people who don't use a pointer device... like a mobile phone.
  • :checked - applies css on a checkbox or radio button depending on its state (checked or not)
  • :first-child :last-child - applies css to the last or first element in its container
    • The below code ensures there is a 1em gap between each paragraph but none after the last one as it is not required.
    • NOTE: This doesn't work as expected if the last child of the container isn't a <p>. There is a way around this if we want the last <p> not necessarily the last child.
    p {
    margin-bottom: 1em;
}
p:last-child {
    margin-bottom: 0px;
}
  • :first-of-type :last-of-type - applies css to the last or first child of a specific type regardless of whether or not is actually the last or first child for that container.

Pseudo-elements

Similar to pseudo-classes but they target "sub-elements" within an element.
Pseudo-elements use "::" rather than a pseudo-classes' ":".
To demonstrate we can apply CSS to the placeholder sub-element of the input element.

input {
  font-size: 1rem;
}
input::placeholder {
  color: red;
}

When we add attributes to tags (like placeholder in the input tag for example) we are creating pseudo-elements. These selectors target elements in the DOM that we haven't explicitely created with HTML tags.
2 of the most common pseudo-elements:

  • ::before - puts styling or content before what is being selected
  • ::after - puts styling or content after what is being selected
    These particular pseudo-elements essentially act as secret spans.
    Simple example:
p::before {
  content: '→ ';
  color: deeppink;
}

p::after {
  content: ' ←';
  color: deeppink;
}
/* Produces the following on <p>This paragraph has little arrows!</p>: 
  → This paragraph has little arrows!  ←
*/

Combinators

Involves combining selectors to get a more specific effect.
The term combinator refers to a character that combines multiple selectors.
In our case the combinator is the space character and it is creating a descendant selector
A good example is having a specific style for nav links.

/* This will only apply to a tags that are nested within nav tags*/
nav a {
}

The term descendant selector means that the styling applies to all descendants so aslong as the a tag is inside a nav tag the style will apply. It doesn't matter how nested it is.
For example, it doesn't matter if the a tag is in a p tag, within a div, within the nav tag.
A key thing to differentiate between is children and descendants and the clearest way to do this is to think of a family tree. A child is only 1 level down from its parents. Whereas a descendant is just underneath, it doesn't matter how far down.
A cool way of utilising parents and their children is with the > operator.

main-list > li {
  /* any styling */
}

What this means is that every li element that is a direct child of the main-list class will have this styling added to it. Meaning that descendants wont, unless of course the descendant is also a child.
To put more simply, what ever is on the larger side of the operator has to be the parent of what is on the smaller side.

To summarize

  • A SPACE means that the second item has to be a descendant... anywhere down the tree
  • A > means that it has to be a direct child.

Color

4 Most Common Ways to represent Color:

  • Hex Codes
    • Easy to write and common. But lacks readability.
  • Keywords
    • Good for readability but not for specificity
  • RGB
    • Good for specificity but not for readability. although it has better readability than hex codes.
  • HSL
    • Recommended format
    • First input is a degree around the color wheel, has the deg suffix
    • Second input is a percentage for saturation (how greyed out or vibrant the color is), has the % suffix
    • Third input is a percentage for lightness (how light or dark the color is), has the % suffix
    • You can have a slash in the function which looks like division at first but it's actually separation between groups. Group to the left of slash represents color and opacity to the right.
    .first.box {
  background-color: hsl(340deg 100% 50% / 1);
}
.second.box {
  background-color: hsl(340deg 100% 50% / 0.75);
}
.third.box {
  background-color: hsl(340deg 100% 50% / 0.5);
}
.fourth.box {
  background-color: hsl(340deg 100% 50% / 0.25);
}

Using HSL for a highlight effect:
```css
  em {
    background-color: hsl(50deg 100% 50%);
  }

<p>
  This is a paragraph with a
  <em>highlighted section</em>.
</p>

Units

Different Types:

  • pixel: px
    • Absolute unit
    • 1px is 1/96th of an inch
  • percentage: %
    • Relative unit
    • Relative to the amount of available space in the parent element
  • em
    • Relative unit
    • Relative to the font-size of the current element
  • rem
    • Relative unit
    • Relative to the font-size of the root element
    • By default the root element is the html tag and is 16px
    • Is better than em in most cases because all elements will change relative to the same thing.
  • vh
    • Relative unit
    • 1/100th of the height of the viewport
  • vw
    • Relative unit
    • 1/100th of the width of the viewport

Typography

Custom Web Fonts

Using Roboto:

<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;

Notice it is convention and good practice to put web font names in ''.

Bold Text

Uses the font-weight attribute:

  • 300 - light and thin text
  • 400 - normal
  • 700 - bold

Italics

Uses the font-style attribute:

  • normal
  • italic
  • oblique

Underlined

Uses the text-decoration attribute:

  • none
  • underline
  • overline
  • line-through

Semantics

We can change the cosmetic presentation of the design but for the semantic meaning of the markup we need specialised HTML tags.
An example is the <strong> tag which is used to denote importance, like a WARNING or the <em> tag which is used for emphasis.
Some other common semantics:

  • <b> is used to draw attention to text without implying its urgent
  • <i> is used to denote text that is set off from the normal text

Text Alignment

We can use the text-align property to align text elements:

  • left
  • right
  • center

Text Transformation

We can use the text-transform property to change the case of text elements:

  • uppercase
  • lowercase
  • capitalize - first letter of every word is uppercase
  • none

Spacing

We can use the letter-spacing property to change the space between letters in a text element.
We can use the line-height property to change the space between lines in a text element.

  • Calculating the actual height of each line by multiplying the font size (2rem) by the line-height (1.5), for a derived value of 3rem.

Debugging in the Browser

  • To open inspector window CTRL + SHIFT + I
  • Commented out rules will still appear in the inspector, they will just be ruled out.
  • Press the :hover button in the inspector to see what the element looks like when hovered over, you can force other pseudo-classes too.
  • Firefox will let you know if a property relies on another property that is not present or being met. This can make firefox very useful for debugging.
    • Chrome does this now as well!

Random Takeaways

  • An iframe is an embedded HTML document within the HTML document. A page within a page.

Return