y t S n S o i S

y t S n S o i S uct CIntrod s le

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

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 • First you put the tag you wish to style • You follow this by {}. All the styles go inside the {} h 1 { }

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

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

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

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