CSS Styling

You should start with something like this

You should have a page with a header, some text organized with divs and paragraphs, an image, and at least one link

Putting Html & css together

HTML is the walls of a house, but CSS is the paint, furniture, curtains, and rugs.

 

Content is defined by HTML, while the padding, border, and margins are defined by CSS in a box model.  You can also style the content with CSS.

 

By changing the CSS, you can change the entire look of a page without changing the HTML structure.

Check out these examples: one, two, and three.  They're all made with the same HTML file, but different CSS files!

<head>
   <title>Your Name</title>
   <link rel="stylesheet" href="kane-style.css">
</head>

Add a Stylesheet

In your HTML file, tell the browser where to find your style sheet.  Do this in the <head></head>, by telling the browser if it follows a link with the relationship stylesheet, it will find the stylesheet at the location of your file. (<link rel="stylesheet" href="yourname-style.css">)

Create the stylesheet

Open a new file, and save it in the same place as your html file with the name yourname-style.css

How CSS works

p {
  color: red;
}
p {
  color: red;
  font-size: 20px;
}

By using HTML tags, you can style parts of your page in different ways.  Here, we're telling the browser to color all paragraph <p></p> text red, and then make it 20px instead of the default 12.

CSS rules go inside brackets {}, and each line must end with a semicolon ;

If your CSS doesn't work, check that you've closed your brackets and ended with a semicolon!

Selective styling

You can get even more specific by giving HTML tags classes.  A class lets you tell the browser to style only divs of a specific class, and not all divs.

Try changing some of your divs to <div class="classname">

"classname" can be anything, but it must be all lower caps and one word!

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
    <link rel="stylesheet" href="kane-style.css">
  </head>
  <body>
    <h1>Your Name</h1>
    <div class="cats">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis ut mauris rutrum rutrum vitae a mi. Vivamus sit amet fringilla turpis. Praesent id erat nisi. Vestibulum auctor ex ac pharetra bibendum.</p>
    </div>
    <div class="dubstep">
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div class="cats">
      <img src="cat.jpg" width=500px height=auto>
    </div>
    <div class="dubstep">
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>
</html>

Selective styling

In the stylesheet, specify a class with .classname {}

Native HTML tags don't need a dot, but classes that you define must have a dot with no space before the class name.

p {
  color: red;
  font-size: 20px;
}

.cats {
  background: blue;
}

.dubstep {
  background: gray;
}

Fancy!

By specifying classes, we've colored all our paragraph text and given divs with different classes different background colors!

/*CHANGE FONT SIZE*/
.cats {
    font-size: 20px;
}

/*CHANGE FONT*/
.cats {
    font-family: helvetica, sans-serif;
}

/*CHANGE FONT COLOR*/
.cats {
    color: lightskyblue;
}

/*ADD A BORDER AND ROUND THE BORDER EDGES*/
.cats {
    border: 1px solid black;
    border-radius: 3px;
}

/*CHANGE THE BACKGROUND COLOR*/
.cats {
    background-color: yellow;
}

/*PAD A DIV*/
.cats {
    padding: 10px;
}

/*MAKE SPACE BETWEEN ONE PIECE OF CONTENT AND ANOTHER*/
.cats {
    margin: 10px;
}

Play around!

What does adding or replacing rules do?

If you're writing several rules for one class, you can combine them between brackets {} as long as they're on separate lines and end with semicolons:

.cats {
    color: lightskyblue;
    border: 1px solid black;
    background-color: yellow;
}

What colors are allowed?

You can use "named colors" or their code equivalents.

 

color: red;

is the same as 

color: #FF0000;

is the same as

color: rgb(255, 0, 0);

 

Try some different color combinations using these palettes.  Color your divs, your headers, your paragraphs, or the body.  If it has a tag or a class you can style it!

What Can be styled?

Anything that has a class or a tag can be styled.  Try some of these examples and see what they do.

/*STYLE A LINK*/
a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}

/*STYLE THE WHOLE BODY*/
body {
  background-color: mintcream;
}

/*STYLE A HEADER*/
h1 {
  color: white;
  text-align: center;
  padding: 2px;
  border-bottom: 5px solid blue;
  text-shadow: 4px 4px 4px black;
}

how about a fancy font

You can include an external font like you would link to a stylesheet.  Find a display or handwriting font from Google and link it in the <head></head> of your HTML file.  If it has a space in the name, replace the space with a +

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

OR

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
h1 {
  font-family: 'Lobster', serif;
}

In your CSS file, use your new font by writing a rule with the font name in quotes.

Try including a serif or sans serif font and using it to just style your paragraph <p></p> text!

What about rule conflicts?

h1 {
    color: pink;
    padding: 20px;
    margin: 20px;
    background-color: blue;
}

h1 {
    color: black;
    padding: 5px;
    margin: 50px;
    border: 5px solid black;
    border-radius: 10px;
    background-color: white;
}

These two rules both govern <h1>  What happens if we include both?

 

If you include a rule that governs the same tag or class, the later style rule takes precedence.

If you're not sure why something is styled the way it is, right-click and select 'Inspect'

This will let you see which rules are currently applied to different parts of the page. Click around and see how your rules are being applied!

What's next?

Try playing around.  Check out W3School's CSS Reference for other properties you can write rules for.

Try out background-image, borders on only one side (hint: there was an example of this earlier), opacity, or text-shadow to fancy up your page.

If you run into trouble, ask on Slack or check out the example HTML and CSS files on the next two slides.

Once you're happy with your page, move on to the next lesson to see how to upload your work.

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
    <link rel="stylesheet" href="kane-style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Krub">
  </head>
  <body>
    <h1>Your Name</h1>
    <div class="cats">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis ut mauris rutrum rutrum vitae a mi. Vivamus sit amet fringilla turpis. Praesent id erat nisi. Vestibulum auctor ex ac pharetra bibendum.</p>
    </div>
    <div class="dubstep">
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div class="cats">
      <img src="cat.jpg" width=500px height=auto>
    </div>
    <div class="dubstep">
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>
</html>

HTML

p {
  font-family: 'Krub', sans-serif;
}

.dubstep {
  background: lightgray;
  color: red;
  padding: 5px;
}

/*CHANGE FONT SIZE*/
.cats {
    font-size: 20px;
    color: lightskyblue;
    border: 1px solid black;
    border-radius: 3px;
    background-color: yellow;
    padding: 10px;
    margin: 10px;
}

/*STYLE A LINK*/
a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}

/*STYLE THE WHOLE BODY*/
body {
  background-color: lightgreen;
}

/*STYLE A HEADER*/
h1 {
  font-family: 'Lobster', cursive, serif;
  color: white;
  text-align: center;
  padding: 2px;
  border-bottom: 5px solid blue;
  text-shadow: 4px 4px 4px black;
}

CSS