CSS properties for Background Color and Text Alignment

Lesson 14

The lecture teaches you how to change the background color of a paragraph element. You also learn how to change the text alignment so the paragraph text becomes centered.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

## Summary of Background Color and Text Alignment in CSS

In this tutorial, we learned how to change the background color of an element using CSS. Here are the main points discussed:

1. **Background Color**:
   - Use the property `background-color` followed by a colon, the color value, and a semicolon.
   - Example: `background-color: black;` will change the background color to black.
   - For better readability, it is recommended to place each property-value pair on a new line. 
   - It is a good practice to include a space after the colon, although it does not affect the outcome.

2. **Targeting Elements**:
   - To apply styles to specific elements (e.g., paragraphs), specify the element name (e.g., `p`) before the styling rules in curly braces.
   - Example: 
     ```css
     p {
         background-color: black;
     }
     ```
   - This code will apply the background color to all paragraph elements in the document.

3. **Text Alignment**:
   - To center text within an element, use the property `text-align` with the value `center`.
   - Example: 
     ```css
     p {
         text-align: center;
     }
     ```
   - In CSS, properties are named using lowercase letters and hyphens to separate words (e.g., `text-align`).

In summary, CSS allows you to style elements by defining properties like `background-color` and `text-align`, making it crucial to follow proper syntax and conventions for effective coding.

Video Transcript

Okay, now I'm going to talk about background color. We learned how to change the color of the text. What about the background? Now that's easy, just say background-color. So to add another property to target all the piece, you can just type it here next to it or before. So if you type background color, colon, remember it's always the same thing. Name of the property, colon, type of value, and semicolon. I can say, let's say the background color, let's do black, semicolon. By click-run, you can see the background's turned black. So, you know, paragraph background color is now black. Now this is okay to have it next to each other, but it's a little bit harder for us to see. So for styling purposes, the computer doesn't care. It's more for us when we read the code. I like to always have one property, pair, per line, so I'm going to break a line there. And like I told you before, I always like to have a space after the colon. It works the same way. It will not have any effect on what we see, the outcome. Okay, so summarizing again. First, you need to target something in the document. When you say the name of the element, that means all of the elements that are P in this document will have the following property specified between the opening or closing curly braces. We always write the property name, colon, value, semicolon, and then repeat as needed. So continuing, let's talk about other properties. Let's align this text here in the center. I know it might be hard for you to see. Let me change the color to red. So to align the text, the name of the property is text-align. And then the value is several values. One of them is center. So notice when we write CSS properties, we separate the words by a dash, and they're always lowercase. That's a naming convention. They'll always be like that in CSS. Now, click Run. You can see now that the paragraph is centered about this whole line. So the paragraph itself, it takes space of the whole row, the line. And if you want to align at the center, you use that property.