CSS Basics Flashcards
How do you apply styling to an html element, like <p>
p { … }
// this is a CSS selector
How do you apply styling to a class, eg myClass
.myClass { … }
How do you applying styling to an id, eg myId
myId { … }
How do you apply the class “big” to all p elements?
p.big { … }
How do you style all p elements that are DIRECT children of article elements?
article > p { … }
How do you style all p elements that are descendants (not DIRECT children) of article elements?
article p { … }
How do you style an element that has two specific classes applied to it, eg ‘highlight’ and ‘mainpoint’?
.highlight.mainpoint { … }
Use a pseudo-class selector to style buttons on hover?
button:hover { … }
How do you style div and p the same?
div, p { … }
How to style 4th li in ul on hover?
ul li:nth-child(4):hover { … }
Add a style sheet to an html document
<head>
<link></link>
</head>
How can you reset browser style defaults?
Using CSS reset
Examples:
https://meyerweb.com/eric/tools/css/reset/reset.css
https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/reset.css
How to apply styling to every element?
- { … }
(called the universal or star selector)
How to prevent padding from making an element bigger?
box-sizing: border-box;
