ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A Tutorial Series CSS for Beginners: Formatting Text, Links & Lists

Updated on March 20, 2014

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?
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)