Diving Into CSS

I’ve used a bit of CSS before, so the CSS portion of the Build an HTML & CSS Website from Scratch Skillshare course is still mainly review for me. But even though I know most of the concepts, there are definitely details and features of CSS that I didn’t know about before.

I also am trying to make an effort to remember specific terminology. It makes asking questions so much easier when you’re calling things by their correct names. So, for CSS, it’s:

selector {
     property:value;
}

Some of the nice little additions I learned today:

  • font-weight can take a number as a property, which lets you fine-tune more than normal, bold, bolder would
  • when specifying color, another option to color names and hexadecimal values is to use rgba(), with the rgb values being on a scale from 0 to 255 and the a value determining transparency on a scale from 0 to 1.
  • you can make a class inside any kind of tag, not just a div. I guess I had just assumed, since I hasn’t seen a class inside an element other than a div before today.

I was also pretty excited to learn about all the different selectors! I had known about the basic ones, with standard types and classes, compound, and descendent selectors. But today I also learned about child selectors, sibling selectors, and preceded selectors.

Child selectors will select only the children of the element and no grandchildren or great-grandchildren. So #list > li {…}; would select the top-level line items, but if you had additional elements nested inside a line those would not be selected.

Sibling selectors will only select an element if it directly follows another element. So h1 + p {…} would only select the paragraph element if it directly followed an h1 element.

Preceded selectors will select an element if it comes after another specified element, if they have the same parent. So #line ~ p {…} would only select paragraph elements that come after the element with the ID of line.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>