W3Cx: CSS Basics

Some links and notes from the W3Cx CSS Basics course offered for free and paid certificate.

Links

CSS

HTML

Module 2: Building CSS rules Notes

  • HTML elements inherit stylistic properties. Not every property is inherited, but many are. The CSS specification tell you, for each property, whether it is inheritable. It’s a good idea to keep in mind the structure of your HTML document when choosing your selectors so you can use inheritance to your advantage by applying styles to the top most element and save yourself extra CSS code.
  • True or False? “background-color” is inherited from parent to child HTML element (if the parent is not a body element). False. Explanation: “background-color” is not inherited, but note that the background of elements is normally transparent so you see the background of the parent behind them.
  • When two vertical margins meet, what happens? Explanation: When two vertical margins meet, they “collapse”: the smaller one disappears inside the larger one. The right answer is : the space between the two elements is the larger of the two margins.

Module 3: Specific HTML element targeting with CSS selectors

In this module, we’re going to talk about classes and IDs, pseudo-classes, contextual selectors, and then how you combine all these selectors together and understand the Cascading part of Cascading style sheets.

Learning to properly select your HTML elements through CSS is crucially important to making sure that you get the most out of CSS.

IDs and Classes

  • In this module, we’re going to talk about classes and IDs, pseudo-classes, contextual selectors, and then how you combine all these selectors together and understand the Cascading part of Cascading style sheets.
  • Learning to properly select your HTML elements through CSS is crucially important to making sure that you get the most out of CSS.
  • Their flag characters are (“#”)for IDs and a (“.”) for classes

Pseudo-classes

  • Pseudo-classes are a way to select HTML elements based on their state as opposed to their HTML structure.
  • Pseudo-classes must always be applied to an existing selector.
  • Their “flag character” is the colon (“:”)
    • (“E > F“) Matches any F element that is a child of an element E. Child selectors
  • (“*”) Matches any element. Universal selector

Some of the most popular dynamic pseudo-classes.

  • :link and :visited
  • :hover
  • :focus The focus pseudo class is when a user has chosen to begin interacting with an element, often when the click into a form input such that the input is then ready to accept keyboard input.
  • :active The active pseudo-class applies when an element is activated. This happens in the time between when the user clicks their mouse and they release it.

Contextual selectors

When you use two selectors separated by a space on a rule, you scope the rule to the elements that correspond to the selector on the right that are INSIDE the elements that correspond to the selector on the left.

Example:

If we applied the following CSS rule then the images INSIDE the paragraph would be set to a width of 100px, but that rule would not apply to the images outside the paragraph.

p img {
    width: 100px;
}

As your Web pages get more complex, contextual selectors become more important, because it won’t scale to apply classes and IDs to each individual item. Contextual selection becomes especially useful when you structure your HTML with section tags like header, section, article and footer.

C is for Cascade

  • Question: how does the browser decide when there’s multiple rules?
  • Answer: the most specific rule wins.
  • Question: What does the “cascading” part of “cascading style sheets” refer to?
  • Answer: The set of rules that govern how to decide which rule wins when multiple rules apply to the same HTML element.

    • A rule is generally more specific if it applies to a fewer number of elements than another rule that encompasses those elements. The more facets a rule has the more specific it is.
      • When pseudo-classes are applied this is more specific than without the pseudo-class. For example, p:hover will win over just p.
      • Contextual selection is more specific because it scopes the rule to elements within a certain subset of those on the page. For example, a rule that applies to all the paragraphs within articles is more specific than a rule that applies to all the paragraphs on the page.
      • IDs are most specific because you are directly applying them to the desired HTML element. The rule based on an ID will always win over other rules
      • If two rules have the exact same weight, the one that comes later in the CSS document is what is applied.
      • You can use the “!important” modifier on a CSS property so that it will guarantee that style will be applied. This is a way for you to override the calculated weight. DON’T USE OR YOU LOSE THE GAME!
by Scott Gruber on

Categories

Webmentions

Posted a response? Enter the URL