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). If you change the font size for the document by changing the font size for the BODY element, setting font size to say 14px. The default H1 size still will be 2em, but the browser will calculate the size as 28px (2x14px) instead of 32px since the H1 element will inherit the 14px size from its parent (body). Calculating relative sizes You can use absolute sizes font-size: 14px; to fix the font size to a specific value, but this may be restrictive and takes more time to update especially if you change multiple elements. Usually it is better to use relative values, changing the parent element will update the child elements because of inheritance rules for text properties. You can also calculate a relative value to correspond to a specific absolute size if specific sizes are needed but relative text sizes will be used. To calculate percentage and em values, use the following formula: desired size in px / element’s text size in px = em or % value (% = em x 100) So, if we want 14px and the current text size is 16px –> 14 / 16 = 0.875 that is 0.875em or 87,5% (0.875x100) = e.g. body { font-size: .875em; } will be calculated as 14px if the default inherited size is 16px. body { font-size: 100% } /* 16px */ h1 { font-size: ???em } /* 20px desired */ h2 { font-size: ???em } /* 18px desired */ blockquote { font-size: ???em } /* 14px desired */
20 / 16= 1,25; 18 / 16 = 1,125 ; 14 / 16 = 0,875 so the style rules with em values at default text size (16px) body { font-size: 100% } /* 16px */ h1 { font-size: 1.25em } /* 20px */ h2 { font-size: 1.125em } /* 18px */ blockquote { font-size: 0.875em } /* 14px */
The em values are always calculated. They are relative to inherited font sizes or in some cases the element’s own font size (e.g. relative units for defining element margins). Remember that if an element has a child element, the child inherits the parent element’s font size! body { font-size: .875em; } -> calculated as 87.5% of browser default (if 16px) = 14px h1 { font-size: 1.5em; } -> calculated as 150% of inherited size -> 14px x 150% = 21px The heading’s size is NOT 0.875em x 1.5 (=1.3125)! It is the calculated as 14px inherited size times 1.5! Just calculate: 14 x 1.3125 = 18,375px would be incorrect -> 14 x 1.5 = 21px is correct.
University of Tampere, COMS 7 ITIY3 Introduction to Web Publishing
CSS body { font-size: 100%; } (or 1em) div { font-size: 75%; } (or 0.75em)
HTML
H1 in BODY
Text in a paragraph...
H1 in DIV
Text in a paragraph...
In the above example, the H1 and P text sizes are smaller in the DIV element (second heading and paragraph) since they inherit the smaller font-size of the DIV element. The proportion of the text sizes stays the same between the H1 and P elements. Their size is just smaller in the div by 25%.
Other text size values There are also special absolute values, browser references to describe a range of sizes from smallest to largest (no exact reference to a particular size, rather size is consistently scaled, browser dependent interpretation): xx-small, x-small, small, medium, large, x-large, xx-large Relative values: smaller, larger (relative to parent object sizes)
To check or change browser defaults, go to the browser settings (vertical dots at the top right) and open settings and scroll to Appearance. A quick shortcut for Chrome, type the following to the address field chrome://settings/fonts to open the font settings straight away.
University of Tampere, COMS 8 ITIY3 Introduction to Web Publishing
Chrome browser settings (chrome://settings/fonts) 16 is as in 16px is the typical default font size for texts in the web browsers, the slider above for font size can adjust the size by the user.
University of Tampere, COMS 9 ITIY3 Introduction to Web Publishing
Other text styles – all inherit font-weight: normal | bold | bolder | lighter strong, b { font-weight: bold; } - bold text h1 { font-weight: normal; } - heading without bolding h1 { font-weight: lighter; } - as the previous span { font-weight: bolder; } - bold text h1 { font-weight: bolder; } - bold text by default, no change
Some fonts may use/support certain integers to define boldness 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
400 = normal text weight Browser and font support varies, many fonts can only be bold or normal (= not bold). font-style: normal | italic | oblique .italic { font-style: italic; } with italic value the text is rendered in italic style (italic version of the font used), oblique (force tilting characters) will mimic italic style, if no italic version available (may look rough for certain fonts).
text-transform: none | capitalize | lowercase | uppercase Changes the case of text characters when rendered in the viewport, of course the case only changes on the screen:
University of Tampere, COMS 10 ITIY3 Introduction to Web Publishing text-decoration: none | overline | underline | line-through
a { text-decoration: none; } the none value when applied with hyperlinks turns the default underlining off font-family – defines the font-face of the text element
There are browser specific default fonts that are applied for the text elements of the document. The user may change the default fonts in the browser settings (as above, chrome://settings/fonts). Fonts specified in author style definitions override the default fonts. h1 { font-family: Arial; } changes the default font to a font by the name Arial (a very common font). In general, web browsers will look for fonts that are available on the user's computer. You can refer to a font by its name in your style sheet. In order to display texts using a specified font, unless it is missing from the user’s computer. Modern browsers allow you to use online fonts and downloadable fonts (see web fonts), this means that as a separate online resource the font does not have to be installed in the system. It is advised to list more than one font for your texts. This is useful when you want to keep the appearance of your text constant, whether your preferred font is available or just the second or third option. By providing multiple fonts with similar characteristics, it is easier to retain the desired typographical aspects of the text. Listing multiple font options for your text is called a font stack. Font stacks allow you to set a first choice font and more options in order with a comma separated list. If the first specified font is not available in the user’s system, the browser tries to use the next font in the list, and so forth. Instead of just defining one option: h1 { font-family: Arial; } a font stack could be better: h1 { font-family: Arial, Helvetica, sans-serif; }
Note! Font names that include character spaces like in “Times New Roman” should be placed within quotation marks (single '…' or double "…")! You should also use capitalized names and some may have more uppercase letters in their names. p {font-family: "Times New Roman", Times, serif} -> is a typical font-stack or
…
Use generic font names as last options. Generic fonts are standard font types with certain style characteristics, browsers have default fonts assigned for generic font types: serif, sans-serif, monospace (also: cursive, fantasy). https://developer.mozilla.org/en-US/docs/Web/CSS/font-familyUniversity of Tampere, COMS 11 ITIY3 Introduction to Web Publishing example font stacks and generic font families: Serif: body { font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif } body { font-family: 'Times New Roman', Times, serif } sans-serif: body { font-family: Verdana, Geneva, sans-serif } body { font-family: Tahoma, Arial, Helvetica, sans-serif } monospace: body { font-family: 'Courier New', Courier, monospace } See more example below… Some longer stacks: body { font-family: Tahoma, Arial, Helvetica, sans-serif } h1 { font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; } ul { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
Here is an example of what happens when fonts are not recognized (here striked through) in a font stack: h1 { font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif; }
The next image shows what happens if the first font is not recognized: h1 { font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif; }
Here the first two are not recognized: h1 { font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif; }
None but the generic name recognized: h1 { font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif; }
University of Tampere, COMS 12 ITIY3 Introduction to Web Publishing
You can also check which font is used for the element in Inspect Elements tool, go to the Computed style tab (image below).
Webfonts In modern browsers, there is support for loading fonts as separate font resources from web servers. Web fonts allow you to include and publish font files (resources containing character images) with you site. @font-face condition is used to define the font file. There are also an online font services to deliver fonts to web pages. Loading fonts eliminates the problem caused by missing fonts on the users’ computer systems, but requires browser support. Support is good in modern browsers, nonexistent in older versions. An easy and free way to add Webfonts is via Google’s webfont service: http://www.google.com/webfonts Browse and search the service, choose a font and test it on screen. To add the selected font use the + sign on the right top corner of the font preview, the font or fonts will show on the bottom of the page (dark rectangle).
Click the rectangle at the bottom to open the selected font list. Read the instructions and customize if needed, then copy the code to your document -> link element to the head (Embed code), CSS font- family property and given values to your style sheet (Specify in CSS).
University of Tampere, COMS 13 ITIY3 Introduction to Web Publishing
First link the font: then you can use its name in the styles, like font-family: 'Baloo Bhaina', cursive; h1 { font-family: 'Baloo Bhaina', cursive; }
Another option among other services for web fonts besides Google Fonts is Adobe Edge Web Fonts -> https://edgewebfonts.adobe.com/fonts
University of Tampere, COMS 14 ITIY3 Introduction to Web Publishing
More on fonts, tools and services http://www.w3.org/TR/css3-fonts/ generic font families: http://www.w3.org/TR/css3-fonts/#generic-font-families examples of font stacks: http://sitepointstatic.com/examples/font-stacks/font-stacks.txt, www.smashingmagazine.com/2009/09/complete-guide-to-css-font-stacks/, https://css-tricks.com/snippets/css/font-stacks/ other font resources http://www.apaddedcell.com/web-fonts http://www.apaddedcell.com/sites/www.apaddedcell.com/files/fonts-article/final/index.html http://www.microsoft.com/typography/fonts/ http://web.mit.edu/jmorzins/www/fonts.html http://webdesignerwall.com/tutorials/typographic-contrast-flow webfonts: http://www.google.com/webfonts https://edgewebfonts.adobe.com/ http://www.fontsquirrel.com – webfont tool, recommended http://www.typotheque.com/webfonts http://www.fontspring.com/
In CSS3 you can refer to a specific font with the @font-face rule. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
University of Tampere, COMS 15 ITIY3 Introduction to Web Publishing
Text Alignment text-indent: length | % - indentation of the first text line from the left margin of an element (Inherited) % values are calculated from the parent element’s width https://developer.mozilla.org/en-US/docs/Web/CSS/text- indent
text-align: left | right | center | justify -> horizontal text alignment within an element (Inherited)
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align line-height – basic distance baseline to baseline between lines of texts, browser usually align text lines to the middle. (inherited)
It is recommended to use a scale factor (or em and % values). p { line-height: 2; } /* scale of 2 – double the line height */ Default line height is around 1.2. https://developer.mozilla.org/en- US/docs/Web/CSS/line-height
University of Tampere, COMS 16 ITIY3 Introduction to Web Publishing word-spacing – spacing between words (inherited) h3 { word-spacing: 1em; } https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing letter-spacing – spacing of letters (inherited) h2 { letter-spacing: 3em; } https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
You can also use negative values, but always make sure that you maintain readability of the text. This goes for any other features that you define for text content.
University of Tampere, COMS 17 ITIY3 Introduction to Web Publishing
Css for Lists
You can control the numbering (order) or the bullets for list elements OL,UL, LI. list-style-type: disc | circle | square | decimal | decimal- leading-zero | lower-alpha | upper-alpha | lower-roman | upper-roman | lower-greek | none ol { list-style-type: upper-roman; } ul { list-style-type: square; }
and hiding list item bullets… ol {list-style-type: none}
University of Tampere, COMS 18 ITIY3 Introduction to Web Publishing list-style-image: url(URL) – replacing bullets with an image
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
University of Tampere, COMS 19 ITIY3 Introduction to Web Publishing
Selectors
. type selector – selecting all occurrences of an HTML element in the document h1 { color: blue; } – all H1 headings turned blue
. ID and CLASS selectors for more specific selections:
1. ID selector is used when only one particular element in the whole document is to be selected: #firstheading { color: red; } – affects a unique HTML element with an ID attribute and value “firstheading”
Heading level 1
- selectedHeading level 1
- not selectedIn the style rules, ID selectors always start with a # (hash) mark! You must add the ID attribute to the desired element with the corresponding ID value (defined in the selector) and without the # mark. # mark is only in the selector!
NOTE! ID names are unique to the document! If you want to use the same styles for multiple elements in the same document, use a CLASS selector instead! The same ID name can be used in separate documents, however. ID and class names must not contain empty spaces.
2. CLASS selectors are used when the same set of rules are meant to apply to various elements regardless of type and place of occurrence within the document:
.sectionhead { color: blue; } – selects all elements with a CLASS attribute and value “sectionhead”
CLASS selectors always start with a . (period) mark!
Main heading
Some text
Some other heading
Some text
NOTE! CLASS selectors are weaker in weight or less specific then ID selectors, but CLASS is more powerful than element type selectors if applied to the same property of a selected element. Style specificity also depends on element hierarchy!
See examples on the course page. Any element can have both ID and CLASS attributes at the same time.
Top heading
Also elements may have multiple values for a CLASS element. Multiple values for classes are listed with a space as separator.Heading text
University of Tampere, COMS 20 ITIY3 Introduction to Web Publishing
The order of the listed values in the attribute may not be important as the order of the defined selectors in the stylesheet will affect overlapping rules (the last defined selector wins). While the class attribute can contain multiple values, so an element may belong to multiple classes, the ID is always individual, elements can have only one id. Class is quite versatile and flexible as a selector. You can define a single element for a class if you choose to, but still add others if needed. This cannot be done with an id and element type selectors are too generic. See examples below:
University of Tampere, COMS 21 ITIY3 Introduction to Web Publishing
More examples linked from the course page (selectors)
University of Tampere, COMS 22