CSS Styling Basics

CSS Code Definitions

The following is a copy of the main CSS is used on this website.

@charset "UTF-8"; Specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character
body { Defines the document's body
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; Sets all the font properties in one declaration
background-color: #42413C; Sets the background color of an element
margin: 0; Sets all the margin properties in one declaration
padding: 0; Sets all the padding properties in one declaration
color: #000; Sets the color of text. First 2 numbers are red, second numbers are green and third numbers are blue.

.definition { This is used strictly for vocab purposes and highlights the term next to the code
color: #C26365; A shade of red

ul, ol, dl { Unordered list, ordered list and decription list
padding: 0;
margin: 0;
color: undefined; Color not defined

h1, h2, h3, h4, h5, h6, p { Defines al the headings and paragraphs a specific color unless specified below.
margin-top: 0; Sets the top margin of an element
padding-right: 15px; Sets the right padding of an element
padding-left: 15px; Sets the left padding of an element

a img { Hyperlink image
border: none; Sets all the border properties in one declaration

a:link { Hyperlink style
color: #42413C; The color of the hyperlink
text-decoration: underline; Specifies the decoration added to text

a:visited { Hyperlink of a visited link
color: #6E6C64;
text-decoration: underline;

a:hover, a:active, a:focus { The cursor
text-decoration: none;

.container { Parent class containing everything on the page
width: 960px; Sets the width of an element
background-color: #FFFFFF;
margin: 0 auto;

header { Defines a header for a document or section
background-color: #ADB96E;

.sidebar1 { Where the side links are
float: left; Specifies whether or not a box should float on the page
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px; Sets the bottom padding of an element

.content { Where all the information is
padding: 10px 0;
width: 780px;
float: right;

.content ul, .content ol { content unorganized and organized list
padding: 0 15px 15px 40px;

nav ul { Defines text that should be stylistically different from normal text in the navigation
list-style: none; Sets all the properties for a list in one declaration
border-top: 1px solid #666; Sets all the top border properties in one declaration
margin-bottom: 15px; Sets the bottom margin of an element

nav li { Navigation list
border-bottom: 1px solid #666; Sets all the bottom border properties in one declaration

nav a, nav a:visited { Navigation link and applies when visited
padding: 5px 5px 5px 15px;
display: block; Specifies how a certain HTML element should be displayed
width: 160px;
text-decoration: none;
background-color: #C6D580;

nav a:hover, nav a:active, nav a:focus { Navigation cursor
background-color: #ADB96E;
color: #FFF;

footer { Defines a footer for a document or section
padding: 10px 0;
background-color: #CCC49F;
position: relative; Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
clear: both; Specifies which sides of an element where other floating elements are not allowed

header, section, footer, aside, article, figure { Specifies all of the types of CSS designs unless specified
display: block;

section h2 { Changes the second heading section to blue for demonstration
color: #0C40EE;

footer h2 { Changes second heading footer to white for demonstration
color: #F9F9F9;

section h3 { Changes the third heading footer to red for demonstration
color: #660000;
font-weight: normal; Specifies the weight of a font

section h3 { Overrights the above section 3 as blue instead of red
color: #000066;
font-weight: bold;

section p { Changes the paragraph based on what is applied below
color: black;
font-family: Arial;

Element/Class/Compound Rules Differences

Element: Elements can have both classes and unique IDs in the html code. The selector is usually the HTML element in the page and usually allows you to to customize it. Examples include the body and the h1 (heading 1) which can be customized with a different font, color and other properties.

Class: Classes can be part of the elements and they are not unique like IDs. This means you can have more than one class within a section of the HTML code as well as the same class within the section. Examples include a div class and a span class which div defines a section in the document while the span defines content inside a paragraph. The class is a block of all content but the type of content can vary.

Compound Rules: Combining more than one class or id or tag. This is usually read backwards and can be used to style what a link might look like. Specifically, the compound rules imply the a tag or the hyperlink such a: hover or a: active or a: focus.

What is a box model?

When you inspect the element on a web page, the inspector appears on the bottom of the computer. On the right is a box called the box model.The box model allows us to place a border around elements and space elements in relation to other elements. The box model has four sections: margins, border, padding and content.

Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent.

Border - A border that goes around the padding and content. The border is inherited from the color property of the box.

Padding - Clears an area around the content. The padding is affected by the background color of the box.

Content - The content of the box, where text and images appear.