CSS, cascading style sheets, are used to style web pages. All formatting for a web page should be done with CSS instead of with HTML itself. HTML was designed to create content and to section the various parts of the web pages.

CSS can be used to change fonts, colors, spacing, positioning, and can even be used to create graphics. CSS is best separated from the HTML formatting, as a separate document allows multiple web pages of a website to be styled from just the one document.

When using a separate CSS document, it is important to link the file in the head of the HTML document you want sytled. There are two important attributes to include in the style tag to activate the document.

The rel attribute designates the relationship between the HTML document and the document that is being linked to the HTML document. The href, like the a tag, tells the HTML document where the document being linked to is located.

There are a few different selectors to target in CSS. The main selectors are:

• Element selector p {}
• ID selector #idName {}
• Class selector .className {}
• Universal selector * {}
• Grouping selector p, h1, h2 {}

Selectors are used to either target a specific element on a web page or a group of elements. If you only want one or a couple of elements chosen, an ID selector or class selector would be used. If all of a certain element, such as a paragraph needs to look a certain way, using the p element selector would be the way to style them.

Comments are useful in CSS to either help to remember what the coding is supposed to do or to help if someone else were to look at the code. The comments would help them understand what the original programmer was attemtping to do with the code. That new programmer would then be able to add onto the code whether to fix what was done or to add onto it if needed. The following code is the syntax for inserting a comment into a CSS file.

There are several ways to add color to text and to backgrounds. CSS can use the following to add color to a web page:

• Color Keywords - blue, green, black, white
• Hex Values - #rrggbb
• RGBA Colors - rbga(red, green, blue, aplha)*
• HSL Colors - hsl(hue, saturation, lightness)
• HSLA Colors - hsla(hue, saturation, lightness, alpha)

Hex values are made of six characters between letters and numbers. They go from 0-9 and a-f. The first two characters is the amount of red. The second two characters is the amount of green. The last two characters is the amount of blue.

RGBA, HSL, and HSLA use numbers between 0 and 255. The only color value that uses words are the color keywords, which have a selection that are safe for web page use.

* The alpha category is what defines whether the color is anywhere from fully transparent to fully opaque.

The above shows an example of color used to change the font.

There are two different ways to space elements from each other. Depending on the situation either margin or padding would be used.

Margin is used to create space outside of the border of the element. Values for a margin can be written together in a shortcut(margin: 0, 0, 0, 0; top, right, bottom, left), but can also be written separately as follows:

• margin-top
• margin-right
• margin-bottom
• margin-left

Padding is similar to margin, but instead of creating space outside of the element, it adds space within the element. Just like margin, padding does have a written shortcut (padding: 0, 0, 0, 0; top, right, bottom, left). To write it separately, it would be written as follows:

• padding-top
• padding-right
• padding-bottom
• padding-left

If you want a element to stay within a certain width and height, margin would be the better choice. If you want an element to look bigger with space between the text and the rest of the element, such as a button, paddign would be the better choice.

There are several fonts that are safe to use on the web without using a website such as google fonts. The basic fonts are either serif or sans-serif fonts, but the specific fonts are:

• Arial
• Verdana
• Tahoma
• Trebuchet MS
• Times New Roman
• Georgia
• Garamond
• Courier New
• Brush Script MT

Just because all of these fonts are web safe, does not mean that they are all to be used whenever. Some such as Courier New and Brush Script MT should be used only when necessary. They are not the easiest to read, so they should be used sparingly.

W3Schools were used as a reference for this technical documention. For more information on CSS, please visit the website.