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:

cat nip
laser pointers
lasagna

CatPhotoApp

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:

CatPhotoApp

Indie Schriftstil: Specify How Fonts Should Degrade There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif. When one font isn't available, you can tell the browser to "degrade" to another font. For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica isn't available, you will specify it as follows: p { font-family: Helvetica, sans-serif; } Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords. To begin, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace. In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font. Note: If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font. Size Your Images CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width. For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use: Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.

CatPhotoApp

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:

CatPhotoApp

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; }

CatPhotoApp

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

EINEM ELEMENT EINE ID ZUORDNEN - DANN KANN MAN ES VON DER NAVI-LEISTE AUS ANSPRINGEN Set the id of an Element In addition to classes, each HTML element can also have an id attribute. There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript. id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute. Here's an example of how you give your h2 element the id of cat-photo-app:

Give your form element the id cat-photo-form.
thunder

other cats

Indoor PADDING ANPASSEN - HTML STILIEREN - BLAUE UND ROTE BOX Adjust the Padding of an Element Now let's put our Cat Photo App away for a little while and learn more about styling HTML. You may have already noticed this, but all HTML elements are essentially little rectangles. Three important properties control the space that surrounds each HTML element: padding, border, and margin. An element's padding controls the amount of space between the element's content and its border. Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more padding than the blue box. When you increase the blue box's padding, it will increase the distance (padding) between the text and the border around it. Change the padding of your blue box to match that of your red box. Lösung

margin

padding

JETZT KOMMT DER FARBWECHSEL DER BOXEN

margin

padding

Lösung .red-box { background-color: crimson; color: #fff; padding: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; } MARGIN - EINBETTUNG - ABSTÄNDE Adjust the Margin of an Element An element's margin controls the amount of space between an element's border and surrounding elements. Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller. When you increase the blue box's margin, it will increase the distance between its border and surrounding elements. Change the margin of the blue box to match that of the red box. .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 20px; NEGATIVES MARGIN Add a Negative Margin to an Element An element's margin controls the amount of space between an element's border and surrounding elements. If you set an element's margin to a negative value, the element will grow larger. Try to set the margin to a negative value like the one for the red box. Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it. .red-box { background-color: crimson; color: #fff; padding: 20px; margin: -15px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: -15px; }

padding

Add Different Padding to Each Side of an Element Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides. CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties. Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side.

margin

padding

Lösung .blue-box { background-color: blue; color: #fff; padding-top: 40px; padding-left: 40px; padding-bottom: 20px; padding-right: 20px } ALLE SEITEN UNTERSCHIEDLICHE MARGINS Add Different Margins to Each Side of an Element Sometimes you will want to customize an element so that it has a different margin on each of its sides. CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left properties. Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side. .blue-box { background-color: blue; color: #fff; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } NOTATION IM UHRZEIGERSINN Use Clockwise Notation to Specify the Padding of an Element Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties individually, you can specify them all in one line, like this: padding: 10px 20px 10px 20px; These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions. Use Clockwise Notation to give the .blue-box class a padding of 40px on its top and left side, but only 20px on its bottom and right side. .blue-box { background-color: blue; color: #fff; padding: 20px 20px 20px 40px; } WIRD ZU .blue-box { background-color: blue; color: #fff; padding: 40px 20px 20px 40px; } MARGIN Use Clockwise Notation to Specify the Margin of an Element Let's try this again, but with margin this time. Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties individually, you can specify them all in one line, like this: margin: 10px 20px 10px 20px; These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions. Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side. .red-box { background-color: crimson; color: #fff; margin: 20px 40px 20px 40px; } .blue-box { background-color: blue; color: #fff; margin: 40px 20px 20px 40px } ATTRIBUTE AUSWÄHLEN Use Attribute Selectors to Style Elements You have been adding id or class attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style. Let's bring out CatPhotoApp again to practice using CSS Selectors. For this challenge, you will use the [attr=value] attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio: [type='radio'] { margin: 20px 0px 20px 0px; } Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.

CatPhotoApp

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

Indoor Outdoor
Loving Lazy Energetic

LÖSUNG - CHECKBOX EINTRAGEN - NICHT radio .silver-background { background-color: silver; } [type='checkbox'] { margin: 10px 0px 15px 0px; } ABSOLUTE UND RELATIV ---- Understand Absolute versus Relative Units The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use. The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution. Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size. Note: There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section. Add a padding property to the element with class red-box and set it to 1.5em. .red-box { background-color: red; margin: 20px 40px 20px 40px; padding: 1.5em } Style the HTML Body Element Now let's start fresh and talk about CSS inheritance. Every HTML page has a body element. We can prove that the body element exists here by giving it a background-color of black. We can do this by adding the following to our style element: body { background-color: black; } Inherit Styles from the Body Element Now we've proven that every HTML page has a body element, and that its body element can also be styled with CSS. Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles. First, create a h1 element with the text Hello World Then, let's give all elements on your page the color of green by adding color: green; to your body element's style declaration. Finally, give your body element the font-family of monospace by adding font-family: monospace; to your body element's style declaration.
Hello World
Prioritize One Style Over Another Sometimes your HTML elements will receive multiple styles that conflict with one another. For example, your h1 element can't be both green and pink at the same time. Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property? Create a CSS class called pink-text that gives an element the color pink. Give your h1 element the class of pink-text.
Hello World!
Lösung
Hello World!
ÜBERSCHREIBEN VON STYLES - FARBEN - override Override Styles in Subsequent CSS Our pink-text class overrode our body element's CSS declaration! We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class? Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration. Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins. Applying multiple class attributes to a HTML element is done with a space between them like this: class="class1 class2" Note: It doesn't matter which order the classes are listed in the HTML element. However, the order of the class declarations in the
Hello World!
OVERRIDE Override Class Declarations by Styling ID Attributes We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put blue-text before pink-text in our h1 element's classes, it would still look at the declaration order and not the order of their use! But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes? Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id. Give your h1 element the id attribute of orange-text. Remember, id styles look like this:
Leave the blue-text and pink-text classes on your h1 element. Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like: #brown-text { color: brown; } Note: It doesn't matter whether you declare this CSS above or below pink-text class, since the id attribute will always take precedence. LÖSUNG h1 id="orange-text" class=" ........"
Hello World!

CatPhotoApp

CatPhotoApp

CatPhotoApp

CatPhotoApp

Hinweis--- h2 dann Freiraum dann class=

CatPhotoApp

CatPhotoApp

CatPhotoApp

CatPhotoApp

CatPhotoApp

CatPhotoApp

CatPhotoApp

Give your form element the id cat-photo-form. thunder other cats

margin

padding

padding

margin

padding

padding

padding

padding

margin

padding

padding

CatPhotoApp

Hello World

Hello World!

Hello World!

Hello World!

Hello World!

Give your form element the id cat-photo-form.
thunder

other cats