rgrhgoah Basic CSS

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: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>

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: <style> .larger-image { width: 500px; } </style>

Style Multiple Elements with a CSS Class

Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element.

Use a CSS Class to Style an Element

Classes are reusable styles that can be added to HTML elements. Here's an example CSS class declaration: <style> .blue-text { color: blue; } </style> You can see that we've created a CSS class called blue-text within the <style> tag. You can apply a class to an HTML element like this: <h2 class="blue-text">CatPhotoApp</h2> Note that in your CSS style element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.

Style the HTML Body Element

Every HTML page has a body element. Add body to style to edit it

Change the Font Size of an Element

Font size is controlled by the font-size CSS property, like this: h1 { font-size: 30px; }

Use Clockwise Notation to Specify the Margin of an Element

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 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 an id Attribute to Style an Element

One cool thing about id attributes is that, like classes, you can style them using CSS. However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied. Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element: #cat-photo-element { background-color: green; } Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.

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.

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.

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.

Import a Google Font

To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. 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.

use CSS Selectors to Style Elements

With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. When you entered <h2 style="color: red;">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets. That's one way to specify the style of an element, but there's a better way to apply CSS. At the top of your code, create a style block like this: <style> </style> Inside that style block, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this: <style> h2 { color: red; } </style> Note that it's important to have both opening and closing curly braces ({ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.

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;

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

Adjust the Padding of an Element

all HTML elements are essentially little rectangles. Three important properties control the space that surrounds each HTML element: padding, margin, and border. 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.

Override Class Declarations by Styling ID Attributes

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. id takes precedence over class no matter what order

Override Styles in Subsequent CSS

classes will override the body element's CSS.

Change the Color of Text

do this by changing the style of your h2 element. The property that is responsible for the color of an element's text is the color style property. Here's how you would set your h2 element's text color to blue: <h2 style="color: blue;">CatPhotoApp</h2> Note that it is a good practice to end inline style declarations with a ; .

Inherit Styles from the Body Element

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.

Set the id of an Element

n 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: <h2 id="cat-photo-app">

Make Circular Images with a border-radius

n addition to pixels, you can also specify the border-radius using a percentage.

Give a Background Color to a div Element

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

Add Rounded Corners with border-radius

photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.