Be sure to keep images in its own folder
| Type | Description | Example |
|---|---|---|
| Adding images | you have to use the <img> tag whit src. It is also good practice to use alt to provide text description. |
<img src="image" alt="name"></img> |
its good to manage the size of the images with width and height in CSS
Your can use tools to edit and save images in the right format to ensure that they the right size, format, and resolution.
| Type | Description | Example |
|---|---|---|
| JPEG | when you have many colors in pic | |
| GIF | With few colors or large areas with the same color. | |
| Transparency | Has to be either transparent gif or PNG format to be able to be transparent |
<figure>elements have been created in HTML5 to capture images. You can also use<figcaption>to put a caption under the image.
images should be saved at the same width & height that you want them to be used on your page.
| Type | Description | Example |
|---|---|---|
| Foreground colors | Allows you to specify the color of text inside an element. | color: red: |
| Background color | Controls the color property of the background | background-color: green; |
| Opacity | Your can use rgba or hsla to control the opacity. |
rgba(0,0,0,.5); & hsla(0, 40%, 100%, .5); |
| Type | Description | Example |
|---|---|---|
| font-family | Helps you specify the typeface that should be used. | |
| font-size | specify the size for the font. | |
| @font- face | allows you to use a font even though it’s not in your computer. | |
| Font-weight | create bold text |
|
| font-style | create italic text |
|
| text-transform | change to uppercase or lowercase |
|
| text-decoration | if you want to underline, overline, line-through and blink |
|
| line-height | vertical space between text | |
| text-align | the alignment of text. left, right, center, justify (takes up the full line) |
|
| vertical-align | commonly used with inline elements. | |
| text-indent | allows you to indent the text. | |
| text-shadow | creates a drop shadow | |
| :first-letter | a pseudo element at the end of the selector to customize the first letter. | |
| :hover | when a user hovers over an element | |
| :active | when an element is being activated by a user | |
| :focus | When you have already interacted with the link |