Intro to CSS

Objectives

  • Define CSS and the role that it plays in WebDev
  • View websites before and after CSS has been added
  • Understand the "general rule" for CSS syntax

Cascading Style Sheets

The "adjectives"

selector {
  property: value;
  anotherProperty: value;
}

The General Rule

/*Make All h1's purple and 56px font*/
h1 {
  color: purple;
  font-size: 56px;
}

/*Give All img's a 3px red border*/

img {
  border-color: red;
  border-width: 3px;
}

Examples

<html>
<head>
    <title>About Rusty</title>
    <style type="text/css">
        li {
	    color: red;
	}
    </style>
</head>
<h3 style="color: pink;">blah blah blah </h3>
<h3 style="color: pink;">knock knock </h3>

<p style="color: yellow;">blah blah blah </p>

Style Tag

Inline

Where do we write our styles?

<html>
<head>
    <title>About Rusty</title>
    <style type="text/css">
        li {
	    color: red;
	}
    </style>
</head>
<h3 style="color: pink;">blah blah blah </h3>
<h3 style="color: pink;">knock knock </h3>

<p style="color: yellow;">blah blah blah </p>

Style Tag

Inline

Bad Idea!

<!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
	
</body>
</html>

Write our CSS in a separate CSS file

h1 {
  color: purple;
}

h3 {
 color: pink;
}

In our app.css file:

The Result

Using the <link> tag

Closing Tags

<h1>I need a closing tag </h1>

<p>Me too!</p>

Self-Closing Tags

<!-- No closing tag or inner text needed -->

<img src="corgi.png">

<link href="style.css">

<!-- Don't worry about what these tags do yet -->

Adding Additional Information To Tags

<img src="corgi.png">

<p class="selected">woof woof</p>

<a href="www.google.com">Click me to go to Google</a>

<link rel="stylesheet" type="text/css" href="style.css">
<tag name="value"></tag>

Attributes

Images

<img src="corgi.png">

Links

<a href="www.google.com">Click me to go to Google</a>
<a href="www.reddit.com">Click me to go to Reddit</a>
<a href="url">Link Text</a>