CSS Quiz
CSS comments
/* comment goes here */
Box border, margin, & padding (which is between content and border, which is between border and other elements)
- border: separates edge from one box to another - ex: div {border: 1px solid red;} - margin: sits outside edge of border and creates gap between borders of 2 adjacent boxes - padding: space between border and content inside -margin and padding is good for adding white space
Column Layouts (three ways to make them- floats, flexbox, CSS Grid)
- can position with width, margin, float - flex box starts with display: flex - css grid defines # of grid columns, rows, and spacing, elements inside follow columns and rows
Text weights, styles, decorations, and transforms
- font-weight: creates bold - font-style: creates italic - text-transform: change the cse of text like uppercase, lowercase, capitalize - text-decoration: underline text (underline, line-through)
How cascading works (multiple rules for the same elements)
- if multiple css rules apply to the same element - last rule: if 2 selectors are identical, the latter of the 2 will take precedence, applied in order - specificity: if 1 selector is more specific than the others, the more specific rule will take precedence over more general ones - style attribute > id > class > type
Anatomy of a CSS rule (define- selectors / declarations)
- selector: indicate which elements the rule applies to - declarations: indicate how the targeted elements should be styled - ex: p {font-size: 12 px} - type selector, class selector, id selector, descendant selector, direct child selector
Types of typefaces
- serif (times new roman), sans serif (arial), monospace (courier)
Box overflow
- show: shows overflowing content - hidden: hides extra content - scroll: adds scrollbar to scroll to see missing content
How to include CSS on a page
- <link> tag to include an external css file using the "href" attribute <link href="style.css" type="text/css" rel="stylesheet" />
What does CSS stand for, and what does it do?
- Cascading Style Sheet - allows you to edit and manipulate web pages - create rules how the content of an html element should appear
Box shadow
- adds drop shadow around a box - ex: box-shadow: -5px -5px black
Floating Elements
- allows you to take that element out of normal flow and position it to the far left or right of a containing box - the floated element becomes a block-level element around which other content can flow
Element positioning types
- static: default position where every block level element appears on a new line - relative: moves an element relative to where it would have been, doesn't affect position of surrounding elements - absolute: positions to nearest positioned ancestor, removes from normal document flow - fixed: position relative to browser window
Text alignment
- text-align: takes one of 4 values (left, right, center, justify)
How to specify fonts
- use font-family - need to specify fallback typefaces - ex: font-family: arial, Verdana, sans-serif
How to size fonts
- use font-size - can use %, em, or px
Box dimensions
- use height and width properties - takes %, em, or px - px is most accurate - em is sized based on text within it (good for flexibility) - % sized relative to size of browser window or containing box
Pseudo-elements and pseudo-classes
- use to specify different styles for the 1st letter or line of text inside an element - :first-letter or :first-line - can also use pseudo-classes to target diff types of links - :hover or :visited
Hiding boxes
- visibility property (hidden or visible)
Overlapping Elements
- z-index property - the higher the z-index, the more priority - only works for positioned elements
Color properties and value formats (including alpha value)
- color and background-color - RGB: between 0 and 255 - RGBA: indicate opacity along with RGB - alpha value: between 0.0 and 1.0 - HSL/HSLA: hue (0-360), saturation (0%-100%), lightness (0%-100%)
Changing Inline/Block
- display property (inline or block)