Intro to CSS - Lesson 1.0
! Don't forget that values end with ;
Back   Next ( Press Enter ) Review  


This paragraph is an html element. CSS was made to let you control the look of html elements. There are a bunch of "style properties" that you can use, and each one requires some kind of value. "color" is the style property for controlling text color. To change the color of this text, type color: blue; into the input field at the top of the page. Feel free to play around with different colors! ( colors that are more than one word don't use spaces, so dark red becomes darkred )

In a CSS DeclerationThe : is what separates the style property from the value, and the ; signifies the end of the value. Like an english sentence, except instead of a . we use ; You might notice that the styles apply to the text before you type ; and that is normal. It is still required to complete the decleration so that you can apply the next style.

Examples: color: red; color: blue; color: black;


You just wrote your first "CSS Decloration". A complete decloration is a style property and a value. You can stack multiple declorations together to add more styles to the element. Let's add a border around this element. The border property takes 3 values though: you have to tell it how big you want it in pixels (px), what pattern you want to use, and the color you'd like. For this example try border: 2px solid black;. Solid can be replaced with dotted or dashed too. Make sure to experiment and see how they work with different widths and colors!

Examples: border: 10px solid black; border: 20px dashed red; border: 5px dotted blue;


The width of an element can play a big roll on how it's displayed. Sometimes screens are so wide that reading a paragraph becomes too much eye movement and hard to track the lines. Easily control the width of your elements with percentages or pixels. Try width: 80%;

Examples: width: 100%; width: 300px; width: 50%;


Things are looking good! padding is the space between the border and the content of the element. To add padding simply type padding: 50px;

padding can take up to 4 values. If one is supplied, it will apply to all four sides of the element. if two values are provided, the first will go to the top and bottom, and the second will be applied to the left and right sides. If you supply three, the 2nd value will get applied to both sides. Now if you supply 4 values they will start at the top, then go to the right, the bottom, and finally the left side. Use 0 in any spot to have no padding :)

Examples: padding: 20px; padding: 50px 20px; padding: 5px 10px 0 10px;


The margin property allows you to manage the space on the outside of the border. The values for margin are just like padding, you can supply 1, 2, 3, or 4. Try adding margin: 20px;!

Protip: In order to center an element on the page, use margin: 50px auto; to apply 50px to the top and bottom, and automatically adjust your margins on the left and right.

Examples: margin: 20px; margin: 50px auto; margin: 20px 10px 15px 30px;


Some style properties are two or more words, but we don't use spaces! We use hyphens. so when you want to change the background color, you'll want to use the background-color property. For this example, try background-color: white; and other variations!

Examples: background-color: red; background-color: blue; background-color: black;


This is controled by font-family, try typing font-family: arial; and watch this text transform!

Examples: font-family: arial; font-family: lobster, arial; font-family: helvetica, arial;


Font weight is very important and just as simple as the rest of the css selectors we've covered. Type font-weight: bold; into the input. Then try switching between thin, regular and bold. Not every font has these variations, so if the font doesn't change, it's just defaulting to the normal weight of the font.

Examples: font-weight: normal; font-weight: bold;


Font style is how we can italicize text. Try font-style: italic; into the input. Not every font has these variations, so if you dont see a change, the font probably doesn't support it.

Examples: font-style: italic; font-style: normal;


Font size plays a huge roll in how your visitors enjoy consuming your content. Let's make this text a lot easier to read by making it bigger. To adjust the font size, simply type font-size: 19px;.

Examples: font-size: 16px; font-size: 32px; font-size: 60px;


The size isn't the only thing that's important though, white space between the lines also dramatically improves the visual asthetics and allows for easier reading. To adjust the line height, simply type line-height: 35px;.

Examples: line-height: 25px; line-height: 50px; line-height: 100px;


You're doing great! Let's say we want to align our text to the left, the right, justify, or center. What do you think we'll be typing? if you guessed text-align you were right! Try typing text-align: left;.

Examples: text-align: left; text-align: center; text-align: justify; text-align: right;


Now that we've made it easy, it's time for a small curve ball. If we want to add curves to our borders, we will be styling the element with the property border-radius. Try typing border-radius: 20px;.

Examples: border-radius: 15px; border-radius: 30px; border-radius: 4px;

That's the basics of Style Properties.

Now let's put it all together, Look at all that CSS you just wrote!

Nice job! That's your first 13 lines of CSS. Now it's time to learn about selectors. Selectors are how you attach your css style properties to a specific element on your site. We group styles properties together by enclosing them inside { these brackets }
We place the selector before the opening { bracket. In this example we are selecting the paragraph tag <p> but we only have to supply p.
So now the full CSS Rule looks like:
p {

Yeah, you wrote that, you Boss!