CSS Flashcards
CSS Rule
Selectors, Values, Properties, Declarations
div {
line-height: 1.8em;
}
above “div” is the selector
“line-height” is the property
“1.8em” is the value
and “line-height: 1.8em;” is the declaration
Selectors select which HTML elements we’re edditing
The Property is the thing we are styling about that element
The Value is how we are going to style it
The Declaration is made up of the Property and the Value
Class, ID, and Universal selectors
Select by class .class-name
Select by ID #id-name
Select everything *
(if you have class you’re on point -Dane Dawson)
Pseudo Selectors
Allow us to choose HTML elements in special states
\:visited \:hover \:nth-child() \:not \:after \:selection
Competing Rules and Specificity
If you style an element more than once, the most recent styling is the one that will show up
.nav {
color: gold;
}
.nav {
color: blue;
}
It’s gonna be blue
HOWEVER! There’s also a hierarchy. So if you style an h3 with an ID and then later you style all the h3s, the one with the ID will not change because it is more specific
- ID
- classes, attributes, and psudo-classes
- elements and pseudo-elements
Attribute Selectors
You can select an input with a specific type like this:
input[type=”text”]
and it will style all the inputs with a text type
Colors
CSS Color Names: 140 preset colors that you can choose by name (i.e. blue, pink, red, black)
Hex Codes: over 16million colors that are compatable with almost, if not all browsers. 0-9 and A-F, 0 is the least intense and F is the most - #00000000 is white #ffffffff is black, Value order is red, green, blue, alfa, can be 3-8 character long.
RGBA Colors: over 16million colors, can be manipulated by JavaScript, compatable with almost, if not all browsers, 0 is least intense, 255 is most, red=red, g=green, b=blue, a=transparency rgb(0,0,0) is white rgb(255,255,255) is black rgb(255,0,0) is red
Sizing
px=pixels
based on screen pixels
easy to understand
hard to keep consistent
%=percentage of parent container
good for browser resizing
works best with width
difficult to maintain a ratio
em
based on browser/user's default base font
default base is usually 16px so 1em=16px
most consitent
vw/vh=viewport
1vw is 1% of the viewport width
setting the hieght is more intuitive
sizing fonts with this is not recommendedFonts and Text
Everything has a default font so when in doubt use:
“serif”, “sans-serif”, “monospace”, or “cursive”
You can also import fonts for further customization
font-weight makes something thinner or bolder
Text customization and decoration can add strikethroughs, underlines, alignment, and shadow
Combinator Selectors
Grouping (combination) and descendant selectors
, = combination (will style everything combined)
{space} = all descendent children
> = a direct child
~ = all general siblings (div ~ p will modify all div elements that are siblings to all p elements)
\+ = an adjactent sibling (h3 + p will modify all p elements immediately after h3 elements)
Every HTML element has default box properties made up of:
Content: generally text, will adjust to the max width allowed by container or viewpoint, once it hits its max width, it will auto expand its height
Padding: Space around the content but still inside the container or viewpoint. It’s transparent
Border: wraps around the padding and content
Margin: space around the border
Using one value will set all four sides as the same first value: top(and bottom) second: right(and left) third (if applicable): bottom fourth: (if applicable): left
What does the total width include?
Border, Padding, and Content
display:block
takes up full width of viewpoint
cannot add anything adjacent
can decrease width and center
display:inline
Will be on the same line as other elements
Cannot adjust height or width - controlled only by content
display:inline-block
Inline with the ability to edit height and width
Box Model
The HTML element box
