Very new - Having trouble with background colour on Tribute Page

Very new - Having trouble with background colour on Tribute Page
0

#1

Hi everyone, thanks for trying to help a beginner!

I’m trying to change the background colour in secitons of my tribute page am struggling to determine where I have gone wrong - my code looks identical to the ‘Give a Background Color to a Div Element’ lesson.

Is sharing my codepen the right way of doing this? http://codepen.io/Ywehc/pen/KaGEoq

Any help or feedback is appreciated! (I know the design and colours are poor choices but focusing on the fundamentals).

Thanks!


#2

You’ve got an extra curly brace { on line 12 that’s confusing the interpreter. Deleting that should fix it. You can prevent these issues in CodePen by writing all of your CSS in the CSS section of the editor. It has some syntax checking that points these things out. :thumbsup:


#3

I’ll be honest…you have me stumped. I grabbed all your code and just stuck it in a plain old html file and I cannot get those two bottom text section to have any styling. But everything looks alright, though I did add ending “;” to your two inline styles. IE: <h2> style="color: green;"<h2>......</h2>

It seems the styling stops after the image, so I’m going start going over the code beyond that a little deeper. There’s gotta be something here. I’ll keep ya updated if I find anything.


#4

Yep! that’s it. Excellent catch!


#5

Thanks so much! There is not a lot of guidance on when to use each editor, I didn’t even realized I had moved from html to css. Should I just be doing all my work from the CSS editor for now or will I need html for this project and future ones?


#6

HTML and CSS are two separate technologies that work together in every web page. HTML consists of the elements like <p> and <div> that give your page structure. It’s important because without these elements, your browser would just see a big block of text and not know what to do with it. CSS tells the browser how to style these elements, and without this all the user would see is a big block of text.

So, in CodePen, you’re going to use both editors at the same time. Keep your HTML in the HTML editor, and the CSS in the CSS editor. When you get to JavaScript, you’ll use the JavaScript editor. CodePen makes all of these work together for you, but in short time you’ll need to move on to working locally with a text editor or IDE on your desktop.

One point that isn’t yet covered well in the early curriculum here is that putting style in HTML is a really, really, really bad idea.

<h1 style="color: blue">What is this nightmare scenario?!?</h1>

It’s always better to use classes or ids. I forked your pen and moved all of the style to the CSS portion. See if you can spot the differences in the code.

http://codepen.io/PortableStick/pen/MJLwQR