1. CSS IS A LANGUAGE DESIGNED TO TARGET HTML ELEMENTS AND NODES BY TYPE, CLASS, ID AND VALUE, AND CHANGE THEIR VALUES CSS – change how your HTML looks and acts

2. CSS-Cascading Style Sheets CSS is used to style HTML. With CSS, you can create boxes, shadows, gradients and more. CSS provides properties and values for HTML attributes. We’re going to use inline CSS. This when you put CSS directly into the opening element tag. Ordinarily, your CSS is in a separate file, called a stylesheet. You embed a link to the stylesheet in the head of the HTML document.

3. Add some styling Let’s go back to HTML exercise. Find a paragraph and give it an attribute called style, which is used a lot in HTML: Hello, my name is Marty Now, let’s use CSS to give the style attribute a color property, with a value of red: Hello, my name is Marty. Now save the document and open it with Chrome. What happened and how did it happen? Use the words element, attribute, property and value in your answer.

4. Adding more properties and values We can also put several properties and values after a single attribute. Let’s do that with style. Notice the semicolon and how the quotes enclose all the properties. What are some other properties we can give the paragraph element? Why does the text inside the paragraph change when we style the paragraph? Hint: The text is an element and the tags surround it.

5. Adding more objects Let’s add some photos to your site. Find a photo in your computer and call it test.jpg. Inside the folder “projects,” create a new folder called “images.” Copy the photo of yourself in there and call it “me.jpg” Use the tag, one of the few self-closing tags. In Notepad++, put this somewhere in the body of your index page.

6. Adding a source attribute The element needs an HTML attribute called source. But the source attribute needs a value. In HTML, the values are in quotation marks after the equal sign. For the tag, the value happens to be a pathway to the photo: Notice how the source attribute has no property, but only a value. And the value is a path to the photo.

7. You can do a lot! Go to www.w3schools.com/cssref/. On that page is a list of many HTML properties you can control with CSS.www.w3schools.com/cssref/ Let’s work with the element. A is just a box and you use CSS to give it properties like height, width, color and more. Some of the properties, like margin, gradient and shadow, are more complex and we’ll work on those in later classes.

8. Inline vs. block elements Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Unless you set a width property and value, a block element like a will take up the whole width of the body element (page).

9. Block-level elements are wide The element is a block-level element and we often use it as a container for other elements. Unless you set a width property and value, the will take up the whole width of the element (page), or, if the is inside another, it will take up the whole width of the containing (parent). Examples of block-level elements:, -,,

10. Set the width of block elements We use CSS to change the width of block elements. Remember, you set width inline with CSS like style=“width:100px” OR style=“width: 50%” (of the width of the parent element) Go back to your exercise and experiment with different widths and colors of your and other block-level elements.

11. Inline elements Inline elements are used to style smaller things inside a line. An inline element does not start on a new line and only takes up as much width as its contents. Examples of inline elements:,, Keep this in mind: An inline element will shrink to fit what’s inside of it. A block element will expand to fit what’s around it. We use CSS to change what block and inline elements do and how they look.

12. The element The element is an inline element that is often used as a container for some text. Like, the element has no required attributes, but style and class are common. When used together with CSS, the element can be used to style parts of the text. Run this code in a page and see what happens: My Important Heading What are other ways to change the color of “Important”?

13. Inline never goes inside block You can always put an inline element inside a block element: you can always put a inside of a. But you should never put a block element inside of an inline element: never put a inside of a or element, for example. A block element can always be the parent of an inline element, but you should never make a block element the child of an inline element. The results are unpredictable.

14. Your resume assignment Your first real project will be to recast your resume into a web page. When it looks good enough, we will upload it to the school’s website to show our progress (and we’ll get some practice publishing to a server). Check on on the school’s Website curriculum page for HTML and CSS files for the resume assignment and copy those into a new folder called resume. You can put the resume folder anywhere in your computer. When you have done this correctly, you should be able to open index.html in your browser. Notice it has no styling.

15. Resume assignment Go into index.html and replace my personal information with your personal information. Work on your resume at home. You don’t need to use my exact same organization. Feel free to experiment and we will work on your resume next class. Homework: Let’s do exercises on http://www.freecodecamp.com/challenges/say-hello-to- html-elemurents. I will help. http://www.freecodecamp.com/challenges/say-hello-to- html-elemurents