reading-notes

My reading journal for Code Fellows.


Project maintained by mattlarkin8 Hosted on GitHub Pages — Theme by mattgraham

Images, Color, and Text

Images

Images use the <img> element, which does not use a closing tag. The <src> attribute is how you specify the URL for the image and <alt> gives a text description in case you can’t see the image. You can use height="number" and width="number" to properly size the image for your page.

align="direction" can be used to align the image and surrounding text vertically and/or horizontally by using left, right, top, middle, or bottom.

Color

You can specify the color of text in an element using color:colorname;. The color can also be specified using RGB values or hex codes if you have a custom color or don’t want to use a color name. The same methods all apply for changing the background color of an element using background-color:colorname;.

It is important to choose the right level of contrast based on how much text you have to be read and what the desired use is.

Text

You can set the font for your text using font-family:fontname;. Anyone who visits your site will need to have the chosen font installed on their computer for it to be displayed. Because of this, some fonts that most computers have installed are commonly used like Times New Roman or Arial.

font-size:size; is used to change the size of your font. 16 pixels is the default browser setting for font size. The most common way to set the size is in pixels, but you can also use percentages or EMs.

font-weight:normal; is the default value for text, but font-weight:bold; can be used to bold the text.

font-style:italic; is how you can italicize font. You can also use oblique if you want that style.

text-transform:uppercase; can be used to make the text uppercase. You can do the same for lowercase or capitalize to make the first letter of each work capitalized.

text-decoration: can be used to either underline, overline, or line-through the text.

line-height:size; is used to set the height of the text.

letter-spacing: and word-spacing: can be used to change the spacing between letters and words.

text-align: is used to align your text to the right or left of the page. You can also center the text or use justify to make every line in a paragraph take up the full width of the containing element.

text-indent: is used to indent your text.

Things I want to know more about

I want to learn how to properly use images in my page to make it look appealing. Pictures are very important to the look and feel of a website, as well as grabbing user attention.

I want to learn more about formatting my page nicely with images and text where I want them. I look forward to using text and image alignment to make elements fit together nicer.