HTML Images & CSS Color and Text

HTML Images & CSS Color and Text

This a summary of what I have learned reading Jon Duckett’s material.

Images

You can add images to your website of course, imagine that the internet is just just a bunch of lines, like, who would want to browse something that looks like a medicine brochure.

<img> is the tag for adding an image to your page, you place the tag within the HTML code, any place that you want the image to appear at, you use the tag like this:
<img src="#" title="something" alt="art">

  • src = the URL for the image file that you want to link.
  • title = the image name.
  • alt = you add this to tell the user what is the image about if the browser did not load the image.

For sure, you need to make some adjustment to your images before adding them, If you want a cover for example, you need to make sure that the dimension will suit your page, else, you should fix some stuff using an editor. You can control some stuff using CSS, actually, you can add an image using CSS but lets just keep that for later. Its good to mention that the resolution for the images should be 720 pi, that allows the browser to load it faster as its size will be less and it will be lighter to download.

 

Colors

People are not colorblind, well, most of them, so you need to color you page, at least add a background color, it looks boring but its better than nothing.

box

There many attributes in CSS that allows you to change the color of many elements, you can change the background color for a block by using (back-ground color: ;), or you can change the color for the text in that block by using just (color: ;), so, how to add those colors? You can add the values in many ways also:

  • just write the color name yea just write the color name,
    (color: red;).
  • RGB Values Values for red, green, and blue are expressed as numbers between 0 and 255. (color: rgb(102,205,170);)
  • Hex Codes Hex values represent values for red, green, and blue in hexadecimal code
    (color: #66cdaa;)

 

Text

Welcome, to the text editing marathon in CSS:

  • font-family to change the font appearancm you can use the stock ones or you can link a href to use other fonts from the web.
  • font-size to control the font size, no need to describe.
  • font-weight allows you to create bold text.
  • font-style italic text.
  • text-transform used to change the case, uppercase, lowercase.
  • text-decoration used to set or remove underlines or any type of lines.
  • line-height makes your text high. yes.
  • letter-spacing makes spaces between letters
  • word-spacing makes spaces between words
  • text-align defines the text place within the block, left, center, right.
  • text-shadow gives the text a shadow.

 

Get back to EMAM’S HOMEPAGE

I have created this page as a part of my project using Github, Please visit my profile, I will be more than happy to hear from you all.                       © Emam Shararah 2021