Click here to view more cat photos.
Things cats love:
- cat nip
- laser pointers
- lasagna
Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Click here to view more cat photos.
Things cats love:
Top 3 things cats hate:
Click here to view more cat photos.
Things cats love:
Click here to view more cat photos.
BUCHSTABENGRÖSSE Change the Font Size of an Element Font size is controlled by the font-size CSS property, like this: h1 { font-size: 30px; } Inside the same SCHRIFTART SANS-SERIF Set the Font Family of an Element You can set which font an element should use, by using the font-family property. For example, if you wanted to set your h2 element's font to sans-serif, you would use the following CSS: h2 { font-family: sans-serif; } Make all of your p elements use the monospace font. GOOGLE FONTS IMPORTIEREN Design Basic CSS Import a Google Font In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library. Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL. So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge). To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening style element): Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example: font-family: FAMILY_NAME, GENERIC_NAME; The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge. Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the "Open Sans" font, but not to use the Lobster font. Import the Lobster font to your web page. Then, use an element selector to set Lobster as the font-family for your h2 element Lösung:Click here to view more cat photos.
FARBIGE RAHMEN UM ELEMENTE Add Borders Around Your Elements 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: Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo. Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:Click here to view more cat photos.
.thick-green-border { border-color: green; border-width: 10px; border-style: solid; } Also, we can add properties this way: .thick-green-border { border: 10px solid green; } RUNDE SEITEN MIT RADIUSANGABE Add Rounded Corners with border-radius Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius. You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px. Note: This challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class. .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 10px; } KREISFÖRMIGE BILDER Make Circular Images with a border-radius In addition to pixels, you can also specify the border-radius using a percentage. Give your cat photo a border-radius of 50%. .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } HINTERGRUNDFARBE Give 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 called silver-background with the background-color of silver. Assign this class to your div element. .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .silver-background { background-color: silver; }Click here to view more cat photos.
Things cats love:
Top 3 things cats hate: