Skip to content

Latest commit

 

History

History
34 lines (20 loc) · 2.11 KB

File metadata and controls

34 lines (20 loc) · 2.11 KB

Read05

Images

Images help set the tone for the website. An image can be equal a thousand word. You can use your own images, or use stock images that can be purchased online, these images are coyrighted so be sure to read the copyright information before using them in your website.

It is best for a website to have its own folder for images, so they can be displayed without having the issue of being taken down or a change of URL.

In HTML, <img> tag can be used to insert an image, with src being the source of the image, and alt attribute sets a piece of text indicating the name of the image if the image fails to load.

Color

The color property allows you to set the color of the text inside an element.

There are three ways to set colors in CSS;

  1. RGB Values - These represent how much of red, green and blue is in each color. For example, rgb(100, 50, 30).
  2. HEX Codes - These are six digit codes preceded by a hash sign #. For example, #63cd22
  3. Color Names - There are 147 colors that can be invoked by name only. For example, color: LightBlue.

Background Colors

Background colors can be assigned to elements in CSS by typing background-color: and then specifiying the color to be set. This will create a colored box encapsulating the element's padding space.

Color pickers can help you find the right color you need.

We can add transparency to the color by activating the a value in rgb, ie, rgba(100, 35, 68, 0.5); this will give the color 50% transparency. If 0.5 is changed to 1, this will result in a full opaque color, the opposite can be said to 0 value, which will make the color fully transparent.

Text

Text can be styled in CSS to give different looks. Sans-serif fonts display the text in a modern display way, that will have straigt edges.

Serif-fonts have extra details on the end of the letters, which represents classic and older looking fonts.

Fonts also comes in weights, bold, italic and regular.

Text can be aligned vertically and horizontally in their block. By using the text-align attribute, the text will be set horizontally. by using vertical align, the text can be adjusted vertically.