CSS

FCC Challenge 36: Give a Background Color to a Div Element

In Free Code Camp Challenge 36 we learn to set a background color to a div element. You can set an element’s background color with the background-color property. For example, if you wanted an element’s background color to be green, you’d put this within your style element: .green-background { background-color: green; } Create a class…

Read More

FCC Challenge 20: Make Circular Images with a Border Radius

In Free Code Camp Challenge 20 we need to change the CSS border radius from px to % in order to display the image as a circle: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width:…

Read More

FCC Challenge 19: Add Rounded Corners with a Border Radius

In Free Code Camp Challenge 19 we can round out the corners by using border radius: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; } .smaller-image { width: 100px; } </style> <h2…

Read More

FCC Challenge 18: Add Borders Around Your Elements

In Free Code Camp Challenge 18 we’re using cascading style sheets to add a border to our image: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…

Read More

FCC Challenge 17: Size your Images

In Free Code Camp Challenge 17 we need to change the size of the image to 100px in the follow code: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on…

Read More

FCC Challenge 15: Specify How Fonts Should Degrade

In Free Code Camp Challenge 15 we’re specifying multiple fonts in case the preferred font (left-most) is not available. The browser should fallback to the next available font specified to the right: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; }…

Read More