CSS Styles Fonts and Colors

Adding a splash of color Colors

Reserved Colors Names You will specify font color with the color property. You can see the list of reserved color words here: http://www.w3schools.com/tags/ref_colornames.asp

RGB Colors With Red/Green/Blue colors you specify the amount of each color that is mixed together to make your desired color. Like with paint 

Hex Values These are six digit codes preceded by a hash sign with represent the color:

Background Color To specify the background color you use the background property.

Transparency Here we will make the background of the paragraph slightly transparent using rgba The last letter in rgba stands for alpha, indicating the about of transparency.

Let’s make our letters pretty  Text Let’s make our letters pretty 

Serif Font Serif Font’s are fonts with little curly cues on them. These are optimized for print, but not as easy to read on the computer. So I wouldn’t put them on your website  e.g. Georgia, Times New Roman Sample Text Curly Cue

Sample Text Sans-Serif Font These font’s don’t have the curly cues. They are optimized for computers Use Sans-Serif font’s on your website e.g. Arial, Verdana, Helvetica No Curly Cue Sample Text

Font Family To specify your font you can put it in the font family. Often you specify the font-family in the body tag so it applies to all the text in your document. You can then change the font-family of individual styles accordingly.

Font size Most commonly, font sizes are specified in pixels.

Font Weight This property controls the boldness of your font. You can specify the boldness in terms of words or numbers Boldness lighter normal bold bolder Boldness 100 200 … 900 OR

Font Style You can specify one of three font styles… Style Description Normal Italic Oblique Displays the normal font style on an angle

Text Decoration We can add strikethroughs and underlines with text decoration Options none underline overline line-through blink

Text Alignment Just like in Microsoft Word, you can align: left, right, center, or justify

Giving links their own flair Styling Links Giving links their own flair

Links Links have a few different states We can style each state differently State Description :link Before it’s been visited :visited After it’s been clicked removed from most browsers :hover When the user is hovering over it :active When the user clicks it

Links Let’s style them 