CSS Foundations Flashcards
What does CSS stand for and what does CSS do?
Stands for Cascading Style Sheets and adds styling to a page like format, color, font size/type, etc. Basically, how a page looks.
What is the basic syntax of a CSS rule?
The selector: the name of the rule
The property: what part of the element is being changed
Value: how that part of the element is being changed
.sample {
font-weight: 700px;
}
(Selectors) What is the Universal Selector?
The symbol is * and takes the property and value and applies it to ALL elements in your code.
(Selectors) What are Type Selectors?
The selector is the name of a given element type like h1, p, div, etc. Used to apply properties to specific elements.
(Selectors) What are Class Selectors?
The selector that applies styles to elements if that element contains that class. Uses the class attribute which is applied to an HTML element’s opening tag.
You can name it whatever you think is fitting.
(Selectors) What are ID Selectors?
Similar to class selectors, selects an element with the given ID. Should be used sparingly and used only for taking advantage of specificity to style an element. Can only have one ID for an element and cannot be repeated on a single page.
(Selectors) What are Chaining Selectors?
The selector that chains selectors together without any spaces. ONLY class selectors and ID selectors can be used with this selector, with the exception of just one type selector. Used to take advantage of specificity and style specific elements easier.
(Selectors) What are Grouping Selectors?
The selector that groups styles together where the selector names are separated by a comma and put on a new line. Any property and values inside this selector will apply to the grouped selectors. Used to reduce repetition and declarations.
(Selectors) What are Descendant Combinators?
This combinator allows us to combine multiple selectors by using the parent/nesting relationship HTML utilizes. Used to take advantage of styling certain elements with certain selectors if they are nested inside of another element with certain selectors. Suggested to avoid due to how complex it can get.
(Font) What is the difference between a Font Family Name and a Generic Family Name?
Font Family Names (like Times New Roman) are presented using quotations (“ or ‘) because white space is between the words.
Generic Family Names (like sans-serif) do not require quotes, are lower case, and use hyphens if there are more than one word in the font name.
(Font) Why is it good to apply multiple fonts to your CSS?
Sometimes some fonts will not work with some browsers, so having back-up options for browsers to use is suggested.
Font Family Names tend towards the front of precedence and Generic Family Names are towards the back (as they aren’t widely preferred.)
(Image) Let’s say you have an image that is originally 250px tall and wide. What happens if you set the height to auto and the width to 500px? What does the value auto do in this case?
Adding auto to a height or width of an image while changing the size of the other property (height or width) will result in the image being changed proportionally. The height in this scenario will now be 500px as well.
(Cascade of CSS) What is Specificity?
The more specific CSS Declaration will take precedence over less specific ones. Specificity takes into account once conflicting declarations or tie breakers are present.
Example: ID > Class > Type > *
(Image) Why is it good to set height and width to an image even if you don’t plan on changing the original size of the image?
It’s suggested to add base height and width values to an image because the image may take longer to load in a website if that space isn’t already set for the image. If they’re not set, the image will take longer to load and all other elements will drastically change to fit the image once it loads in. It reserves the space for the image to load.
(Cascade of CSS) What is Inheritance?
Inheritance refers to certain CSS properties that are inherited by that element’s descendants when applied to an element. Typography based properties are usually inherited, while most others are not. However, when directly targeting an element, that direct rule always beats inheritance.
