Advanced CSS Flashcards
What property can be used to add a corner to each corner of a box?
border-radius
Example: border-radius: 20px;
Example: border-radius: 6px 12px 18px 24px;
Example: border-radius: 50px/100px;
How to create an ellipse with CSS?
Specify different horizontal and vertical radii by splitting values with a “/”
Example: border-radius: 50px/100px;
What is the standard CSS property to apply shadows to a box?
box-shadow
Example: box-shadow: 5px 5px 3px 1px #999
What are the possible box-shadow values?
box-shadow: 5px 5px 3px 1px #999
- ) horizontal offset – how far the shadow is nudged to the right (or left if it’s negative)
- ) vertical offset – how far the shadow is nudged downwards (or upwards if it’s negative)
- ) blur radius — the higher the value the less sharp the shadow. (“0” being absolutely sharp).
- ) spread distance — the higher the value, the larger the shadow (“0” being the inherited size of the box)
- ) color
- ) inset - apply shadows to the inside of a box
What is the standard CSS property to apply shadows to text?
text-shadow
Example: text-shadow: -2px 2px 2px #999;
What is the universal selector?
Using an asterisk (“ * ”), you can target everything.
Example: * { } Target everything on a page
Example: #contact * { } Target everything under this ID
What is a universal selector is commonly used for?
The universal selector is commonly used to “reset” many of a browser’s default styles.
What is a child selector?
A greater-than symbol (“>”) can be used to specify something that is a child of something else.
Example: #genus_examples > li { border: 1px solid red }
What is an adjacent selector?
A plus sign (“+”) is used to target an adjacent sibling of an element, essentially, something immediately following something.
Example: h1 + p { font-weight: bold }
What is the general sibling selector?
A general sibling selector uses a tilde (“~”) and will match an element following another regardless of its immediacy.
Example: h1 ~ p { font-weight: bold }
What does HSL stand for?
hue, saturation, and lightness
What is the a in RGBa?
Alpha, as in “alpha transparency”.
This allows you to set the transparency of a box or text.
Example: color: rgba(0,0,0,0.8);
True or False? Anywhere where you can use rgb, you can used rgba.
True
What is Hue, saturation, and lightness?
It gives you direct control over the aspects of a color’s shade rather than its logical ingredients.
Example: color: hsl(36, 100%, 50%)
- ) Hue from 0 to 360 on a color wheel
- ) Saturation from 0% to 100% or grey to full color
- ) Lightness from 0% (black) to 100% (white) 50% (normal)
What is HSLa?
HSLa combines hue, saturation, and lightness with alpha transparency
Example: hsla(0, 75%, 75%, 0.5)
They can be used to import other CSS files, apply CSS to a particular media, or embed uncommon fonts
At-Rules
What are the three types of At-Rules?
- ) @import
- ) @media
- ) @font-face
What is the @import rule used for?
This is used to bolt another stylesheet onto your existing one. @import rules must be placed at the top of a stylesheet.
Example: @import url(morestyles.css);
What are media rules?
@media can be used to apply styles to a specific media, such as print
Example: @media screen, projection { }
How would you embed fonts in a web page so that a typeface can be used even if it isn’t sitting on the user’s computer?
The at-rule @font-face
Example:
@font-face {
font-family: "font of all knowledge";
src: url(fontofallknowledge.woff);
}
What are attribute selectors?
Attribute selectors allow you to style an element’s box based on the presence of an HTML attribute or of an attribute’s value
Example: abbr[title]
Example: input[type=text]
Example: input[type=text][disabled]
Example: [attribute^=something] (starts with something)
Example: [attribute$=something] (ends with something)
Example: [attribute*=something] (contains something)
_______ allow you to easily animate parts of your design without the need for JavaScript.
Transitions
Example:
a:link {
transition: all .5s linear 0;
color: hsl(36,50%,50%);
}
a:hover {
color: hsl(36,100%,50%);
}
What is the difference between transitions and states?
States: Binary animations are either on or off
Transitions: Smooth animation, slowly transitioning from state to state
True or False? You can apply multiple background images to a single element.
True.
Example:
background-image: url(this.jpg), url(that.gif), url(theother.png);
The ________ property allows you to stretch or compress a background image.
background-size
The _____ property defines where the background area of a box actually starts
background-origin
What provides powerful manipulation of the shape, size, and position of a box and its contents?
Transforms
Example: transform: rotate(-10deg)
Example: transform: skew(20deg,10deg);
Example: transform: scale(2);
Example: transform: translate(100px,200px);
Example: transform: rotate(-10deg) scale(2);
Manipulating a box over two dimensions, transform can be used to do what 4 things?
- ) Rotate - Turn the box
- ) Skew - Tip the horizontal and vertical
- ) Scale - Change width and height
- ) Translate - Shift a box horizontally and vertically
What does the matrix function do?
Combines transforms into one function – rotating, skewing, scaling, and translating.
________ are used to show a smooth dissolve from one color to another.
Gradients
What are the two types of gradients?
Linear and Radial
Example: background: linear-gradient(yellow, red);
Example: background: radial-gradient(yellow, green);
Example: background: repeating-linear-gradient(white, black 15px, white 30px);
_______ enable you to specify different design choices depending on screen size?
Media Queries
What do media queries target?
Mobile phones, tablets, and varying browser window sizes
What type of screen sizes do media queries target?
1.) Browser-size
Example: @media screen and (max-width: 1000px) { }
2.) Orientation-specific
Example: @media screen and (orientation: landscape) { }
Example: @media screen and (orientation: potrait) { }
3.) Device-specific
Example: @media screen and (min-device-height: 768px) and (max-device-width: 1024px) { }
