3.6 KiB

Raw Permalink Blame History

Questions

1. Why does inline style CSS override rules defined in style elements and external stylesheets?

inline style CSS overrides external stylesheets because it's the most specific ruleset. Rules from external stylesheets might match the object, but if you know that this specific element should be styled differently, it could be written explicitly in the tag options of the element. However, in this case it would be best practise to use an ID and specify the rules in a stylesheet.

2. Give a brief example of when to use ID ( #id ) and when to use classes ( .class ) in CSS.

ID is used when there's a piece that only occurs once on the page. A class is used for common parts that will occur several times. Let's take youtube as an example. The search bar, the logo in the header and the video is something that will only occur once. Those are good opportunities to use IDs. Comments and suggested videos however, will show up multiple times. Using classes is a good way to reach these pieces with JS and CSS. Sometimes, people confuse tags with classes. Tags are used in the same way as classes to mark several elements of the same type. But it is good practise to only use the standard HTML tags defined by WHATWG and use classes for any custom recurring parts that you have defined yourself. It makes it easier to define objects with several classes at once, and it's what's expected by most browsers (even though most browsers are able to handle custom tags too.)

3. What does RGBA mean and what colors can you express with it?

RGBA is an acronym meaning "Red, Green, Blue, Alpha" where the three first represent subpixel brightness values and the fourth represents opacity. With the RGB colors, you can express most colors that anyone can think of on the top of their head. Usually, we express them with a bitdepth of 8, meaning you can specify each individual color value to a range of 2^8 values -> between 0 and 255. With the alpha channel added, we can also specify how transparent the color should be. This is especially useful for things like non-square icons, watermarks and in web development - see-through floating windows. An example of a color that could be expressed with RGBA would be a 50% seethrough yellow, RGB(255,255,0, 127), or with alternative hexadecimal syntax -> #FFFF007f.

Note that the actual amount of colors you can express with RGBA depends on several other factors like your monitor, the colorspace, the brightness in the room you're sitting.

4. Why do we include CSS files inside the head element and not inside the body element?

We include the CSS into the head element in order to separate content and settings/metadata. Information like styling, scripts, and metadata should not be mixed with the content, and is therefore specified in the <head> before the <body>

5. What CSS selector matches all the p elements inside the article element in the following HTML?

<p>This should not match.</p>
<article>
  <h2>This should not match</h2>
  <p>This should match.</p>
  <p>This should also match.</p>
  <p>Do not forget about this one!</p>
</article>

Here, we have two options. You could either do

  article p {}

which specifies all <p> elements inside the <article>.

The other option would be

  article > p {}

which would only specify <p> elements directly beneath the <article>. But since <article> has no <p> subchildren, both will work.

3.6 KiB Raw Permalink Blame History