Skip to content

Instantly share code, notes, and snippets.

@stevekinney

stevekinney/introduction-to-css.md

Last active December 12, 2015 09:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevekinney/4751517 to your computer and use it in GitHub Desktop.
Save stevekinney/4751517 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
introduction-to-css.md

An Introduction to CSS

Your Mission

Let's try something slightly different this week. Instead of hiding the assignment details down at the bottom, I am going to put them up here.

Homework

Checking Homework

With the Codecademy assignments, I am just going to check to make sure that the badge for the course is listed on your account. Make sure that it is or email me if you have an issue. If you don't fill out the form telling me what your usename is, then it's going to be impossible for me to confirm that you did your homework.

Submit your work here. You only need to copy and paste the style.css file. This is due at the end of the period today.

CSS is a funny acronym that stands for "cascading style sheets". Don't worry about the cascading part right now, we'll deal with that in a bit. Right now, we want to make our pages pretty—or at least prettier.

I've got some good news and bad news for you. The bad news is that CSS is a completely different syntax than HTML. The good news is that it is pretty simple and I think you'll get the hang of it pretty quickly.

Let's say we have a page with the following content:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

I left out all of the boiler plate stuff (e.g. <html>, <head>, <body>, etc.) for the sake of clarity. Let's just make believe I included it. Now, let's get to styling our page.

There are two ways to style our page with CSS. The first—and usually, the best—way is to create a file that ends in .css and link to it from your HTML file. To do this, you would include the following in the <head> section of your HTML file.

<link rel="stylesheet" href="YOUR_FILE_NAME_HERE.css" type="text/css" charset="utf-8">

Don't worry about anything you don't understand in there. The only important part is that YOUR_FILE_NAME_HERE.css actually points to whatever you named your file. The other option is to shove all of your CSS between a set of <style></style> tags in the <head> of your HTML file.

Here is some example CSS:

p {
	color: red;
}

This little snipped of CSS syntax tells your browser to go and look for all of the <p> tags in your HTML file and change their text color to red. You can include multiple statements inside those curly braces.

h1 {
	color: blue;
	background-color: black;
}

It should be pretty obvious what that does. It looks for all of the <h1> tags and it changes the text color to blue and the background color to black.

So, what other properties are there?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment