Values and Units

1. Values and Units CSS The Definitive Guide Chapter 4

2. The basis for almost everything you can do in CSS… Units affect colors, distances, and sizes Understanding units allows you to declare a paragraph a certain color, or that an image should have a certain pixel blank space around it or that a heading text should be a certain size.

3. Numbers • There are two types of numbers: • Integers – “whole” numbers • Reals – fractional numbers Both can be positive or negative. Examples of valid number values: 15.5 -250.00004 5

4. Percentages • Is a calculated real number followed by a percentage sign (%) • Always relative to another value

5. CSS Values • The values you can assign to a CSS property depend on what type of property it is. • Some properties can be assigned a range of values.

6. CSS Values • For instance, you can assign any font name that is available on a user’s system to the font-familyproperty. • For other properties, you must assign a value from a specific set of values.

7. Length Units • Length units refer to the units of measure that you can use in a style declaration to determine the size or positioning of an element • Whether a length unit is used for sizing or positioning depends on the property and the element to which it is assigned

8. Length Units • You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure

9. CSS Length Units

10. Length Units • CSS length units are either absolute or relative • Absolute length units use an exact measurement to specify the size or placement of an element

11. Absolute Length units • Inches (in) – This refers to the inches on a ruler • Centimeters(cm) – This also refers to centimeters found on a ruler • Millimeters (mm)- There are 10 mm to a cm, so an inch equals 25.4 mm • Points (pt) – Points are standard typographical measurements that have been used by printers and typesetters for decades and by word processing programs for many years. • Picas (pc) – Another typographical term. A pica = 12 points which means there are 6 picas to an in.

12. Absolute units… • When using absolute units for measurement you must assume that the browser knows all the details of the monitor on which the page is displayed, the printer that is being used, or anything else the user is using. • On a web browser, display is affected by the size of the monitor and the resolution to which the monitor is set. Not much you as the author can do about it!

13. Using Absolute in units in Web Design Absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common.

14. Relative Length Units They are so called because they are measured in relation to other things. The actual (absolute) distance they can measure can change due to other factors beyond their control, such as • screen size, • the width of the viewing area, • the user’s preference settings • and more

15. Relative lengths For some relative units, their size is almost always relative to the element that used them and will thus change from element to element. • There are three relative unit lengths: • em – em-height (common typographical measurements) • ex – x-height (common typographical measurements) • But in CSS they have a different meaning. • px – pixels This is one of the dots that you can on your monitor if you look closely. This is a relative value because it depends on the resolution of the display device.

16. em and ex units • In CSS one “em” is defined to be the value of font-size for a given font. So if the value of an element is 14 pixels, then for that element, 1 em is equal to 14 pixels. • And this can change from element to element.

17. Practice with em and px • Using the CSS style code on page 87 create the document. h1 {font-size: 24px;} h1 {font-size: 18px;} h1 {font-size: 12px;} h1, h2, p {margin-left: 1em} small {font-size: 0.8em;} <h1>Left margin = <small>24 pixels</small></h1> <h2>Left margin = <small>24 pixels</small></h2> <p>Left margin = <small>24 pixels</small></p>

18. Practicality… In practice, many user agents get their value for ex by taking the value of em and dividing it in half. Because most fonts don’t have the value of their ex height built-in and it’s a very difficult thing to compute.

19. Pixel lengths • They are perfect for expressing the sizes of images, which are already a certain number of pixels tall and wide. • Pixels work well when working with borders • Or positioning elements

20. Percentage Units • An alternative to relative length units is percentage units, which adjust properties relative to other values • You assign a percentage unit value to a property by assigning a number that represents the percentage, immediately followed by the percent symbol (%)

21. Setting the size of the font • <!DOCTYPE html> • <html> • <head> • <style> • h1 {font-size: 250%;} • h2 {font-size: 200%;} • p {font-size: 100%;} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <p>This is a paragraph.</p> • </body> • </html>

22. Set the size in px • <!DOCTYPE html> • <html> • <head> • <style> • h1 {font-size: 40px;} • h2 {font-size: 30px;} • p {font-size: 14px;} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <p>This is a paragraph.</p> • <p>Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.</p> • <p><b>Note:</b> This example does not work in IE, prior version 9.</p> • </body> • </html>

23. Setting the size of the font in em • <!DOCTYPE html> • <html> • <head> • <style> • h1 {font-size: 2.5em;} /* 40px/16=2.5em */ • h2 {font-size: 1.875em;} /* 30px/16=1.875em */ • p {font-size: 0.875em;} /* 14px/16=0.875em */ • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <p>This is a paragraph.</p> • <p>Specifying the font-size in em allows all major browsers to resize the text. • Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should. • </p> • </body> • </html>

24. Set the size of font in percent and em • <!DOCTYPE html> • <html> • <head> • <style> • body {font-size:100%;} • h1 {font-size:2.5em;} • h2 {font-size:1.875em;} • p {font-size:0.875em;} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <p>This is a paragraph.</p> • <p>Specifying the font-size in percent and em displays the same size in all • major browsers, and allows all browsers to resize the text!</p> • </body> • </html>

25. Color Units • A color unit represents a color value that you can assign to a property • Using the name of the color is called named colors. • There are 17 named colors 16 colors defined in HTML4.01 + orange.

26. Color Units

27. Color names • Most browsers recognize as many as 140 color names! These extra colors are defined in CSS3 Color Specification. • Color names supported by all browsers.

28. Color RGB • Computers create colors by combing different levels of red, green, and blue. • RGB color values are supported in all major browsers. • An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%). • For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

29. Using different numeric values for rgb • <!DOCTYPE html> • <html> • <head> • <style> • p • { • background-color: rgb (255,0,0); • } • </style> • </head> • <body> • <h1>This is heading 1</h1> • <p>This is some text in a paragraph.</p> • </body> • </html>

30. Hexadecimal RGB colors • Works by stringing together three hexadecimal numbers in the range of 00 through FF. • Generic syntax is #RRGGBB • For hexadecimal that are composed of three matched pairs of digits CSS permits a shortened version notation. #RGB The browser will take each digit and replicate it. So #6FA would be for #66FFAA

31. Keywords as values • There maybe an occasion where a value needs to be described by using a keyword. • A very common keyword example is none. Example: a:link, a:visted {text-decoration: none;}

32. Keyword inherit Most properties inherit naturally but sometimes inherit comes in handy. #toolbar {background; color: white;} <div id=“toolbar”> <a href=“one.html”>One</a> | < a href=“two.html”>Two</a> | <a href=“three.html”>Three</a> </div> (The links in the above will be styled according to browser preference settings. That is blue text on blue background.) #toolbar a {color: inherit;}

33. Tonights Lab Create a new html document using CSS. Page should be titled Practice with Fonts, Color and Size. Please provide examples of different fonts and sizes. Also please add color to your examples so that the fonts are different colors. Examples: Lucida Sans Unicode (12px) Bolded Times New Roman (32px) Aerial Black (54px) Included in your coding: margin-left: 1em;