HTML Images; CSS Color & Text.

Images:

Choosing Images for Your Site.

• Images should:

1. Be relevant

2. Convey information

3. Convey the right mood

4. Be instantly recognisable

5. Fit the color palette

• Online extra:

We have provided an online gallery that helps you choose the right image for your website. You can find it in the tools section of the site accompanying this book.

• Storing Images on Your Site:

As a website grows, keeping images in a separate folder helps you understand how the site is organized. Here you can see an example of the files for a website; all of the images are stored in a folder called images.

• Adding Images:

Images can improve the design and the appearance of a web page.

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

Example:

 <img src="url" alt="alternatetext">

• Height & Width of Images:

1. height: This specifies the height of the image in pixels.

2. width: This specifies the width of the image in pixels.

color:-

Color Names Supported by All Browsers.

1. Colors in CSS can be specified by the following methods:

2. Hexadecimal colors

3. Hexadecimal colors with transparency

4. RGB colors

5. RGBA colors

6. HSL colors

7. HSLA colors

8. Predefined/Cross-browser color names

9. With the currentcolor keyword

Background Color:-

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Syntax

background-color: color|transparent|initial|inherit;

• Text

Text Color:-

The color property is used to set the color of the text.

Text Alignment:-

The text-align property is used to set the horizontal alignment of a text.

Text Direction:-

The direction and unicode-bidi properties can be used to change the text direction of an element:

Vertical Alignment:-

The vertical-align property sets the vertical alignment of an element.

Text Decoration:-

The text-decoration property is used to set or remove decorations from text.

Text Transformation:-

The text-transform property is used to specify uppercase and lowercase letters in a text.

Text Indentation:-

The text-indent property is used to specify the indentation of the first line of a text.

Letter Spacing:-

The letter-spacing property is used to specify the space between the characters in a text.

Line Height:-

The line-height property is used to specify the space between lines.

White Space:-

The white-space property specifies how white-space inside an element is handled.