Scribd
Upload
15 views6 pages

Web Design Worksheet 6

The document provides an overview of CSS properties related to text colors, backgrounds, and borders, including how to set background colors, text colors, and border styles. It includes examples for each property and explains how to use background images and their repetition. Additionally, it outlines exercises for testing CSS text colors, backgrounds, and borders.

Uploaded by

Adrian James Paul Cabrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views6 pages

Web Design Worksheet 6

The document provides an overview of CSS properties related to text colors, backgrounds, and borders, including how to set background colors, text colors, and border styles. It includes examples for each property and explains how to use background images and their repetition. Additionally, it outlines exercises for testing CSS text colors, backgrounds, and borders.

Uploaded by

Adrian James Paul Cabrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

(Cascading Style Sheets (CSS))

CSS TEXT COLORS

1: CSS Text Background Color:


• You can set the background color for HTML elements
• Use background-color property to specify the background color of an element.
• E.g. <h1 style="background-color:DodgerBlue;">Dodger Blue</h1>

Dodger Blue
E.g.

2: CSS Text Color:


• You can set the color of text for HTML elements
• Use color property to specify the color of an element.
• E.g. <h1 style=" color: DodgerBlue;"> Dodger Blue </h1>

E.g. Dodger Blue

3: CSS Text Border Color:


• You can set the color of border for HTML elements
• Use border property to specify the border of an element.
• E.g. <h1 style=” border:2px solid DodgerBlue;”>Dodger Blue </h1>

Dodger Blue
E.g.
CSS BACKGROUNDS

1: CSS Background Image:


• You can set the background image
of your website.
• By default, the background image
repeats an image both horizontally
and vertically to fill the page.
• Use background-image property to
specify the image to use.
• E.g. body {background-image:
url(“paper.gif);

2: CSS Background Repeat:


• Some images should only be repeated either horizontally or vertically or only once.
• To repeat horizontally, use: background-repeat: repeat-x;
• To repeat vertically, use: background-repeat: repeat-y;
• To show image only once, use: background-repeat: no-repeat;
- To position the single image on a specific part of the page, use: background-position
Repeat-x (Horizontal) Repeat-y (Vertical)

No-repeat (Show Once) Background-position: Top Right


CSS BORDERS
1: CSS Border Style:
• The border-style property specifies what kind of border to display.
• The border-style property can have 1-4 values (top, right, bottom, left).
• Here are the different types of styles:
- Dotted
- Dashed
- Solid
- Double
- Groove
- Ridge
- Inset
- Outset
- None
- Hidden
- Mix

2: CSS Border Width:


• The border-width property specifies what kind of border to display.
• The width can be set as a specific size (px, pt, cm) or defined values (thin, medium, thick).
• 4 Specific Side Widths can be activated (top border, right border, bottom border, left border).
3: CSS Border Color:
• The border-color property is used to set the color of the 4 borders.
• 4 Specific Side Colors can be activated (top border, right border, bottom border, left border).
• The “border-color” property does not work if used alone. Use “border-style” to set borders first.

EXERCISE 1: Testing of CSS Text Colors!


• Type the codes below in the editor, save it in a new folder “Lesson 6”, file name “TextColors.html”.

EXERCISE 2: Testing of CSS Backgrounds!


• Type the codes below in the editor, save it in folder “Lesson 6”, file name “CssBackgrounds.html”.
EXERCISE 3: Testing of CSS Borders!
• Type the codes below in the editor, save it in folder “Lesson 6”, file name “CssBorders.html”.

You might also like