EXTERNAL STYLESHEETS AND MORE HTML STYLING HTML and CSS part 2

Stylesheets – a better way to style HTML We’ve been working mainly with inline styling. The professional way to style is a linked stylesheet. Remember, in an HTML document, the head element holds instructions for the browser. Let’s go to your resume project folder. Inside, you should see index.html, which is your resume. In the folder, create sub-folders styles and images. In the styles folder, create a Notepad++ file called style.css and paste the resume CSS into it. All the code you need is under “resume project” at newamericanscode.com/curriculum.html

Getting ready Make sure you put your own personal information in the resume index.html Delete any unneeded code left over from my resume. What kinds of elements are in the page? Which ones are you unfamiliar with? Let’s talk about,,,, etc. Experiment with changing and moving these tags. What happens?

Class and id in CSS Class and id are the “hooks” CSS uses to target elements. Remember what we learned about classes: all objects (elements) that are members of a class, share the same properties of that class. All HTML elements of a class will have the same properties. Why might you want to do this? In the stylesheet, if you say “make all elements blue,” then all elements will be blue. Different types of elements can belong to the same class and an element can have more than one class. All, and elements, for example, can belong to the same class.

The id attribute The id attribute allows you to add or change properties of an element, even if its class says differently. An element can have only one id, and a particular id can only be used once on a page. Why might you want to do this? An element can belong to classes and have an id at the same time. If there is a conflict between the class and the id, the id wins. You will learn later that JavaScript can target and change elements by their type, class and id.

Where is the stylesheet? Notice how there are no inline stylings in the resume HTML page. All the styling is coming from an external stylesheet: styles.css. Stylesheets are in a separate folder, usually called style. The stylesheet gives elements properties and values according to their type, class and id.

Linking to a stylesheet You create a link to the stylesheet in the head element. Use the self-closing element with attributes of type, relationship and reference (path). The href attribute stands for hypertext reference – it tells the browser where to look for a file. The rel attribute tells the browser the relationship between the HTML document and the linked document: the linked CSS file is intended to style the HTML document. Type is not necessary but advisable for other reasons.

Is the stylesheet doing anything? The element in index.html says to your browser, “Follow this path, go to this location, open style.css and follow the styling instructions.” Open index.html in Chrome. Notice there is no styling in the resume – it is plain HTML. Check the element in index.html (it is a child of ) and see if you can find what is wrong. If the stylesheet is linked correctly, you will see colored boxes, etc. Is the path and names correct? What happened?

How the stylesheet “hooks” elements Now look at index.html in Notepad++ and notice elements,,,. These are the elements the stylesheet is hooking on to. In style.css, look for h, div, a, ul (in thin blue text). These are the same,, and in index.html. The difference is: in the style.css, these elements don’t have <> around them. In style.css, inside the curly brackets, notice the property and value, with a colon separating them – just like with inline style, as you might remember. We are giving each element a property and value, but doing it in the stylesheet. What are some of properties and values for the elements?

Styling classes in the stylesheet CSS grabs on to classes in the same way as elements. In index.html, look for class=“right” and class=“left”. What is the parent element of each? Now, go to style.css and look for right and left, in red text. Notice the period before each class name. This tells the browser we’re dealing with a class. Without a period, CSS would think you’re referring to elements called “left” and “right.” Inside the curly brackets, notice the property and value, with a colon separating them. Again, we are giving each member of that class a property and value – just how we did with elements. What are some of properties and values for the classes?

Styling ids in the stylesheet Look for the words footer, name and (in thick blue text) in the stylesheet. Notice the hashtag # before each name. This tells the browser that we’re dealing with an element id. Look at index.html in Notepad++ and notice which elements have ids assigned to them. In style.css, notice each id has properties and values with a colon separating them, just like with elements and classes. What are some of properties and values for the ids?

Descendent selectors (combinators) Notice how there’s a styling for.right class and also a.right p in the stylesheet. This allows us to target certain child elements for different styling. We’re saying, “All elements belonging to the.right class will have this styling, but for paragraph elements inside a.right element, apply these other styles.” This only targets elements inside.right class elements. If a element is inside an element with a different class, then.right p won’t affect it.

Keep working We will work more on your resume assignment. The goal will be to get your resume in final form. With your permission, I would like to publish it to newamericanscode.com under the student portfolio section. This is where we show the work students are doing. Use Google a lot – if you don’t know what a certain element or property is, Google like: HTML CSS div. Professional developers do this all the time. Also go back to the HTML exercises on freecodecamp.org. I will be here to help.

Have some fun Experiment with different properties and values. Do things with color especially. Google hexidecimal colors and look at some sites. Instead of just using simple color values, you can use thousands of different colors with hex values. Learn about the shadow property and how to apply it to text and divs. Learn about the border-radius property and apply it to. Learn about the hover property. When you mouse