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

Color


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

Examples of RGB and hexadecimal color representation of text. The values for RGB are defined in the amount of intensity of red, green and blue in the color "mix". The hexadecimal value is preceeded by a # (pound sign).
Examples of RGB and hexadecimal color representation of text. The values for RGB are defined in the amount of intensity of red, green and blue in the color "mix". The hexadecimal value is preceeded by a # (pound sign).
Examples of RGBA representation of text. The fourth value being the degree of opacity.
Examples of RGBA representation of text. The fourth value being the degree of opacity.
HSL and HSLA text usage.The color values are designations from the color wheel red from 0 to 119; green from 120 to 239; and blue from 240 to 359.
HSL and HSLA text usage.The color values are designations from the color wheel red from 0 to 119; green from 120 to 239; and blue from 240 to 359.

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

The code has been added for text alignment.
The code has been added for text alignment.
These are the results of the use of the text-align property. Note the impact of "right" and "center".
These are the results of the use of the text-align property. Note the impact of "right" and "center".

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

Several examples of text-decoration. text-decoration:none is used to override any default designation. We will see this override when we come to styling links.
Several examples of text-decoration. text-decoration:none is used to override any default designation. We will see this override when we come to styling links.

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

Note the changes: 1) all text in upper case; 2) all text in lower case; 3) the first letter of each word is capitalized. Note also, that this would impact very h1 ,h2,  and h3 header in the page.
Note the changes: 1) all text in upper case; 2) all text in lower case; 3) the first letter of each word is capitalized. Note also, that this would impact very h1 ,h2, and h3 header in the page.

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

The snapshot presents several of the options for list item markers. Note upper and lower case markers exist for both Roman numerals and letters. Images can also be specified (more on that later.)
The snapshot presents several of the options for list item markers. Note upper and lower case markers exist for both Roman numerals and letters. Images can also be specified (more on that later.)

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!

Apprise Us of the Value of this Tutorial to You!

Cast your vote for Was this tutorial of value to you?

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working