A Tutorial Series CSS for Beginners: Formatting Text, Links & Lists
Considerations in Formatting Text
A number of variables need to be considered when formatting text. The appearance of any single letter in text is governed by several properties: the font and size of the letter, the coloring, opacity, shadow, and shading. When looked at in terms of an aggregate issues surrounding text one must consider issues such as alignment, indentation, justification, and letter and word spacing.. In what follows we will consider some of the basics. Other less used aspect will be covered in future tutorials as hints, tips and techniques.
CSS Text Color Definitions
Colors in CSS can be defined in a number of ways as demonstrated in the previous tutorial:
- by name. A number of colors have standard name values. This information can be found in information at the W3C site, www.w3.org.
- a rgb(red, green, blue) definition
- an rgba definition. which is a rgb defintion with an additional parameter as to the degree of opacity: 0 = transparent, 1 = opaque.
- a hexadecimal representation indicated by #000000 thru #FFFFFF
- a HSL definition by which a color is indicated by a degree on the color wheel: from 0, (or 360) for red; 120 green; and 240 blue. Saturation, the second value is represented by the degree of shading from 0%, a light grey, to 100% full color. Lighness is represented in percentages from 0%, black, to 100% white.
- a HSLA definition which includes the degree of opacity, from fully transparent (0.0) to fully opaque (1.0)
The following snapshot gives examples of some ot these values.
Examples of Text Color
CSS Text Alignment & Indentation
The two properties associated with the horizontal placement of text are the text-align and text-indent properties.
The text-align property can take one of four values:
- align text flush left
- align text flush right
- align text center
- justify - add spacing to have even margin on both the left and right hand side of the document.
The first line of a paragraph can be indented through the use of the text-indent property whose value isspecified in pixels (px).
The snapshot illustrates the text-align and text-indent properties use.
The CSS text-align Property
CSS Text Decoration
Text decoration refers to having an underline, overline , or line-through designation for text. "Strike through" is often used to indicate a document revision while retaining the text.
With most browsers, features such as links have text decoration for links specified as underline. To override this one would specify "text-decoration:none".
The snapshot illustrates the use of text-decoration.
CSS text-decoration Examples
CSS Text Transformations
With CSS, one has the ability to change the case of the text. The property name is text-transform whose values are:
- lowercase - change all letters to lowercase
- uppercase - change all letters to uppercase
- capitalize - capitalize the first letter of each word
The illustration which follows this demonstrates the ues of the text-transform property.
CSS text-transform Use
CSS Properties for Links
Links were treated in some detail in my tutorial,"A Web Tutorial Series: The HTML Anchor Tag, More on Problem Solving, & Using Browser Development Tools". In addition to the usual formatting of the text there are additional values which can be specified for the anchor. They are:
- a:link - an unvisited link
- a:visited - a link which had been clicked on in the past
- a:hover - when the mouse is positioned over the link
- a:active - an active link.
Note that the styling is based not on the physical attributes but on the state of the link. The physical attributes most often changed for a link are overriding the usual default underling of the link and the color of a link.One of the most effective uses of CSS styling of links is a specification for a:hover. It signals a page visitor that some action is possible. Background color is very effective as a signal.
One note is, these four state variables for links must be presented in the order specified above or they will not work
CSS Properties for Lists
The HTML definition of lists was described in my tutorial, "A Web Tutorial Series: Using HTML Formatting Markup in the Page Body for Paragraphs, Lists, and HTML Text Formatting". As noted in that tutorial there are two basic ways of creating simple lists; an unordered list and an ordered list. They have a default styling: bullets with an unordered list and numbering with an ordered list. CSS provides for alternative styling.
The CSS property is named list-style-type.
For unordered lists the list-style-type has two additional options: a circle or a square.
For ordered lists the list-style-type can be specified as
- lower-roman, for lower case Roman numerals
- upper-roman, for upper case Roman numerals
- lower-alpha, for lower case letters
- upper-alpha, for upper case letters
An image can be used as a marker as well by specifying list-style-image followed by the path to the image.(More on this later.)
Examples of the non-image alternative item marks is show in the snapshot which follows.
CSS Style Marker Alternatives for Lists
Tutorial Wrap Up and What's Next
This tutorial looked at a number of CSS features. We spent a lot effort on text. Color is very important. Text alignment and text indentation was discussed. We looked at issues regarding links and saw that in addition to certain static parameters such as text size and font. Links can come alive with effects for what are sometimes referred to as "pseudo elements".
What we did not get to discuss is the use of fonts with text and that will come up in the next tutorial. Another major item which was hinted on in the descriptions of the link state,psuedo elements (e.g. a:hover), was the importance of the order of the statements. At a higher level, we need to discuss the various ways in which styling is applied and their order in precedence.
Thus far, we saw styling by default, styling by specifying it as an attribute of a HTML element and a style block. Styles can also be specified in external file. Which is the usual way of defining CSS styles. It's very important to understand which style definitions will be applied on a priority basis. By the end of the next tutorial you will be able to describe the hierarchy of style application.
Well that's all for now!