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);
