My article

Cascading Style Sheets (CSS) are short pieces of code put into a file (style sheet) which create changes to a page element according to the code you use to change the element1. Styles can be put into the 'head' of a file, but this practice slows page load speed. This demo uses styles in the head and an external stylesheet as well.

Styles put in an external stylesheet are call "external stylesheets" and are the preferred way to include styles into a page. External stylesheets can be "linked" from your Website's pages using an anchor link inside of the top---before body tag---of the file that is going to use the external stylesheet to render the styles.

You will need to open this file in a text editor... NOT in Word, but an actual text editor2. Then, after you make your changes, you can refresh the browser to see the results. Once you look at this page's HTML code, you will see the CSS in the top (head) of the page and you can manipulate the code inside of this file. here is what the body element is using for styles:

Explaining styles for this example body element tag
body {
line-height: 1.48;
<- sets distance between top and bottom of words (1.48 times the word height)
font-size: 16px;
<- standardize font size (applies to most all elements in page (body)
color: #555;
<- sets color of ALL page (body) text
width: 90%;
<- width of body to fit inside of browser
margin: 0 auto;
<- sets margins - "0 auto" essentially centers the page in a browser

Try Me

If you want to try a quick change, change the font-family: sans-serif in the 'head' (inline styles) of this file, to this:

font-family: serif;
or this
font-family: "Lucida Console", Monaco, monospace

Copy styles into the body selector* exactly like it is in the above paragraph... CSS is very particular and one missing comma or one missing double-quote will blow up the whole page.


CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

p {
    color: red;
    text-align: center;

This box is made using a CSS class selector.

This box is made using a CSS id selector.

1 An HTML element is an individual component of an HTML document or web page wikipedia explains element
2 Web pages can be created and modified by using professional HTML editors. Editors