Section 1
Preview this deck
what is media query
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
1
All-time users
1
Favorites
0
Last updated
1 year ago
Date created
Mar 1, 2020
Cards (231)
Section 1
(50 cards)
what is media query
allows layout to respond to many solutions
what is the rel value for a css file
rel="stylesheet"
creating a style sheet
file: new file -> name file.css
class selector looks like?
<div class="example">
do you put the @import into your css file?
yes keep it at the top of the css file so all you would have is @import "css/example.css";
what is a descendent selector
if you have a <span> nested inside a <header> you would create your css file to look like header span { }
keywords
words such as "center or none" etc
@media screen and (min-width: 480px) { {
This is saying that if it is a media scree (iphone, ipad) and the minium width hits 480 px it should create a break point 480 px is usually a breakpoint for smart phones
can an element also have multiple classes assigned to it?
yes
rel attribute stands for what?
the relationship between documents
How do you ensure when someone clicks on a link that it goes to the right page (ex: click on the "about" from the "contact us"
you change the class="selected" everytime you create a new page <a href="contact.html" class="selected">Contact Us</a></li?
what is a selector
the part that targets html elements, targets the element we actually want to style
what makes up a css rule?
the selector and declaration block
how are class selecters identified
defined with the "." character defined by the class name
what it means to write inline styles CSS
writing the style directly into the HTML document via style attributes
when linking a css file what does the href value do
points to the location of the css file
what is a css import statement @import?
allows us to link to a style sheet, we can import css from other style sheet.
three part of a responsive web design
Fluid images, fluid grids, media queries
hexadecimal numbers RGB
First two are red, middle are green, last are blue
pseudo-classes can
target elements dynamically based on user interaction, an element's state, and more.
how do you tag an ID in an element
<div id="primary" >
max-width
want width to be no larger than X across but it could be smaller
if you have margin '5px, 0, 0, 0' how are the 4 formatted
top right bottom left
how do you set a new media query
@media screen and (min-width: "pixel size") { }
what does the css link look like in the head section
what is a declaration block
{ X: Y'}
can multiple elements share the same class
yes
what is the property inside a deck block and what is the value
the property { X <--- indicates the part of the element we want to change and the value describes how we want to change it
What is the purpose of responsive design?
allows for the same code to work on multiple screen resolutions
difference between id or class selectors
id's only select on element while class can used to classify more than one element
what to you use to select the id element of something?
# expl #content {}
<li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=z_strauss">@z_strauss</a></li> * What does this do?**
will create a @Z_Strauss on the website page and then when you click on it, it will allow you to tweet right at me
what does the universal selector look like?
It is an asterisk * {}
where do you link a css style sheet?
in the head section
margin 0 auto
auto sets margin to a specific width
can you apply both a class and ID to an element
yes
what is a universal selector?
selects every element on the page at once and applies the value to all of them
class selectors let us target elements based on their
class attribute
how do you setup @import
in the head create a <style> then @import "INSERT CSS FILE"; </style>
first way to make a website responsive
ensure that all the "widths" are 100% and not pixels
external style sheet
can change look with just one file
480 px break point and 660 px break point
480 is typical for smart phones and 660 for tablets
what is a type selector
selects and element type on the page, example <h1>, <p> etc
what does a div tag do?
it defines a division or section in a HTML element ex <div> <h3> Hello </h3> </div>
example of a pseudo-class
selector: pseudo-class { }
what does a full css link file in the head look like?
<link rel="stylesheet" href="css/style.css">
what is the purpose of media quieries
allow page elements to be adjusted based on width of the page
1 em is equal to what font size in browser?
16 font size (1.5 Em would be 24pt)
what does the id attribute do
The id attribute specifies a unique id for an HTML element
internal styles
embedded in the head section of the html using style tags
Section 2
(50 cards)
what is unique about a rem unit
it is only relative to the root element of the page (the html) element, rem units help us out of a pinch when font sizing an em starts to compound
if we apply padding to two values (padding: 100px, 20px
first value is applied to top and bottom, second is applied to left and rigth
how to give custome line heights to decrease vertical space if it is too large
font properties let us do what
let us assign font family, font size, font style ex font-family: sans-serif;
pixel units
used for length, always fixed and do not scale typically an abstract reference unit
what is a "font stack"
including multiple fonts to be viewed in a browser so for example font-family: Helvetica, Arial, sans-serif;
other common data types?
integers, numbers, percentages
relative lenth unit most commenly used measurement tag is?
em --- this is called a font relative unit
the innermost part of the 4 parts of the box holds what
the content area, containing elements actual content, text and actual image
what two items must be defined when using the font shortcut
the font family and font size
percentages
always releative to something else, adjusts based on the parent elements
compenents that make up a css box model
boxes are certain amount of space that elements take up each element is made up of a box
what does text-align: justify; do?
gives our text equal width, similar to a book or magazine alignment
type of length unit data types
pixels, ems ,rems
besides the hexadecimal way of establishing colors (#ff0099) or #f09 how else can you establish rgb?
color: rgb( 111, 333, 111)
the line decoration allows us to do what
remove underlined links of elements, etc
line height defines what
the vertical spacing between lines of text, you can increase and decrease the gaps of text
1em is equivelant to how many pixels
16 pixels
what are web safe fonts
fonts that are viewable from all types of browsers and operating systems
in a font stack, if a font family name is more than one word what do you do?
put it in quotation marks ex font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
the second innermost part of the 4 part box is
the padding area
the border area is
the outermost part of the box
to create transparancy or opaque looking colors you create the alpha of rgb and that looks like...
color: rgba (233, 333, 333, .5);
when defining a fluid padding value you use
percentages
what is the shortcut to define all types of the font at once (weight, size, height, family)
example: font: normal 1em/1.5 "Helvetica Neue", Helvetica, Arial;
inline elements take up how much space
only take up as much width as they need to
if you apply padding to three values (padding (100px, 120px, 100px)
the first value is applied to the top, the second value is applied to the left and right, and the third value is applied to the bottom
the padding are
gives the content some breathing room by seperating content from surrounding border area
how do you add a comment in CSS
/ This is a comment /
Rem unit stands for what
root em
a value can be described as a
number, length, image, url
block elements
form a seperate block that take up the full width available based on width of the parent element, and it creates a new line before and after element
example of inline elements
span tags, images, anchor elements
what two ways elements are displayed in the box model
blocks or inline
example of block elements
divs , paragraphs, any heading tag or list items
the padding creates space ______ the box and the margin creates space ______ outside the box
inside, outside
the margin is actually outside of the box and does what
is space around the element that seperates it from other areas
in the shorthand padding value if we only define one value what happens (padding: 100px)
the padding is applied on all sides
the rgb model stands for
red green blue
text align lets us control what
the horizontal alignment of text
padding values can be defined two ways
as any length or percentage values
rems are more predictable then ems because they always relate back to the _______ element
root element typically (html)
the text-transform value allows us to do what
create uppercase and lowercase values for our text text-transform: uppercase; (lowercase or capitalize
the shorthand property for padding looks like ____ and is followed in what order?
padding: top, right, bottom, left;
when defining padding via percentages it is important to remember that percentage is relateive to the total ____ of the container
width, not the height
it is typically best practice to define line-height by
unitless numbers example -- 1.5, this means the browser will multiply the font size of each element by 1.5 to determine the line hegiht
removing the underline from a link requires a text-_____
a:visited { text-decoration: none; }
what is a data type?
fancy way of saying type of css value
the "box" in the box model makes up of ___ distinct sparts
four
text styles
Section 3
(50 cards)
ordered list usually display a _____
numbered list
two ways to reverse the color order of a gradient?
(to top, color 1, color 2) or just reverse the colors
shorthand for border radius
border-radius: and goes from left right bottom left and bottom right
inside the :nth-child() what does the expression values look like
:nth-child(an+b)
what does background-image: cover; do?
tells you that it will cover the background at a scaled size
what character defines the "begins with" selector?
^ ** example a[href^="http"] { }
gradients add depth to designs by making a smooth transition two or more what?
colors
how to change your media viewport do display nicely for mobile
in <head> create a meta tag <meta name="viewport" content="width=device-width">
what font format created by mozilla is supported by all modern font browsers
WOFF
text shadow format has 4 rules (x, x, x, x)
horizonal px, vertical px, blur, and color
what is a color stop?
color stops are stopping point in a gradient that sshow a specific color at the exact location we decide it to be
how do you change the type of list style
list-style-type: square;
the ~ targets what?
the immediate sibling and every specified sibling that follows
how do you stop a background image from repeating
background-repeat: no-repeat;
with the display property, can you override the default display settings of an element?
yes
the > is known as what type of combinator? and the selectors that use them are called
child combinator, child selectors
how do you cover an image in a gradient?
background: linear-gradient(#ffa949, transparent 90%), #ffa949 url('../img/mountains.jpg') no-repeat center;
the + combinator is known as an
adjacent sibling combinator becuase they target the next sibling on the page
how to add an inner shadow in a box shadow (keyword_
inset
google developer tools in chrome
allows you to inspect your element in greater detail
how do you select a class with the attribute selectors?
[class="class-type"] { }
can max-width 100% for an img create responsiveness and fluidity
Yes img { max-width: 100% }
what character defines the "ends with" selector?
$ *** example a[href$="http"] { }
with the text shadow property you are able to add
drop shadows to text
applying rounded corners to a div (the process)
border-top-left-radius: 50px; border-top-right-radius: 10ps; border-bottom-right-radius: 50px; border-bottom-left-radius: or a percentage
setting an element to max-width does what?
prevents the element or content from being wider than it needs to be
the inset value must be declared either ____ or _____ in a box shadow
first or last
how do you add an attribute selector to change a cursor to pointer? if the element is input and type is button?
input[type="button'] { cursor: pointer; }
The "contains" substring matching attribute selector targets an element containing the piece of code we define anywhere in an attribute's value, the contains selector appears as an ____
asterisk *
what is the setup look like for a :nth-child if you want to highlight only the even number lines
li:nth-child(even) { }
when you set a gradient to radial-gradient what does it do?
you get a gradient that starts in the center
what does the :only-child or :empty elements
you can target an element if it is the only child of an element or target elements that have no child
begins with and ends with does what
what 3 symbols can you use to be a combinator?
> + ~
to give the gradient more circular shape what do you put in front of the two colors?
(circle, red, blue)
when an element is floated it is taken out of the normal flow of the page and placed along the _ or _ side of the container depending on the float value we set
left and right
box sizing property alternates what
the way the browser calculates the elements total height and width
:first-child :last-child does what?
targets the first or last child of an parent element
if you set an even border radius what do you need to do
just put on pixel value for all of it
unordered lists typically display a ______ style list
bulleted
what is the value to change background positions
background-position: center;
if you want to make a gradient go from right to left what do you do
simply input (to right or to left, before the two colors
:nth-child does what
can target any child position within a parent element
anytime you need a containing element cleared, give them a class _____
group
overflow: auto; allows you to ____
clear your floats and the browser is able to account for the height of the floated columns and the div is not collapsed
how do you define a linear gradient?
: linear-gradient(color 1, color 2);
attribute selectors can also have a element in front of it?
correct input[class="type"] { }
how do you target the first or last child of a list element?
li:first-child { } or li:last-child { }
the 4 most common types of display properties
none, inline, block, inline-block
what does an+b mean
a and b are always represented by numbers and n never changes
Section 4
(50 cards)
the main axis is the ___ axis and the cross axis is the ____ axis
X access, Y access
::first-line
selects the first line of text
if you do -webkit-justify-content: flex-end; what does that do?
moves all your list items to the right and creates good space for them
The column-rule property is shorthand for which properties?
width, style, color
the b value in an+B do
tells the browser that is first number we want to selece
The elements inside a flex container are called:
flex items
how do you control the direction of an item once it is in flex?
{ -webkit-flex-direction: ; }
::first-letter
selects the first letter of text
transition-duration: ;
describes the transition animations
the -webkit-order: property does what?
allows you to align certain boxes different ways using integers
what is the default value of flex direction?
row
the :target selector
selects the element when the element is the target of the link
the -webkit-column-rule has a shorthand that goes
width, style, color
the default direction of the main axis is ____ to _____
left to right
in transition-duration how is the animation measured?
in seconds example 0s
the a value does what in an+b
tells the cycle of list items it should select after taht
transition-property: ;
describes how an element transitions through something
transition-timing-fuction does what?
allows you to set the interval times when an element transitions
if you select and individual child and set it to margin-right: auto; what will happen
all the list items will be pushed to the right besides the one child that you signaled ex .nav li:first-child { margin-right: auto; }
the flex container includes things such as ____ items
flex items
Give the .badge element a transform that rotates it 15 degrees counterclockwise and moves it down 50px.
.badge { -webkit-transform: rotate(-15deg) scale(50px) }
what happens if you do (-n+4)
it would highlight only the first 4 items on the list
can a transition property define more than one values?
yes { transition-property: background; border-radius; }
the -webkit-column-rule property includes what types of values?
width, style, color
-webkit-align-self: center; does what?
vertically aligns elements in the flex item they are in
the integer after the "-webkit-column-count: " states what?
how many columns you will break up your stuff into
::before and ::after
insert virtual elements
the ___ ____ determines how much a flex item will grow, relative to the other flex itmes
flex-grow
Which of the following declarations will evenly distribute the space between flex items
justify-content: space-between;
how do you call the flex-grow property in CSS?
-webkit-flex-grow: ;
how to you display a class/parent/id as flex?
.nav { display: -webkit-flex; }
The" :nth-of-type "pseudo-class targets an element based on
its position within a parent, but only if it's a specific type of element.
the -webkit-column-span property will do what?
span an element across all of the columns in the container
the flex wrap property does what?
creates multi line containers so your columns fit as you shrink your page
In the transition shorthand property, the second time value is considered the _______value.
transition-delay
what does the flex wrap property look like in CSS
{ -webkit-flex-wrap: wrap; }
the justify-content property adjust the positions of flex items on the ____ axis
main
flex-grow: takes integers that talk about the ratio of freespace that should be taken by list items (1) or you can use the property ____
1 makes them take up all the same space flex
everything in flexbox is ______ to the X and Y axis
relative
a flex child is inside a flex item of a _____ container
flex
you can create gaps in your webkit-column-counts by?
using the "gap" property -webkit-column-gap: 3em;
Which property defines borders between each column?
column-rule
Create a transition for the border-radius property of .box. Give the transition a duration of .6 seconds, a delay of 1 second, and a timing function that maintains a linear motion.
-webkit-transition-property: border-radius; -webkit-transition-duration: .6s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear;
what is the default value for -webkit-align-self?
stretch, this makes all the elements the same height
what does the :not() selector do
allows you to "not" select a certain element or child
how would you setup to justify content?
{ -webkit-justify-content: "Value"; }
how do you define a multi column layout in CSS (using webkit)
-webkit-column-count: INTEGER
the translate() function allow us to move an element on the __ ___ or ___ axis
x, y, or z
the default direction of the cross axis is ____ to _____
top to bottom
flexbox has a concept of two axis - the ____ axis and the _____ axis
main and cross
Section 5
(31 cards)