jj_hennessy jj_hennessy - 4 months ago 38
CSS Question

CSS Not Appearing On Website - Linked Properly

I am taking an online course for learning web development and in the current project we were assigned to, we were supposed to write CSS code to change the appearance of certain words, backgrounds, etc. After writing out all the CSS code, it had not changed a single thing on my actual website. Any ideas as to what I could be doing wrong?

Here is my HTML

<html>
<head>
<title>Selectors Exercise</title>
<link rel="stylesheet" type="text/css" href="selectors.css">

</head>
<body>
<h1>Selectors Exercise</h1>

<p>PARAGRAPH NOT INSIDE A DIV</p>

<div>
<p class="hello">I am a paragraph with a class</p>
<p id="special">I am a paragraph with an ID</p>

<h2>I am an awesome h2</h2>


<p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever.</p>

</div>

<div>
<h2>Things I need to do</h2>

<ul>
<li>Walk Dog <input type="checkbox" checked> </li>
<li>Feed Dog <input type="checkbox" checked> </li>
<li>Wash Dog <input type="checkbox"></li>
</ul>
</div>

<div>
<h2>I am another awesome h2</h2>

<p>Cardigan Tumblr mlkshk, fap tilde 3 wolf moon Portland. Heirloom health goth taxidermy blog lo-fi selfies, post-ironic master cleanse fingerstache normcore. Kickstarter plaid twee, bespoke single-origin coffee sustainable lo-fi vinyl Pinterest pork belly <em>cronut skateboard</em> 3 wolf moon. Normcore single-origin coffee salvia, bespoke Austin swag Godard before they sold out kogi disrupt locavore. Lumbersexual Shoreditch Vice, artisan American Apparel master cleanse yr salvia vegan. Bespoke letterpress heirloom kale chips deep v four loko. Lomo sustainable put a bird on it trust fund post-ironic</p>

<p>I'm the second paragraph inside this div!</p>
</div>

<p>PARAGRAPH NOT INSIDE A DIV</p>


<div>
<h2>A less awesome h2</h2>

<p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever</p>

<p>One last paragraph here!</p>

<a href="http://www.facebook.com">I am a link to facebook</a>
<a href="http://www.facebook.com">I am another link to facebook</a>
<br>

<input type="text" name="name" /><label> Name</label><br/>
<input type="password" name="password" /><label> Password</label><br/>

</div>

<p>PARAGRAPH NOT INSIDE A DIV</p>

</body>
</html>


Here is my CSS

/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS!*/

/* Give the <body> element a background of #bdc3c7*/
body {
background-color: #bdc3c7;
}

/* Make the <h1> element #9b59b6*/
h1 {
color: #9b59b6;
}

/* Make all <h2> elements orange */
h2 {
color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/
li {
color: #010090;
}

/*Change the background on every paragraph to be yellow*/
p {
background-color: yellow;
}

/*Make all inputs have a 3px red border*/
input {
border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/
.hello {
background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special {
border: 2px solid #900099;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
p div {
font: 25px;
}

/*Make only inputs with type 'text' have a gray background*/
input[type = "text"] {
background: grey;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/
p div(3) {
background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
p(2) div(3){
border: 5px solid white;
}

/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
em div(3){
font: 20px white;
}

Answer

When you are building a basic website having all your files in the same folder may not seem troublesome, but when you are building complex websites comprised of many pages, having all project files in the same folder will prove to cause more work for you in the long run and your project will appear unorganized. Generally when setting up new web projects you should have the following project folder structure or some variation of it: html css js assets -assets/images -assets/icons

When you are linking external style sheets (CSS/bootstrap, etc) it is bad practice to use inline styles because it makes your HTML longer and harder for others to follow. When linking css you should make sure to include the correct path within your computer's root directory. Shown below.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="../css/styles.css">
...

This example will exit (go back in the root directory) HTML folder by using ../ and then enter the css folder and find the file styles.css It's important to understand how to find the path of a file and its relative position within your computers directory when developing web sites. I hope I explained the concept well enough for you to understand. Hope this helps!