WEEK 3 Lecture 2 CSS TEXT AND FONT PROPERTY Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

TEXT COLOR To set the color of a text, the color property is used. The values can however be specified in three different ways. a.By using the name of the color like this:- color: red b.By using the Hexadecimal value of the color like this:- color:#ff0000 c.By using the RGB value like this:- color: rgb(255,0,0) Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

All these values red, #ff0000 and rgb(255,0,0) are all different ways to write the color red. Don’t worry, you do not need to have the values in your head. You could just get a list of color names what they look like, with their HEX and RGB values downloaded and always Make reference to them. You can go to to get a list of colors and their values. Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

PRACTICAL TIME let’s open up the main file which we created in lecture 1. Remember we saved it in the css folder of the school of programming folder. Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

PRACTICAL : COLORS Now lets try using the other values for the color red to test it. Change the value of the color property to rgb(255,0,0); Open with a browser to see if it works. Then change the value again this time, using thehexadecimal value of the color like this color:#ff0000; Test to see how it looks. Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

The color property is used to change the color of the text. To change the color of the background or page, we use the background-color property like this: background-color: red; Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

New to CSS 3 Colors With CSS3, four new features where introduced. 1.RGBA colors: this is just an extension of the RGB. The A stands for alpha and it specifies how transparent or opaque a color should be. The value of A can be between 0.0(fully transparent ) and 1.0 (fully opaque). It is written thus for the color red color:rgba(255,0,0,0.1) Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

New to CSS 3 2. HSL : Hue, Saturation, and Lightness. Hue is the degree on the color wheel. 0 degree is red, 120 is green and 240 is blue. Saturation and Lightness are measured in percentage. 100% saturation is the full color. 0% lightness is black and 100% is white. hsl(0, 100%, 30%); Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

New to CSS 3 3. Just like RGB, HSL also has an alpha channel. HSLA where A defines the opacity. 0.0 is fully transparent and 1.0 is fully opaque. It is used just in the same way the RGBA is used. color: hsla(0, 90%, 20%, 0.2); 4. Opacity: it is used to the set the opacity of a specified RGB value like this color:rgb(255,0,255); opacity:0.5; Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

TEXT ALIGNMENT The text-alignment property is used to set the horizontal alignment of a text. The values it takes are center, right and left. The default is left. So if you don’t specify an alignment, it will be aligned left. Open your main.css file again to see how this works. This time, we want to give the body a Heading. Write this code just below the p style. H1{ text-align: center; } Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

Now open your index.html file and type the following code in the body part just above the p tag. the story of the fox Run your code to see if the style is applied. If all is well, the text between the h1 tags should be centered and the text between the p tags should still be in color red.

Now lets do an example of aligning to the right. Lets write another p style this time with a class. And here is how to do it..date { text-align:right; color :#000000; } Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor

Now to properly reference a class style we do it like this. Note that the link tag must be present in the head section and the file holding all your style is properly referenced. At the body tag, add the following code just after the body start tag June 2015 Copyright © Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya OCA, OCP, MCITP, MCSA, MCTS, MCPS Course Instructor