Basic Styling

In your newly linked stylesheet file, you can style things by specifying WHAT you want to style, and what to change. Each time you want to change something, you must first declare what you are changing with a dot, and its name, followed by {curly brackets}. First, here are the basic specifications for what to style.

1. .body

• .body effects everything on the webpage.
• Can controll elements on page like images or lists, but it is more reccomended to use certain declarations for those, instead of .body.

2. .h1, .h2, .h3, .h4, .h5, and .h6

• Changes properties specific to the headers of each size, self-explanatory.

3. .p

• Changes text properties within the paragraph tags.
• ONLY effects text if it is BETWEEN THE P TAGS, does not effect all text.

4. .img

• Changes properties of all images on the page, self explanitory.

Now that you know how to declare these, you need to figure out what to put inbetween them. Here are some basic properties, and some examples. VERY IMPORTANT: YOU MUST PUT A SEMICOLON (;) AFTER EACH ONE

• color: "color"; | Changes the color of text. (ex. color: red;, color: #f55220;, color: rgb(255, 255, 255);)
• background: "color"; | Changes the background color, mainly used in .body to effect the whole page. (ex. background: red;)
• text-align: "side"; | Changes which side of the screen the text will appear on. (ex. text-align: center;, text-align: right;, text-align: justify;)
• font-size: "number" | Changes the size of the font. (ex. font-size: 20px;, font-size: 125%;)
• font-weight: "type"; | Changes the weight of the font. (ex. font-weight: bold;, font-weight: semibold;)
• font-decoration: "type"; | Adds an extra piece to the text. (ex. font-decoration: underline;, font-decoration: strikethrough;)