CSS Flashcards
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
How to make paragraphs use Times New Roman, Times or serif (in that order).
p {
font-family: “Times New Roman”, Times, serif;
}
How to select in CSS every first line of paragraphs?
p::first-line{
}
Apply the color red to body only for a screen size between 360px and 420px.
Hint: This is done with the help of and operator between the two.
@media all and (min-width:360px) and (max-width:420px) {
body { background-color : red; }
}
Use 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.
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
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 {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
When the browser’s width is between 600 and 900px OR above 1100px, change the appearance of DIV.
@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;
}
}Simple nav dropdown hidden until hover using just CSS
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>
Give a div a border. How many values does property get?
3 values
div{
border: 2px solid black;
}
border-radius: 5px 20px 5px;
5px top-left
20px top-right and bottom-left
5px bottom-right
border-radius: 30px/10px;
horizontal radius: 30px (more pronounced, “longer” radius along top/bottom sides)
vertical radius: 10px (less pronounced, “shorter” radius on left-hand side
border-radius: 50%;
Makes a circle.
Make a circle using border-radius
border-radius: 50%
How does the responsive meta tag work? What happens if you use a responsive meta tag on a site that isn’t responsive?
Here’s Bootstrap’s responsive meta tag:
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
You should also use the viewport meta if you are building a dedicated mobile site, so it’s not just for responsive sites.
If we use this parameter on a non-responsive site, the website will zoom to the top left corner, forcing the users to zoom out (just to understand where they are) and zoom in to the see the details. Not the best user experience, right?
What is the viewport?
Viewport — The visible area inside the browser window.
Write the HTML element of an image called photo.jpg. Use inline style to set the dimensions to 500px/600px (width/height)
<img></img>
Write the HTML element of an image called photo.jpg. Specify a width/height of 500px/600px using the width and height attributes of the img.
<img></img>
