Intro to CSS

 

Slide 2:

CSS works with your already existing HTML code. It has 3 main characteristics.

  • Saves time by editing already existing HTML code
  • Saved in a separate .CSS file
  • details how the HTML code should appear

Slide 3:

There are a few different ways to use CSS.

  1. Internal Style Sheet
  2. External Style Sheet (separate file)

We are going to learn CSS by making a separate file. This makes everything cleaner. The only catch is that we need to have another window open. To help clean things up we’re going to use Gedit, which is a text editor with tabs.

Slide 4:

Gedit is a text editor, but one that’s much better than what you’ve been using.

Open Gedit :                        Open Settings. Make your preferences look like mine:

(Images coming soon)

Slide 5:

We want a plain HTML file without any styling because we’re going to let CSS do all the styling for us. So we need to remove all the “style” tags out of the HTML. After you have made the changes file-> Save As (we want to keep the original). Save your file as webpage2.html

(images coming soon)

Slide 7:

You should now have 2 files open. Since we are using Gedit they are accessible through the tabs at the top. In order to link these two files together we need to write that into our HTML file. This goes between the head tags.

<link href='mystyle.css' rel='stylesheet' type='text/css'>

Slide 8:

CSS uses the curly brackets { } instead of the angle brackets. <>

Their placement is important, so make sure to put them in the right place.

body{
    background-color: pink;
}
h1{
    color: navy;
    left-margin: 20px;
}
p{
    color: red;
    left-margin: 30px;
}

Slide 9:

The point of this CSS file is that it changes all of the elements at the same time. As we move on you’ll see how more powerful it is. Notice how <h1> is navy-blue and it’s indented. This will be the case every time you use h1. Similarly with <p> which will always be red and indented 30px.

Slide 10: You Try

Make your HTML file look the same as it did before (as much as possible) using CSS styling instead of HTML styling.