CSS Styles Introduction

CSS (Cascading style Sheets) We use CSS to add style to our website. This could be color, font size, positioning, hover effects…

Making a Stylesheet Create a new file called “styles.css” Put this file in the same directory with your html files

Linking to your Stylesheet Now you need to put a link to your stylesheet in each of your html files so that the styles are applied to them. Relationship is stylesheet File Name

Now let’s add flare to our site Adding Styles Now let’s add flare to our site

Placement All of the css code will be written in the styles.css file Also note that you will need to start out with a blank stylesheet so if there’s anything in it, delete it

Format h1 { } First you put the tag you wish to style You follow this by {}. All the styles go inside the {} h1 { }

Adding Styles for a selector Each style is in the format: property: value; So we have: h2 { color: green; font-size: 16px; }

Adding a Color h1 { color:red; } Now all h1 tags in our document will have the color red. h1 { color:red; }

Multiple Styles h1 { color: red; font-size: 24px; } Let’s add a second style to change the font size of the h1. And now the h1 is a little smaller. h1 { color: red; font-size: 24px; }

Adding another Selector Now all paragraphs will be colored green Note: We can add as many selectors as we like! h1 { color:red; font-size:24px; } p { color:green;