FCC Challenge 18: Add Borders Around Your Elements
March 07, 2016
In Free Code Camp Challenge 18 we’re using cascading style sheets to add a border to our image:
[css]
CatPhotoApp
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
[/css]The modified code should look like:
[css]
CatPhotoApp
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
[/css]CSS borders have properties like style, color and width
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
[css]
[/css]
Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.
Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:
[html][/html]