week 3 lecture 2 css text and font property copyright © 2015. corporate health and consultancy...
TRANSCRIPT
![Page 1: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/11.jpg)
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.
![Page 12: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader030.vdocuments.us/reader030/viewer/2022032708/56649e7e5503460f94b810a8/html5/thumbnails/13.jpg)
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