ITIY3 Introduction to Web Publishing CSS and text styles Specifying Colors in CSS Colors can be expressed in any of the following forms with CSS: . color name – e.g. white, red, green, blue, black … see below . hexadecimal RGB values - #FFFFFF or #FFF (shortened) . RGB values – rgb(255,255,255) . RGB values as percentages – rgb(100%,100%,100%) . HSL values, CSS3 support – hsl(0,0%,100% RGB – Red Green Blue channel values, HSL – Hue Saturation Lightness values -> equivalent precision! The 16+1 basic color names (CSS2.1) are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, oil, purple, red, silver, teal, white, and yellow + orange. orange = #FFA500 – CSS2.1 140 named colors altogether in CSS3 CSS3 color module: http://www.w3.org/TR/2011/REC-css3-color-20110607/ http://learningwebdesign.com/colornames.html http://learningwebdesign.com/webpalette.html http://htmlhelp.com/reference/css/units.html#color Colors in computers are expressed with the RGB color system. RGB represents the red, green, blue color channel components with values ranging from 0 to 255. RGB 0, 0, 0 = black RGB 255,255,255 = white The hexadecimal RGB values are calculated form RGB values and are equivalent: #RRGGBB -> a pair for each channel #000000 = black #FFFFFF = white University of Tampere, COMS 1 ITIY3 Introduction to Web Publishing Hexadecimal (hexa, 16 based) values may be shortened if all values are "pairs" for all 3 channels: #CCCCCC = #CCC, #22DDFF = #2DF, #000000 = #000 #134dff = #134dff (cannot be shortened!) You can use Adobe Photoshop or other image editors e.g. Pixlr online image editor (www.pixlr.com) to pick and define a color and see the hexadecimal or RGB values for the color. http://color.adobe.com http://www.colourlovers.com/palettes/add http://www.colorpicker.com/ You can also quickly test and copy color codes in the Chrome’s Developer tool. Select an element with a defined color. Check the color in the style tab. There is a small square to preview the color, click it to access the color picker. Newer versions of Chrome enable you to add text color in the browser to test it, as the styles of the selected element appear in the styles tab, move the mouse pointer to the right bottom corner and click the small “A” for the color picker. The color property controls the text color of text elements. Text color is an inherited property. Colors can be added to other properties like element background, element border in various elements. Hexadecimal values express the same colors as the RGB values or HSL values. Hexadecimal values are somewhat shorter to write. In the developer tool, just click the two-headed arrow to switch between color definition types easily. University of Tampere, COMS 2 ITIY3 Introduction to Web Publishing You can also use the color picker tool (next to the selected color disk) to pick a color from the viewport of the web browser. After defining the color, you can copy and paste the color values from the Developer tool. Either copy from the styles tab or click the color disk to copy the selected color value (right of the color picker). Hexadecimal values always start with a # mark -> #123456! RGB -> rgb(0,0,0) values range 0-255 or a less typical 0-100% HSL -> 360 degree for hue selection, 0-100% for saturation, 0-100% for lightness University of Tampere, COMS 3 ITIY3 Introduction to Web Publishing CSS3 color and alpha transparency CSS3 introduced the HSL color definitions and it can be used in modern browsers without problems, though support in older web browser was lacking. p { color: hsl(240,100%,50%) } = blue with 100% saturation and 50% lightness – hue 360 (degrees, red to red), saturation, lightness values are percentages 0-100%. Transparent (translucent) colors - RGBa and HSLa A colors are opaque with the previous color values, but can be also translucent and completely transparent by adding an extra alpha channel to RGB and HSL colors -> RGBA & HSLA a = alpha transparency – 0 is full transparent – 1 full opaque -> 0.1 = 10%, 0.75 = 75% transparent etc. h1 { color: rgba(0, 0, 0, .1) } h2 { color: rgba(0, 0, 0, .5) } h3 { color: rgba(0, 0, 0, 1) } h1 { color: hsla(0, 0%, 0%, .1) } h2 { color: hsla(0, 0%, 0%, .5) } h3 { color: hsla(0, 0%, 0%, 1) } You can also define the transparency values in the developer tool as above (second slider). The checked background means transparency. University of Tampere, COMS 4 ITIY3 Introduction to Web Publishing Length units and values Some CSS properties require values with specific units assigned. There is a need for length units when font-sizes are determined, you need space between or around elements, or you need to define the dimensions of element… Length unit values can be: . positive or negative – (e.g. margins can be negative) . numerical value, also fractions e.g. 0.5 (zero point five) or .5 (point five), 1.23118… . must define a unit of measurement, except for 0 (optional) and in a few other cases (ratios) p { width: 200px; } – no space between value and unit (200px)! width: 200 px or plain 200 won’t work! but p { width: 0; } is fine, 0 is 0 in any unit There are relative and absolute units. Absolute units are “fixed” units that are physically measurable and have a constant nature in a specific environment (e.g. screen, paper). Relative units are calculated by the web browser usually based on fixed units or on a ratio. pixel (px) = smallest unit in the viewport to display a color "square" (pixel). In CSS3 the pixel is redefined as an absolute unit, as 1/96 of an inch (matching a certain angle of view that users watch screens). em (em) = the font size of the text in the element – works like a scaling factor, its size is relative to the text size of the element or to the text size that is inherited by the element. (NOT to be confused with the “em” element in HTML!) The em unit size is not constant and depend on the context, based on which the browser calculates the unit size automatically. The em unit is not just for defining text sizes. It can be used for other purposes as well, e.g. for setting margins, widths and the like, though as a unit it will be relative to the element’s own text size. Absolute units can be used too, such are millimeter (mm), centimeter (cm), inch (in = 2,54cm), point (pt 1/72in), pica (pc 12pt). These work best when the physical characteristics of the output device are well known, for example print paper. Avoid these for screen rendering! Percentage (%) is also a relative unit, calculated based on element properties like text size or e.g. dimensions of the element or of its parent. root em (rem) = the font size of the root element, the html element, therefore defining a constant value for the particular document that can be controlled by changing the text size of that element. In contrast, em values are always relative to inherited text size or the element’s own text size. Note that rem units are not supported in older Internet Explorer web browsers (support only in IE11 and Edge). There are many other units as well; the above are the essential to start with. https://www.w3.org/Style/Examples/007/units.en.html University of Tampere, COMS 5 ITIY3 Introduction to Web Publishing Text and font properties – all inherit color -> text color of the element (color values as above) font-size -> can be defined in absolute or in relative length and percentage values As in the above example, relative values correspond to absolute values, the web browser calculates the values automatically. 200% is 2x the size, same as 2em. For a particular element, these will mean a certain absolute size, here 16px is a starting size. Default font size in most web browsers for normal texts is 16px The default size (16px) is used, if the text size is not defined for the document. An exception is present for monospace default font sizes, e.g. in pre or code elements, these typically have a different font size (smaller). The default text size for the browser can be change in the browser settings by the user. This freedom should be left intact for accessibility considerations. Font sizes, defined in style sheets with relative units, will be based on the default browser size (or otherwise inherited font sizes). Hence, text size is not locked and users have control. Absolute pixel values would lock the font size to the specified value and user defined sizes are ignored. Example: body { font-size: 100%; } – e.g. 100% = 1em - if browser default is 16px – calculated value is 16px h1 { font-size: 1.5em; } – 16px x 1.5 = 24px - relative size, 1.5 times bigger, scaled the inherited size from the parent (body) to 1.5 times bigger. Remember 24px is only true if the inherited text size is 16px. If the inherited size is e.g. 12px (body font-size: .75em or 12px), 1.5em size for the h1 element would give us only 18px (12px x 1.5). Here is the size of H1 elements if the default size is not changed: University of Tampere, COMS 6 ITIY3 Introduction to Web Publishing The image above shows Google Chrome’s Developer tool. The default browser styles for H1 element are marked as ”user agent stylesheet” (mid gray area). H1 -> default 2em size = twice the inherited size = 2x16px if the inherited size is 16px. If you switch the “Styles tab” to the “Computed tab”, you can see the actual calculated pixel values, the h1 element gets 32px = 2em (2 x 16).