week 3 lecture 2 css text and font property copyright © 2015. corporate health and consultancy...
TRANSCRIPT
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)
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 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.
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor
Web Development 15.WD.1
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor
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.
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 thiscolor:rgb(255,0,255);opacity:0.5;
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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 aHeading.Write this code just below the p style.H1{text-align: center;}
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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.<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;}
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, 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<p class =“date”> June 2015 </p>
Copyright © 2015. Corporate Health and Consultancy Services LimitedWeb Development 15.WD.1
Mildred FakoyaOCA, OCP, MCITP, MCSA, MCTS, MCPS
Course Instructor