Basic CSS

Jeseekia Vaughn   |   @MetaDevGirl   |   @GDIdet   | jeseekia@metadevgirl.com

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

About Me

I am a Frontend Web Developer expanding my skills to become a software developer. I am a senior Mechanical Engineering student at Wayne State University. I also instruct and volunteer with Girl Develop It and am passionate about technology education. Follow me on twitter @MetaDevGirl

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite dessert?

Download Your Folder

  • Grab projectfiles.zip.
  • Recommended: Save the unzipped folder somewhere easy to remember, like on your desktop
  • Open the site folder in Sublime Text.

What's wrong with my code?

Why do you think this code isn't working?


WRONG:


				<a href="index.html" Home Page</a>

CORRECT:


				<a href="index.html">Home Page</a>

Don't forget to make sure all your brackets are enclosing your tag name and tag attributes.

What's wrong with my code?

Why do you think this code isn't working?


WRONG:


<ul>
	<li Milk/>
	<li Eggs/>
	<li Cocoa Puffs/>
</ul>

CORRECT:


<ul>
	<li>Milk</li>
	<li>Eggs</li>
	<li>Cocoa Puffs</li>
</ul>

Every list item gets its own set of opening and closing li tags, lists are not self-closing tags.

Questions? Frustrations?

We're here to help!

Frustrated? Let us help!

CSS: What is it?

CSS = Cascading Style Sheets


CSS is a "style sheet language" that lets you style the elements on your page.


CSS is works in conjunction with HTML, but is not HTML itself.

Anatomy of a website

Example of site content Example of site structure Example of site with CSS
Your Content + HTML + CSS = Your Website

Let's develop it

  • Type this line of code in the <head> of your HTML file:
    • 
<link rel="stylesheet" type="text/css" href="styles.css" />
  • Make sure you have a styles.css document saved in your html-site folder!

Check In

Our index.html file now links to our styles.css document.

The <head> section of our HTML looks like this:


<head>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<title>Title of the page </title>
</head>

CSS: What does it look like?

The CSS Rule

The CSS Rule one line

The CSS Rule

The CSS Rule and spacing

CSS Syntax

Declarations: Property and value of style you plan use on HTML element.

  • Declarations end with a semicolon
  • Declarations are surrounded by curly brackets.
  • You can write multiple declarations per selector.

selector {
  property: value;
  property: value;
  property: value;
}

Selector: Element


p {
  property: value;
}

Selects all paragraph elements.


img {
  property: value;
}

Selects all image elements.

Property: Color

The color property changes the color of the text.


p {
  color: red;
  color: #ff0000;
  color: rgb(255, 0, 0);
}

Color name

Hexadecimal value

RGB value

Old-school Hexidecimal Table

How to find ALL THE COLORS!

  • If you work in Photoshop, you can find your colors there.
  • You can get an app like Sip (Mac).
  • Lots of websites!

Property: Background-color

The background-color property changes the color of the background.


p {
  background-color: black;
  background-color: #000000;
  background-color: rgb(0,0,0);
}

Let's develop it

  • Open your styles.css file
  • Give your body a background color (#c4da9a)
  • Assign a color (#8B0036) to your a tags
  • Assign a color (#ffffff) and a background color (#00A9B4) to your h1 tag

body {
  background-color: #c4da9a;
}

h1 {
  background-color: #00A9B4;
  color: #ffffff;
}

a {
  color: #8B0036;
}

Property: Font-family

The font-family property defines which font is used.


p {
  font-family: "MySpecificFont", "Times New Roman", serif;
}

We write our fonts in a font stack: a hierarchical, comma-separated list:

  1. Specific font name
  2. More generic fallback font name
  3. Generic font style (serif, sans-serif, cursive)

Where do I find fonts?

  • Web-safe fonts are assumed to be installed on most computers.
  • Web fonts are hosted online & imported to your site via CSS (magic!)
    • not supported by old browsers
    • may be disabled from displaying in the browser
    • using too many will slow down your page
  • We use a comma-separated list or font stack for either kind.
  • Commonly used font combinations at w3schools.
  • Loads of free web fonts at Google Fonts

Property: Font-size

The font-size property specifies the size of the font.


p {
  font-size: 12px;
  font-size: 1.5em;
  font-size: 100%;
}

Units of measurement:

  • Pixels (absolute)
  • Percentages (relative)
  • Ems (relative)

Property: Fonts (shorthand)


p {
  font-style: italic;
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
}
OR 

p {
  font: italic bold 10px sans-serif;
}

Let's develop it

  • Assign a font family to your paragraph and your h1 tags

p {
  font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
}

h1 {
  background-color: #00A9B4;
  color: #ffffff;
  font-family: Georgia,Times,"Times New Roman",serif;

}

Selector: Child


p em {
  color: yellow;
}

Selects all em elements that are within a paragraph


				<p>This is <em>important.</em></p>

The associated HTML.

Let's develop it

  • We can style the lis we have inside our ol differently than the ones inside our ul.
				            
ol li {
  font: 25px sans-serif;
}

CSS Comments

Just like in HTML, we can use CSS comments to organize or "comment out" our code.

Example:

				    
/* Navigation */
nav ul li {
  background-color: red;
}

/* Links */
a {
  color: orange;
}

/*ol li a {
  color: blue;
}*/

Connecting CSS to HTML

3 ways

Inline

Embedded

External

Connecting CSS to HTML: Inline


<p style="color:red;">Some text.</p>

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Connecting CSS to HTML: Embedded


<head>
  <style type="text/css">
    p {
      color: blue;
      font-size: 12px;
    }
  </style>
</head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Connecting CSS to HTML: Linked


<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Shared resource for several pages.

Reduced file size & bandwidth

Easy to maintain in larger projects.

Preferred by nerds everywhere!

Cascading

Styles "cascade" down until changed


p{
  color:blue;
  font-family: 'Helvetica';
}
p{
  color:red;
}
p{
  font-family: Arial;
}

Another way to think about it: bottom rules override top rules.

One more: the last thing you heard is what you'll remember.

CSS Properties

Many CSS properties have self-explanatory names:

  • background-color
  • font-family
  • font-size
  • color
  • width
  • height

Comprehensive list of all CSS properties

What's wrong with my code?

Why do you think this code isn't working?

WRONG:


h1 {
   color: green
   font-face: serif
}

CORRECT:


h1 {
   color: green;
   font-face: serif;
}

Don't forget semi-colons after CSS properties.

What's wrong with my code?

Why do you think this code isn't working?

WRONG:


body {
   color: grey;
p {
   font-size: 30px;
     }
}

CORRECT:


body {
   color: grey;
}
p {
   font-size: 30px;
}

All CSS selectors and properties must be self contained. Selectors cannot be inside the { } of other selectors.

Pro-tip: Inspecting Element

Let's right-click, "Inspect Element" & look at some code!


A List Apart homepage Tattly homepage

Resources

  • Codecademy, with interactive HTML lessons to help you review.