Skip to content
Tech for Everyone

Adding Style with CSS

Read Aloud with Speechify Practice with Kahoot Open Journal with Inkblok Play Online Game

What is CSS?

CSS stands for Cascading Style Sheets. While HTML gives a webpage its structure, CSS is what makes the webpage look nice. It changes the way elements like headings, paragraphs, and lists look on the screen. CSS allows you to:

  • Change the colors of text and backgrounds.
  • Change the font (the style of the letters).
  • Adjust the size and alignment of text.

Without CSS, every webpage would look very plain and simple, with no colors or special fonts. CSS helps us make webpages more attractive and easy to read.

Why is CSS Important?

Imagine building a house. HTML is like putting up the walls and roof—it gives the house structure. But CSS is like painting the walls, adding furniture, and decorating. It’s what makes the house feel welcoming and comfortable. CSS does the same for a webpage by:

  • Making it look beautiful with colors and fonts.
  • Organizing the content in a way that is easy to read.
  • Helping to create a unique style for the webpage.

How to Use CSS Blocks in EduBlocks

In EduBlocks, you can use CSS blocks to change how different parts of your webpage look. Let’s explore some of the most important CSS blocks:

CSS Block: Background Color

  • What it does: Changes the color of the background.
  • How to use it: Drag the Background Color Block and select a color to fill the entire background of the webpage.

CSS Block: Text Color

  • What it does: Changes the color of your text.
  • How to use it: Drag the Text Color Block to change the color of headings, paragraphs, or any text on your webpage.

CSS Block: Font Style

  • What it does: Changes the style of your text (for example, you can make it look fancy or simple).
  • How to use it: Drag the Font Style Block to change the appearance of the text on your webpage.

CSS Block: Font Size

  • What it does: Adjusts the size of the text to make it bigger or smaller.
  • How to use it: Drag the Font Size Block and choose the size of your text.

CSS Block: Alignment

  • What it does: Adjusts the alignment of the text (you can center it or move it to the left or right).
  • How to use it: Drag the Text Alignment Block to change where the text is positioned on the page.

Creating a Styled Webpage with CSS Blocks

Let’s now add some style to the webpage we built in the last chapter. Here’s how:

Step 1: Open Your Previous Webpage

  • Open EduBlocks and load the webpage you created about your favorite animals.

Step 2: Add a Background Color

  • Drag the Background Color Block onto the workspace.
  • Select a color for your background, like light blue or light green.
  • This will change the entire background of your webpage.

Step 3: Change the Heading Color

  • Drag a Text Color Block and attach it to your Heading Block.
  • Choose a color like dark blue for the heading text.

Step 4: Change the Font Style

  • Drag a Font Style Block and attach it to your Paragraph Block.
  • Choose a fun font style like “Comic Sans” or “Arial.”

Step 5: Adjust the Font Size

  • Drag a Font Size Block and attach it to your paragraph or list block.
  • Choose a larger size for the paragraph to make it easier to read.

Step 6: Align the Text

  • Drag a Text Alignment Block and choose to center the text in your webpage.
  • Now, your text will be neatly placed in the middle of the page.

Step 7: Preview Your Styled Webpage

  • Click the Preview button to see your webpage with all the new styles.
  • Notice how the background, text color, font style, and size have changed!

Understanding CSS Properties

CSS lets us control different properties of elements on the webpage. These properties define how the elements look and behave. Here are some key properties we used:

  1. Color: Changes the color of text or background.
  2. Font-family: Changes the font style of the text.
  3. Font-size: Adjusts the size of the text.
  4. Text-align: Aligns the text to the left, center, or right of the page.

Activity: Styling a Webpage

Now that you know how to use CSS blocks, let’s practice making your webpage look even better!

  1. Open EduBlocks and load the webpage you made about your favorite subjects in Chapter 2.
  2. Use the Background Color Block to change the background of the page.
  3. Change the text color of your heading and paragraph using the Text Color Block.
  4. Experiment with different fonts using the Font Style Block.
  5. Adjust the size of your text using the Font Size Block.
  6. Align your text to the center or right using the Text Alignment Block.
  7. Click Preview to see how your webpage looks with all these styles!

What Have We Learned?

In this chapter, we learned how to use CSS blocks to add style to our webpages. You now know how to:

  • Change the background color of a webpage.
  • Adjust the color, font style, and size of text.
  • Align text to make it look organized.

CSS is a powerful tool that makes webpages look nice and easy to read. By combining CSS with HTML, you can create beautiful and functional websites!

Activities

  1. Create a Fully Styled Webpage:
    • Use EduBlocks to create a webpage about your favorite hobby. Add a background color, change the text colors and fonts, and adjust the size of your text.
  2. Experiment with CSS:
    • Try using different colors, fonts, and alignments. What happens when you make the text very big or very small? How does the page look with different background colors?