WEEK 3 Lecture 2 CSS TEXT AND FONT PROPERTY Copyright © 2015. Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya.

WEEK 3

Lecture 2CSS TEXT AND FONT

PROPERTY

Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1

Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS

Course Instructor

TEXT COLORTo 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: redb. By using the Hexadecimal value of the color like

this:- color:#ff0000c. By using the RGB value like this:- color: rgb(255,0,0)



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 http://rgb.to/html-color-names/1 http://www.cloford.com/resources/colours/500col.htm http://www.99colors.net/color-names to get a list of colors and their values.



Course Instructor


Course Instructor

Web Development 15.WD.1


Course Instructor



Course Instructor



Course Instructor

http://rgb.to/html-color-names/1

http://www.cloford.com/resources/colours/500col.htm

http://www.99colors.net/color-names

PRACTICAL TIMElet’s open up the main file which we created

in lecture 1.Remember we saved it in the css folder of the

school ofprogramming folder.



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.



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;



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)



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%);



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 thiscolor:rgb(255,0,255);opacity:0.5;



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 aHeading.Write this code just below the p style.H1{text-align: center;}



Course Instructor

Now open your index.html file and type the following code in the

body part just above the p tag.<h1> the story of the fox </h1>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;}



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<p class =“date”> June 2015 </p>



Course Instructor

WEEK 3 Lecture 2 CSS TEXT AND FONT PROPERTY Copyright © 2015. Corporate Health and Consultancy Services Limited Web Developmen t 15.WD.1 Mildred Fakoya.

Documents

color red color

backgroundcolor property

corporate health

mcpscourse instructorcopyright

mcpscourse instructornew

mcpscourse instructorall

values red

rgb values