Adding CSS To Your Web Page

Description: We will be adding css to our page to give it a more lively look. You will be able to change everything, Background color/image, Tag properties, list formats and more.

CSS will allow you to make your basic website look very professional and eye attracting

  • Create A New Folder to Contain your html & css files so everything is in one place

  • Create a new file Called styles.css In the folder, this will allow us to set site wide settings and keeps your code clean.

  • In your HTML file add the outlined code, this will allow the .html file to read and execute the css file with your settings

This code will effect everything on this HTML page that has that tag and will follow the same settings, you can make multiple .css files for different .html pages. just change the <link> in the new HTML file.

In This example we call: body, h1, h3 & test

  • Body

    • background-color: darkgreen; - Makes entire html page one color.

  • h1 (Header 1)

    • color: lime; - makes forcolor/main text color lime

    • background-color: black; - Makes the highlight color of the h1 tag one color.

    • width/height: auto; - used to change the h1 background color highlight to a specific height & width

    • Text-align: center; | will set the h1 alignment to the center of the page.

  • test (custom tag)

    • This is a custom tag, you can make new tags inside your html code to make specific settings/properties for those specific lines of code.

For an entire list of usable css tags please click below