CSS Flashcards
Change the following text to blue with inline style
{h2}CatPhotoApp{/h2}
{h2 style=”color: blue;”}CatPhotoApp{/h2}
How do you make all h2 elements red
{style} h2{ color:red; } {/style}
Create a CSS class called green-text and apply it to a h1 element
{style} .green-text{ color:green; } {/style}
{h1 class=”green-text”} Hello world{/h1}
how do you change the font size of all h2 elements to 20px
{style} h2 { font-size: 20px; } {/style}
Set the font of all p elements to serif
{style} p { font-family: serif; } {/style}
Import the lobster font from https://fonts.googleapis.com/css?family=Lobster and use it on a p element
{link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”}
{style}
p { font-family: Lobster;}
{/style}
Set font of h2 element to Helvetica but degrade to sans-serif if it is not available
{style} h2 { font-family: Helvetica, sans-serif; } {/style}
create a class called super-wide that sets the width to 500px
{style} .Super-Wide{ width: 500px; } {/style}
create a class called smaller-image that sets the height to 100px
{style} .smaller-image { height: 100px; } {/style}
Create a class called thick-green-border that adds a 10px, solid green border around an element
{style} .thick-green-border{ border-color: green; border-width: 20px; border-style: solid; } {/style}
How do you add multiple classes to an element
{p class=”class1 class2”}
How do you make rounded border that is 10px
border-radius: 10px;
Make a border radius of 75%
border-radius: 75%;
Create class silver-color with background color of silver
{style} .silver-color{ background-color: silver; } {/style}
Give id element cat-photo-form a background color of green
{style} #cat-photo-form{ background-color: green; } {/style}
What are the properties that surround each html element
margin
border
padding