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
Types of Positioning
Static: with default value, elements follow the normal flow of the document - not effected by top, bottom, left, and right properties
Relative: relative to its default position - setting top, bottom, left, and right properties will move the content from its original position
Absolute: relative to nearist positioned ancestor - removed from the normal flow, can overlap other elements - if there’s no ancestor, it uses the body
Fixed: relative to the viewpoint - it will always stay the same if the page is scrolled
Sticky: based on user’s scroll position, toggles between relative and fixed. Will act relative until it reaches the top of the page when scrolling and then remains fixed until you scroll back up
Z-Index
Determines the element’s position in a stack.
Default is 0
Properties for Animation
Transform:
Changes elements immediately
Can define the end state
Transition:
Animates elements over a specified duration
Can define beginning and end state
Animation:
Animates elements over a specified duration, can be looped.
Can define beginning, end, and all states in between
@Keyframes
Allows for defining multiple states
Flex Containers
Parent/Flex
declare display:flex to make an element a flex parent/container
display:flex only impacts direct children
elements inside a flex can be flex containers as well
Children/Flex Items
any direct children of an elemtn with display:flex are flex children/items
there are separate properties for containers and items
Why do you need to design multiple layouts
Many people visit websites on mobile devices
Many will continue to use the mobile version more often than the desktop
Width, height, and overall size of a desktop monitor are different vs. a mobile screen are quite different
A varierty of layout strategies are needed
Media Queries
Media Queries allow you to style two different sized sites
@media - the media query rule
(min-width: 600px) the condition for when the media query styles will apply
{…} the CSS styles to apply when the media query is in use.
First steps of designing
Wireframe - rough skeleton - just boxes
Mockup - fully designed - not code
Prototype - what you show the client before launch
Bootstrap
