CSS Properties

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

• Use CSS color properties to style your web pages
• Apply background styles to HTML elements
• Control how elements display on your page
• Change fonts to make your text look amazing
• Set the width and height of elements

:clipboard: Before You Start

Make sure you have:

• Completed the previous lesson on CSS Selectors
• EduBlocks open in your browser
• Your HTML elements ready to style

:information_source: Info What are CSS Properties? CSS properties are special commands that tell your web browser how to style HTML elements. Think of them as instructions that make your web page look colorful, organized, and beautiful! In EduBlocks, you'll use special blocks to add these properties to your elements.

:art: CSS Color

:information_source: Info What is CSS Color? CSS Color lets you add beautiful colors to your web page! You can change the color of text, backgrounds, borders, and more. It's like having a digital paintbrush for your website.

Colors make your website:

• More attractive and fun to look at
• Easier to read (like dark text on light backgrounds)
• Better organized (different colors for different sections)

You can specify colors in three ways:

• RGBA format - Mix red, green, and blue like paint!
• Hexadecimal notation - Use special codes for colors
• Built-in colors - Use simple names like "red" or "blue"

:emoji::emoji::emoji: RGBA Format

RGBA stands for Red, Green, Blue, and Alpha:

• Red, Green, Blue: Mix these three colors to create any color you want!
• Alpha: Controls how see-through your color is

Here's how it works:

• Each color (R, G, B) uses numbers from 0 to 255
• Alpha uses numbers from 0 to 1
• 0 = no color/invisible, 255 = full color
• Alpha: 0 = completely see-through, 1 = solid color

tip Try This! rgba(255, 0, 0, 1) = Bright red (solid) rgba(255, 0, 0, 0.5) = Bright red (half see-through)

#️⃣ Hexadecimal Notation

Hexadecimal notation uses special six-digit codes to create colors. It's like a secret color language!

How hex codes work:

• Always start with a "#" symbol
• Use 6 characters (numbers 0-9 and letters A-F)
• First 2 characters = Red amount
• Middle 2 characters = Green amount
• Last 2 characters = Blue amount

note Example #FF0066 = Bright pink!

• FF (maximum red)
• 00 (no green)
• 66 (some blue)

:art: Explore more colors here

:emoji: Built-in Colors

Built-in colors are the easiest way to add color! Just type the color name - no numbers needed!

Common built-in colors:

• Basic colors: red, blue, green, yellow, orange, purple
• Light colors: lightblue, lightgreen, pink
• Dark colors: darkred, darkblue, darkgreen
• Special colors: gold, silver, gray

tip Quick Tip Start with built-in colors when you're learning. They're perfect for testing your designs quickly!

:emoji:️ CSS Background

:information_source: Info What is CSS Background? CSS Background properties let you decorate the area behind your HTML elements. You can add colors, images, and patterns to make your web pages more interesting!

Here are four powerful background properties you can use:

Property & Block	What It Does
	Fills the background with a solid color
	Adds a picture as the background
	Controls if the image repeats like wallpaper
	Decides where the background image starts

note Background Tips

• Start with background-color for simple designs
• Use background-image to add photos or patterns
• Combine properties for amazing effects!

:emoji: CSS Display

:information_source: Info What is CSS Display? CSS Display controls how elements arrange themselves on your web page. Think of it like organizing toys on a shelf - some sit next to each other, while others need their own shelf!

The display property changes how elements behave. Let's learn about two important types:

• Inline :link: - Elements sit side by side, like words in a sentence
• Block :package: - Elements stack on top of each other, like boxes

:mag: Comparing Block and Inline

Inline :link:	Block :package:
Stays on the same line as other elements	Always starts on a new line
Example Output ⬅️ Click to see Block Output	Example Output ⬅️ Click to see Block Output

tip Remember This!

• Inline = Side by side (like friends holding hands)
• Block = Stacked up (like building blocks)

:pencil2: CSS Fonts

:information_source: Info What are CSS Fonts? CSS Fonts let you change how text looks on your web page. You can make text bigger, smaller, bold, italic, or use different font styles - just like in a word processor!

With CSS fonts, you can control:

• The style of text (like Arial or Times New Roman)
• How big or small the text appears
• Whether text is bold, italic, or normal

Font Properties in EduBlocks

Font-family - Choose your text style:

• Common fonts: Arial, Times New Roman, Verdana
• Fallback fonts: serif, sans-serif, monospace
• :books: Explore more font families here

Font-size - Make text bigger or smaller:

• Use pixels (px) for exact sizes
• Example: 16px (normal), 24px (big), 12px (small)

note Pro Tip Always provide backup fonts! If the first font isn't available, the browser will use the next one in your list.

:emoji: CSS Width and Height

:information_source: Info What are Width and Height? Width and height properties control how big or small your HTML elements appear on the page. It's like resizing a picture or a box!

You can set sizes for:

• Width - How wide an element is (left to right)
• Height - How tall an element is (top to bottom)

Using Width and Height Blocks

See It in Action!

Check out this example: Click to view the code

Sample Code	Output

tip Size Units Use pixels (px) to set exact sizes. For example:

• width: 200px (200 pixels wide)
• height: 100px (100 pixels tall)

:tada: Summary

Great job learning about CSS properties! You now know how to:

:white_check_mark: Add colors using RGBA, hex codes, or color names :white_check_mark: Style backgrounds with colors and images :white_check_mark: Control element layout with display properties :white_check_mark: Change text appearance with font properties :white_check_mark: Set element sizes with width and height

:rocket: Practice Time!

Try these challenges in EduBlocks:

1. Create a colorful heading using the color property
2. Add a background image to a div element
3. Make two spans display inline and two divs display as blocks
4. Change the font family and size of a paragraph
5. Create a box that's 300px wide and 200px tall

:wrench: Troubleshooting Tips

Having issues? Check these common problems:

• Colors not showing? Make sure you spelled the color name correctly or used the right format
• Background image not appearing? Check that your image URL is correct
• Elements not sizing properly? Remember to add "px" after your numbers
• Fonts not changing? Try using a common font like Arial first

:emoji: Real-World Connection

The CSS properties you learned today are used on every website you visit! When you see:

• Colorful buttons -> CSS color properties
• Background images -> CSS background properties
• Text in different fonts -> CSS font properties
• Elements arranged nicely -> CSS display properties

Keep practicing with EduBlocks, and soon you'll be styling websites like a pro! :art: