3.3.2 Homepage Decor

This topic explains how to decorate a webpage using CSS, including adding background images, centering content, styling headings, and applying text decorations.

Definition

Homepage Decor: Homepage decor refers to the use of CSS to enhance the visual appearance of a webpage, including background images, text alignment, colors, and text decorations.

Core Concept

Homepage decor is like interior design for a webpage. Just as you would paint walls, hang pictures, and arrange furniture to make a room welcoming, CSS lets you add background images, center content, change colors, and apply text decorations to make a webpage visually appealing. A well-decorated homepage attracts visitors and makes their experience more enjoyable, just as a well-designed room makes guests feel comfortable.

Detailed Explanation

Styling the Body

As a first step to decorate the webpage, we define a style tag-pair in the body and add lines to change the color of 3rd level headings in the body to green.

Example: Styled Page with Background

```html <html lang="en"> <head> <title>Styled Page with Background</title> <style> body { background-image: url('background.jpg'); background-attachment: fixed; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } div { text-align: center; } h3 { color: green; margin: 0; } p { text-decoration: underline wavy; margin: 0; } </style> </head> <body> <div> <h3>Welcome to My Website</h3> <p>This is a sample paragraph with a wavy underline.</p> </div> </body> </html> ```

Explanation of CSS Properties

Body Styling:

Div Styling:

Heading (h3) Styling:

Paragraph (p) Styling:

Do You Know?

• fixed: Background image remains fixed.
• scroll: Background image scrolls along with the page.
• local: Background image moves with the content of the element.

• block: Used to span element to full width and starts on a new line.
• inline: Width of element is based on the content only.
• flex: Flexbox is to arrange items in a row or column such that items expand (flex) to fill up the additional space.

• flex-start: Aligns items to the start of the container (default).
• center: Items are centered within the container.
• space-between: Distributes items evenly, i.e., first item at the start and last item at the end.

• center: Items are set along the center.
• stretch: Stretches items to fill the container (default behavior).

Adding a Video Clip in Website

To add a video clip in a website, the `<video>` tag is used where you can define the clip size and how the clip should be available at the time when website loads up.

Example:

```html <html> <body style="text-align: center"> <h2 style="color: green">Pakistan's First Ever Win in International Football</h2> <p>Congratulations !!!</p> <video width="500px" height="500px" controls> <source src="fifa-win.mp4" type="video/mp4" /> </video> </body> </html> ```

• `<video>` Tag: Used to embed a video.
• `width` and `height`: Set the dimensions of the video in pixels.
• `controls`: Adds play/pause and volume controls.
• `<source>`: Specifies the video file and its type. MP4 is the most commonly supported video type across browsers.

Intermediate Level

• Background Image: `background-image: url('...')` sets an image as the background; `background-attachment: fixed` keeps it fixed while scrolling.
• Flexbox Centering: `display: flex; justify-content: center; align-items: center;` centers content both horizontally and vertically.
• Heading Styling: `color: green;` changes heading color.
• Text Decoration: `text-decoration: underline wavy;` adds a wavy underline.
• Video Embedding: `<video controls><source src="..." type="video/mp4"></video>` adds a video with controls.

These techniques make a webpage more engaging and professional.

Important Points

• - Homepage decor = CSS styling for visual appeal.
• - Background image: `background-image: url('...')`.
• - Fixed background: `background-attachment: fixed;`.
• - Flexbox centering: `display: flex; justify-content: center; align-items: center;`.
• - Heading color: `color: green;`.
• - Wavy underline: `text-decoration: underline wavy;`.
• - Video embedding: `<video controls><source src="..." type="video/mp4"></video>`.
• - `height: 100vh;` = full viewport height.

Remember

• - Background Image: `background-image: url('...')`.
• - Fixed Background: `background-attachment: fixed;`.
• - Flex Center: `display: flex; justify-content: center; align-items: center;`.
• - Heading Color: `color: green;`.
• - Wavy Underline: `text-decoration: underline wavy;`.
• - Video: `<video controls><source src="..." type="video/mp4"></video>`.
• - Full Height: `height: 100vh;`.

Common Mistakes

• - Forgetting the file path in `url()`: Ensure the image file is in the correct location.
• - Not using `margin: 0`: Default margins can cause unwanted spacing.
• - Forgetting `controls` in video: Without it, the video has no play/pause buttons.
• - Using wrong units: `100vh` is viewport height; `100%` is parent height.
• - Mixing up `justify-content` and `align-items`: `justify-content` is horizontal (main axis); `align-items` is vertical (cross axis).

Quick Revision

Homepage decor uses CSS to enhance a webpage's visual appeal. Key techniques include background images (`background-image`), fixed backgrounds (`background-attachment: fixed`), flexbox centering (`display: flex; justify-content: center; align-items: center;`), heading colors (`color`), text decorations (`text-decoration`), and video embedding (`<video controls>`). The `<style>` tag-pair is placed in the `<head>` section. These techniques make a webpage more engaging and professional.

60-Second Revision

• Background Image: `background-image: url('...')`.
• Fixed Background: `background-attachment: fixed;`.
• Flex Center: `display: flex; justify-content: center; align-items: center;`.
• Heading Color: `color: green;`.
• Wavy Underline: `text-decoration: underline wavy;`.
• Video: `<video controls><source src="..." type="video/mp4"></video>`.