Styling HTML

This is scratchpad for adding style into the html code since there is no direct access to the CSS style sheet. (i.e. there is no way to edit the "head" section of the html using the View Source of the this text editor.  The head tag is where you would normally reference your Cascading Style Sheet file to add style.

Below is using simple named colors (i.e. red, purple, green)

This is an unordered list:

  • Purple
  • Red
  • Blue

This is an ordered list using more of the named colors:

  1. Goldenrod
  2. Mediumvioletred
  3. Dimgrey

To Access the complete list of colors click here...

Even with these additional named colors there are only 147 shades of color.

Below is using Hexidecimal Color Codes

Use Hexidecimal Color Codes to get more shades of color than just red, blue or purple

The number of colors that can be represented by this system is 166 = 16,777,216.

Note:  RGB color codes don't seem to work in the text editor

To access a Hexidecimal color picker to get the Hex value for a color click here.....

  1. The hex code is at the top of the color picker box

This is an ordered list using Hexidecimal color values in the html

  1. Purple (Hex value #CC00CC)
  2. Dark Green (Hex value #006600)
  3. Lighter Shade of Green (Hex value #009900)

This is a list using Hexidecimal text color values in the html with a hex background color:

  • Purple Text(Hex value #cc00cc) and yellow background (#FFFF00)
  • Dark Green (Hex value #006600) and Aqua background (#00FFFF)
  • Lighter Shade of Green (Hex value #009900) and Pink background (#FF99FF)

Although you can use a background color it spreads across the entire line and not just behind the text. You need to use a "span" tag around the text to limit the background color to the length of the text string.

  • Purple Text(Hex value #cc00cc) and yellow background (#FFFF00)
  • Dark Green (Hex value #006600) and Aqua background (#00FFFF)
  • Lighter Shade of Green (Hex value #009900) and Pink background (#FF99FF)

Adding center justification of text could be used as a heading for text paragraphs. Putting the text in a one cell table can be used as a border

The Core Values of The City of Raymond Jaxx

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Putting the heading and text in a two cell table can be used as a borders around both cells (i.e. around the title and the body of text.

The Core Values of The City of Raymond Jaxx
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

 

You can also use a "div" tag which is an HTML container and a background color to the entire "div" and a style tag in the text "p" tag for text color gives a colored background with contrasting text color

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Using a "div" tag with a border style and background color style plus a text color style in the in the paragraph text tag gives style control over the background, border and text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Using the previous "div" tag with a border style and background color style plus a text color style with 20 pixel Arial Black font

Bacon Ipsum Bacon ipsum dolor amet cow ground round pork belly cupim venison prosciutto, pig ham biltong. Chuck flank shankle, turkey sirloin salami ball tip buffalo pork chop meatball. Short ribs kielbasa biltong burgdoggen kevin bresaola, alcatra picanha ball tip tri-tip rump. Strip steak prosciutto meatloaf fatback burgdoggen hamburger landjaeger shoulder ground round t-bone filet mignon shank pork chop kevin chicken. Porchetta rump venison bacon beef ribs ribeye meatball. Flank sirloin kevin, shankle salami meatball ball tip sausage bresaola buffalo tail jowl. Ribeye capicola ball tip pastrami ham hock beef.