CSS Flashcards
(40 cards)
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
The code uses mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue.
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed.
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}When the browser’s width is between 600 and 900px OR above 1100px, change the appearance of DIV.
Drop-Down Menu
body { font-family: arial, sans-serif }
nav { font-weight: bold;
color: white;
border: 2px solid RoyalBlue;
text-align: center;
width: 10em;
background-color: RoyalBlue; }
nav ul { display: none;
list-style: none;
margin: 0;
padding: 0; }
nav:hover ul { display: block; }
nav ul li { border-top: 2px solid RoyalBlue;
background-color: whitesmoke;
width: 10em;
color: black; }
nav ul li:hover { background-color: PowderBlue; }
a { text-decoration: none; }
.... Menu
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>
Simple nav dropdown hidden until hover using just CSS
What are the values of the text-shadow property?
h1{ text-shadow: -4px 4px 6px dimgrey; }
1) horizontal offset - num pixels to left (negative) or right (positive) of text
2) vertical offset - num pixels shifted up (negative) or down (positive)
3) blur radius: in pixels, 0px would be sharp edge (no blur)
4) color: color of the text-shadow
border-radius property
Shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
border-radius: 50px 20px;
If two values are set; the first one is for the top-left and bottom-right corner, the second one for the top-right and bottom-left corner.
RGBA
RGBA (Red, Green, Blue, Alpha)
The value for each color—red, green and blue—can range from 0 to 255 . The alpha value– represents opacity—can be any value in the range 0.0 (fully transparent) through 1.0 (fully opaque).
What type of value is #00FFFF
Hexadecimal RGB. Each digit 16. So, 256-256-256 RGB
box-shadow property’s values
box-shadow property’s values: horizontal-offset vertical-offset blur-radius color
1) horiz: pixels to left (negative) or right (positive)
2) vert: pixels up (negative) or down (positive)
3) blur-radius: 0px sharp edge
4) color: box-shadow’s color
box-shadow: 25px 25px 50px dimgrey;
box-shadow with... right: 25px down: 25px blur-radius: 50px color: dimgrey
Selects the second <li> element in a list and make the text green.</li>
li:nth-child(2) {
color: green;
}
Selects every fourth element among any group of siblings and change text color to lime.
:nth-child(4n) {
color: lime;
}
Selects any <a> element when “hovered” and change it’s text color to blue</a>
hover psuedoclass
a:hover {
color: blue;
}Describe how negative margins work.
If you apply a negative margin to top or left, it will move element in that direction. If you apply a negative margin to bottom or right, it will pull any succeeding element into/over the main element to overlap.
What does p::first-line selector do?
::first-line is a pseudoelement. Allows you to apply styles to the first line of all p
What will this do?
#example:before {
content: "#";
}
#example:after {
content: ".";
}
It will place a # before #example and a . after.
What will this do?
@media all and (min-width:420px) {
body { background-color : red; }
}
@media all and (max-width:420px) {
body { background-color : black; }
}The min-width:420px will make the background red for screen size which is equal to 420px or greater than that and the max-width:420px will make the background black for the screen size equal to 420px or less than that.
What will this do?
@media all and (min-width:360px) and (max-width:420px) {
body { background-color : red; }
}
This will apply the color red to body only for a screen size between 360px and 420px. This is done with the help of and operator between the two.
What will the below css/html do?
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
@media screen and (max-width: 600px) {
.topnav a { float: none; width: 100%;
}
}
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>When the screen is less than 600px, the navigation menu will be displayed stacked vertically instead of horizontally next to each other.
What are the three types of font families? (What are the three generic families of fonts?
The generic families are:
Serif
Sans-serif
Monospace
Name two Serif fonts. What are Serif fonts good for?
Times New Roman
Georgia
Good for print.
Name two Sans-serif fonts. What are Sans-serif fonts good for?
Arial
Verdana
Good for screens.
What type of fonts are Monospace and give two examples.
All monospace characters have the same width.
Courier New
Lucinda Console
