Adding the Meat to the Bones - Sessions 6 & 7

/

Session 6: Date: April 26, 2022 Time spent on session: 3 hr 19 min

Session 7: Date: April 27, 2022 Time spent on session: 2 hr 26 min

Total time spent learning to code: 15 hr 17 min

Summary

This post should be short and sweet, and more for posterity than anything.

This last week was focused on CSS (Cascading Style Sheets). The thing that makes a website a little more pleasing to the eye. As I mentioned in my previous post, if HTML is the skeleton, CSS is the muscle and bones.

As I also showed in my last post that HTML already allows for the user to add some styling. Headers can be different sizes and colors. List can be added as ordered or unordered. Paragraphs can be stylized. And on and on. So if styling can already be added in HTML then what is the need for CSS?

Time savings and layout.

In HTML, if the user wants a header, paragraph, or list to look a certain way, then they have to find all those locations in their HTML and update them one by one. If their webpage has dozens of headers, paragraphs, and lists, then you can see how time consuming that can be. Multiply that by the number of pages they have for their website, and you can see how un-scalable it is.

Imagine you are a web developer. You spent countless hours editing your HTML to look the way your client wanted. You present it to them only to be given a list of what seems like basic changes. All they want is for the global font to be different, the headers to have a different color, and for the lists to be a slightly larger font. If you did all your styling in HTML then those changes would take hours, versus minutes in CSS.

In CSS, you can go into your CSS file, make the three changes (if set up correctly), and instantly show those changes to the client.

On top of the styling, CSS will also allow the user to layout the content in a better way than HTML. Do you want your text to span the entire width of the monitor, or only a certain amount of pixels? Should images be centered? Do you want your content to have larger/smaller margins and/or padding? All this can be done in CSS.

I like to think of CSS as my ruleset for HTML. If my HTML meets a certain criteria, then apply the corresponding rule from my CSS sheet.

So the big question is how I faired learning CSS. Just like with HTML, the syntax for CSS is not all that complicated. Creating different “rules” is not all that difficult. This is made even easier if your code editor can auto complete your elements and declarations.

Where I did struggle, and will need more practice, is cascading in CSS. This takes into account specificity, inheritance, and rule order. This allows the user to get more granular with their rules. So instead of just turning all headers a certain size and color, this will allow the user to apply global rules to headers, but more specific rules if a header meets a different criteria. Luckily this is made a little bit easier by using the built in dev tools in Chrome (which I also learned during these lessons).

Overall I had a lot of fun with CSS. I am confident that I can write the rules I want, and then with a little elbow grease I could figure out the structure to make it more performant and granular.

This week will be focused mainly on Flexbox, which from my quick search adds more powerful layout functions to CSS.

Until next time, happy coding!

Session Notes:

Session 6:

CSS Foundations

  • Overview

    • Add styles to HTML with CSS.

    • Understand how to use the class and ID attributes.

    • Add styles to specific elements using the correct selectors.

    • Understand what the cascade does.

  • Selectors - refer to HTML elements to which the CSS rules apply

    • Universal Selector

      • Applies to everything - syntax is a simple *

    • Type Selectors

      • Applied to the defined element type

    • Class Selectors

      • Applied to defined classes in HTML

    • ID Selectors

      • Applied to defined IDs in HTML

      • IDs are used sparingly, if at all

    • Grouping Selectors

      • If two elements share the same styling we can group them (ex - .read and .unread)

    • Chaining Selectors

    • Descendant Combinator

      • Four combinators in total, but will just focus on this one

  • Properties to get started with

    • color and background-color

      • Both accept several kinds of values

        • Can use color names like “red”, or the “transparent” keyword

        • Also accept HEX, RGB, and HSL values

    • Typography Basics and text-align

      • font-family determines the font an element uses

        • Fall into two categories, “font family name” (ex - “Times New Roman”) or “generic family name (ex - sans-sarif). Generic family names never use quotes.

        • If the browser can’t find the first font family, it will use the next one - font fallback

      • font-size determines the size of the text

      • font-weight determines the boldness of the text

        • Usually numeric values in increments of 100, up to 900

      • text-align determines how the text will lay out horizontally

    • Image height and width

      • Images aren’t the only thing we can adjust the height and width on, but will be what we focus on

      • It’s good to include both the height and width properties even if you don’t plan on using one of them

        • Will prevent drastic shifting on the page if the image takes a while to load.

  • The Cascade of CSS

    • Specificity

      • A CSS declaration that is more specific will take precedence over less specific ones

      • Will focus on the following

        1. ID selectors (most specific selector)

        2. Class selectors

        3. Type selectors

      • Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it.

    • Inheritance

      • Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants

    • Rule Order

      • Whichever rule was the last defined is the winner

  • Adding CSS to HTML

    • External CSS

      • Most common method

      • Involves creating a CSS file and linking it inside of the HTML’s opening and closing <head> tags with a self-closing <link> element

      • A couple of the pros to this method are:

        1. It keeps our HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.

        2. We only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.

    • Internal CSS (or embedded CSS)

      • Involves adding the CSS in the HTML file

      • Include the rules in an opening and closing <style> tags

      • This is useful to add styling to a single page of a website

    • Inline CSS

      • Makes it possible to add style directly to HTML elements, but isn’t recommended

  • Practice

  • Additional Resources

Session 7:

Inspecting HTML and CSS

  • Overview

    • You will know how to access the element inspector.

    • You will know how to select and inspect specific elements.

    • You will know how to test out HTML and CSS in the inspector.

  • The Inspector

    • Right click > Inspect element or F12

  • Inspecting Elements

  • Testing Styles in the Inspector

  • The Box Model

    • Overview

      • You’ll learn all about the box model.

      • You’ll learn how to make sure elements are just the right size with margin, padding, and borders

    • Additional Resources

  • Block and Inline

    • Overview

      • You’ll learn about “Normal flow.”

      • You’ll learn the difference between block and inline elements.

      • You’ll learn which elements default to block and which elements default to inline.

      • You’ll learn what divs and spans are.

    • Block vs Inline

      • By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.

      • Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside.

        • In general, you do not want to try to put extra padding or margin on inline elements.

      • Inline-block elements behave like inline elements, but with block-style padding and margin.

    • Divs and Spans

      • Div is a block-level element by default.

        • Used as a container element to group other elements

      • Span is an inline-level element by default.

        • Used to group text content and inline HTML elements for styling and should only be used when no other semantic HTML element is appropriate.