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)