Introduction to CSS Fonts, Texts and Colors - Lesson 7

Introduction to CSS Fonts, Texts and Colors - Lesson 7 Publisher : Attitude Academy

What is Fonts CSS • In this Topic you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described: • font-family • font-size • font-style • font-variant • font-weight • font

FONTS • The Fonts-Family • You can set what font will be displayed in an element with the font-family property. • There are 2 choices for values: • family-name • generic family • If you set a family name it is best to also add the generic family at the end. As this is a prioritized list. So if the user does not have the specified font name it will use the same generic family. (see below)

Example Here: <div style="Font-family: Arial, veranda;">This font show arial property</div> Font-family: Arial,verdana;

The Fonts-Size • You can set the size of the text used in an element by using the font-size property. • There are a lot of choices for values: • xx-large • x-large • larger • large • medium • % (percent) • If you set a family name it is best to also add the generic family at the end. As this is a prioritized list. So if the user does not have the specified font name it will use the same generic family. (see below) • small • smaller • x-small • xx-small • length Example Here: Font-size: 20px;

FONTS • The Fonts-style • You can set the style of text in a element with the font-style property • There are three of choices for values: • normal • Italic • oblique Font-style: Italic;

FONTS • The Fonts-Variant • You can set the variant of text within an element with the font-variant property • There are two of choices for values: • normal • small-caps Font-Variant: value;

FONTS • The Fonts-Weight • You can control the weight of text in an element with the font-weight property: • There are a lot of choices for values: • lighter • normal • 100 • 200 • 300 • 400 • 500 • 600 • 700 • 800 • 900 • bold • bolder Font-Weight: value;

FONTS • The Text Css • In this Topic you will learn about Text properties and how they are applied using CSS. We will also look at how to work around the issue that specific text properties work for a website .The following CSS properties will be described: • Text-align • Text-decoration • Text-indent • Text-transform • Letter-spacing • White-space • Word-space

FONTS • The Text-align Css • The following example demonstrates how to align a text. • There are four choices for values: • Left • Right • Center • Justify Text-align:left; This is text alignment left This is text alignment right This is text alignment Center This is text alignment Justif

FONTS • The Text-decoration Css • You can decorate <a> Tag property or other property using with this css • There are five choices for values: • None • underline • over line • Line-through • blink <a href="#" style="text-decoration:none;">This Css properties remove underline from text</a>

FONTS • The Text-Indent Css • You can indent the first line of text in an HTML element with the following: • There are two choices for values: • Length • Percentage Text-indent:value;

FONTS • The Text-Transform Css • The following example demonstrates how to set the cases for a text • There are four choices for values: • None • capitalize • Uppercase • Lowercase Text-transform:uppercase;

FONTS • The Letter-spacing Css • You can adjust the space between letters in the following manner. Setting the value to 0, prevents the text from justifying. You can use negative values. • There are two choices for values: • normal • length (how many length give by you) Letter-spacing:5px ;(or other value you can add) Example Here: These letters are spaced at 5px.

FONTS • The White Space Css • You can control the whitespace in an HTML element with the following: • There are two choices for values: • Normal • Pre • Nowrap white-space:5px ;(or other value you can add)

FONTS • The Word-spacing Css • You can adjust the space between words in the following manner. You can use negative values. • There are two choices for values: • normal • length (how many length give by you) Word-spacing:5px ;(or other value you can add)

FONTS • The font or text Color Css • The color property describes the foreground color of an element. For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element • There are three choices for add text or font color: • Color name – example :( red, black…) • hexadecimal number – example:(#ff0000) (Note: # properties use • add font or text color) • RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))

Introduction to CSS Fonts, Texts and Colors - Lesson 7