Bit of CSS help.

Associate
Joined
8 Jan 2011
Posts
444
Doing a little exercise for University and this coding is really getting under my skin, here are the questions I'm stuck on:

6. For every third list item, change the text colour to #39F.
7. For every 2nd to last list item, add a 1px solid #F00 border.
8. For every even table row, change the background colour to #FF6.
9. For the first column in every row of the table, change the font weight to bold.

Any help would be really appreciated, I've tried forums/google searches, nothing is coming up.
 
Lmfao sorry, ;_;

css.

@charset "utf-8";
/* section 'c' by dc. */


body {font-family: Calibri, Arial, sans-serif; color: #333;}
td {text-align:center;}
/*a:link, a:visited {color:#F00; text-decoration:none;}*/
a:hover {text-decoration:underline;}
h1, h2{padding:5px; color:white; border:2px solid #00F; border-radius:10px; text-shadow: 4px 2px 6px #000;}
h1{background-color: #F99}
h2, a:link, a:visited{background-color: #CCF; text-align:right; color:#FF6;}
p:first-letter{color:#00F; font-weight: bold;}
p:first-line{color:#090;}
a:link, a:visited {color:#FFF; background-color:#F00;}
ul{color:#F90;}
tr:nth-child(odd){background-color:#eee;}
tr:nth-child(even){background-color:#ff6;}
input#button1{color:#00F; text-decoration:none;}
html

<!DOCTYPE html>
<html>
<head>
<title>CIS2107 | Portfolio Exercise 2</title>


<link href="sectionc.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>CIS2107 | Portfolio Exercise 2</h1>

<h2>Knight Rider</h2>
<p>Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. <a href="http://www.edgehill.ac.uk">Michael Knight</a>, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</p>
<h2>Muskehounds</h2>
<p>One for all and all for one, <a href="link.png">Muskehounds</a> are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>

<h2>Hong Kong Phooey</h2>
<p>Hong Kong Phooey, number one super guy. <a href="http://www.edgehill.ac.uk">Hong Kong Phooey</a>, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<h2><a href="index.html">The Littlest Hobo</a></h2>
<p>There's a voice that keeps on calling me. Down the road, that's where I'll <a href="http://www.edgehill.ac.uk">always</a> be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<ul>
<li>Item 9</li>
<li>Item 10</li>

<li>Item 11</li>
<li>Item 12</li>
</ul>
<input type="button" value="Ok" />
<input name="button1" type="button" id="button1" value="Cancel" />
<input type="text" value="Cancel" />
<br /><br />
<table width=75% border=1>

<tr>
<td id="row1">One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td id="table1">One</td>

<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td id="table1">One</td>
<td>Two</td>
<td>Three</td>

</tr>
<tr>
<td id="table1">One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

</body>
</html>
 
Ok if I've done it right. I only got a couple of them:
iThink.PNG

Index.html:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CIS2107 | Portfolio Exercise 2</title>


<link href="sectionc.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>CIS2107 | Portfolio Exercise 2</h1>

<h2>Knight Rider</h2>
<p>Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. <a href="http://www.edgehill.ac.uk">Michael Knight</a>, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</p>
<h2>Muskehounds</h2>
<p>One for all and all for one, <a href="link.png">Muskehounds</a> are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>

<h2>Hong Kong Phooey</h2>
<p>Hong Kong Phooey, number one super guy. <a href="http://www.edgehill.ac.uk">Hong Kong Phooey</a>, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<h2><a href="index.html">The Littlest Hobo</a></h2>
<p>There's a voice that keeps on calling me. Down the road, that's where I'll <a href="http://www.edgehill.ac.uk">always</a> be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><font color="#39F">Item 3</font></li>
<li>Item 4</li>
<li>Item 5</li>

<li><font color="#39F">Item 6</font></li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<ul>
<li><font color="#39F">Item 9</font></li>
<li>Item 10</li>

<li>Item 11</li>
<li><font color="#39F">Item 12</font></li>
</ul>
<input type="button" value="Ok" />
<input name="button1" type="button" id="button1" value="Cancel" />
<input type="text" value="Cancel" />
<br /><br />
<table width=75% border=1>

<tr>
<td id="row1"><b>One</b></td>
<td><b>Two</b></td>
<td><b>Three</b></td>
</tr>
<tr>
<td id="table1">One</td>

<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td id="table1">One</td>
<td>Two</td>
<td>Three</td>

</tr>
<tr>
<td id="table1">One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

</body>
</html>
no change to the css cause I'm lazy :3
 
Yeah that's right, but it has to be in CSS as it's meant to test our CSS knowledge and what not, it's quite annoying I must admit V_v.

I've tried table, td, th{
I've tried td{
I've tried th{

and nothing, grr! it's aggravating!
 
for the coloured lists, i've found out that it's this coding in css.

ul li:nth-child(3n){color:#39F;}

still haven't figured out what to do about the table yet though, :/
 
I've figured out all of it apart from two:

10. For every third row in the table, change the font style to italic [2]
7. For every 2nd to last list item, add a 1px solid #F00 border [2]

-_-;

I hate CSS.
 
I like CSS. But the wording is utter ****. A border, where left, right, top, bottom?

From their wording there, they have used CSS syntax of "1px solid #F00" so I would assume that is the CSS you would use for a border on the element. The wording could have been clearer I admit.
 
10. For every third row in the table, change the font style to italic [2]
You need to call it for every 3rd row, by using nth child you can call it every 3 occurances of a child (In this case row).

Code:
tr:nth-child(3n) {}

7. For every 2nd to last list item, add a 1px solid #F00 border [2]
For this one you need to use minus nth, but I'm not going to give you the answer or Pete will tell me off ^^

P.S. Hi from the cool Web Scripting group at Edge Hill, lol.
 
Back
Top Bottom