Skip to content

CSS

Jump to bottom
Hurshal Patel edited this page Oct 12, 2016 · 2 revisions

What is CSS?

CSS (Cascading Style Sheets) is a language which lets you customize the appearance, layout, and behavior of certain HTML elements. This lets you do things like add gradient backgrounds, rotate elements, hide elements, and more.

What does CSS look like?

CSS is essentially a set of rules which you want to apply to the page. Each rule has 2 parts:

  • Selector - the first part of a CSS rule that is used to select elements by tag name, id, class, or other features of that element. This is how CSS knows which elements to apply this rule to.
  • Property - the second part of a CSS rule is a { block } with zero or more properties. Each property controls some presentation aspect of that element and its children, such as font-family or color. These are the actual things you want to modify about the selected elements such as 'color :red;'.

Here is an example of some CSS:

/* the selector is body, so this selects the <body> tag. the rule
   makes the background blue.
*/
body {
    background-color: blue;
}

/* the selector is h1, so this rule will only apply to <h1> tags.
   this rule makes all <h1> tags have red text and a green background.
*/
h1 {
    color: red;
    background-color: green;
}

/* this selects any tag that has a "bold" class applied to it.
   for example, this would select <p class="bold"> and <div class="bold">
   but not <h1 class="notbold">. this rule makes the text bold.
*/
.bold {
    font-weight: bold;
}

/* this selects the tag with id "title" and makes the text really big. */
#title {
    font-size: 72px;
}

What is the difference between a class and an id?

A class can be applied to many elements, but an id can only be applied to a single element. If you want multiple elements to have the same style, you should use a class so they can all share the same CSS rule. If you only want to style a specific element, you should use an id so the CSS rule does not affect anything else.

##A note on CSS specificity You may be wondering what happens when you have conflicting CSS rules applied to the same element. For example, what color would the text in

<p id="foo" class="bar">What color am I?</p>

be if the CSS looks like this?

p {
    color: red;
}

.bar {
    color: green;
}

#foo {
    color: blue;
}

CSS uses "specificity" to decide which property to use when there are ties. The most "specific" rule wins. In the example above, the text would be blue because the id foo is the most specific selector. The class bar is the second most specific, and the p selector is the least specific. This is because an id can only select a single element, but a class will select all elements which have that class applied, and an element selector like p will select every single <p> tag on the page.

Project Avatar

http://bit.ly/mbit-intro-avatar

  1. Copy and paste the avatar.html and avatar.css files into your username.github.io repository.
  2. Create a link from your index.html to your avatar.html
  3. Make it look just the way you want. Feel free to change the shapes too!

Project Logo Puzzle

http://bit.ly/mbit-intro-logo

  1. Put logo.html and logo.css into your repository
  2. Move the pieces around in logo.css until the logo is in the right place
  3. Change the colors and make it your own! We will share the best ones at the end of the week.

Project Index

  1. Create a CSS file for your index.html, call it index.css.
  2. Add a <link rel="stylesheet" href="index.css"> to the head of your index.html
  3. Experiment with adding colors and styles to your page, try using color, background-color, font-size
  4. Try adding a font from Google Fonts to your index, http://google.com/fonts/

CSS Resources

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS

Clone this wiki locally