Jump to content
Please Use CODE Tags

HTML, Help needed

The_Budget_Gamer
By The_Budget_Gamer
in Programming
 Share
Go to solution Solved by CrazyMatt,

If you are trying to use two rules for a heading, instead of what you have, use 

<html>
  	<body>
    	<h1 style="color: red; font-family: courier;">See List of Radio Streams Below.</h1>
  	</body>
</html>

If you mean something else, elaborate

Posted

Hello I have just started learning html and I am having a problem using 2 inline CSS elements in one heading. It just displays the first element.

 

Here is my code

  

<!html>
<body>
<h1 style="color:red;" style="font-family:courier;"> See List of Radio Streams Below.
</h1>
</body

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

If you are trying to use two rules for a heading, instead of what you have, use 

<html>
  	<body>
    	<h1 style="color: red; font-family: courier;">See List of Radio Streams Below.</h1>
  	</body>
</html>

If you mean something else, elaborate

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: red; font-family: "Courier";"> See List of Radio Streams Below.</h1>
  </body>
</html>

This should work fine for you. Your problem was that you used the "style" attribute twice. Use this in the future.

I will most likely not respond to you in a thread unless you quote me.

$500 PC | $800 PC | $1000 PC | $1200 PC | $1500 PC | $2000 PC | $2500 PC | $3000 PC | $4000 PC

Spoiler

Damnit Carl (My portable POS):

CPU: Core i7-6700HQ

Motherboard: Toshiba L55-C5392 Mobo

RAM: 8GB DDR3 (even though I have Skylake)

GPU: Intel HD Graphics 530

Case: Toshiba L55-C5392 Case

Storage: 525 GB Crucial MX300 SSD

PSU: Whatever power jack comes with it

Display: Some 1366 x 768 garbage + an OK 1080p monitor

Cooling: Not enough + an external laptop tray

Keyboard: The included one

Mouse: $4 Lenovo 3D Optical Mouse (not as bad as you (rightly) assumed)

Sound: The Skullcandy branding right under the power button should clue you in

Operating System: Windows 10 Home

PCPartPicker URL: pcpartpicker.com/i-wish-i-had-enough-money-for-a-desktop-my-laptop-is-so-sh*t-its-not-even-on-portablepicker

 
 
 
 
 
 
 
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, CrazyMatt said:

If you are trying to use two rules for a heading, instead of what you have, use 


<html>
  	<body>
    	<h1 style="color: red; font-family: courier;">See List of Radio Streams Below.</h1>
  	</body>
</html>

If you mean something else, elaborate

Thanks that is what I wanted :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, LordMastodon said: 

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: red; font-family: "Courier";"> See List of Radio Streams Below.</h1>
  </body>
</html>

This should work fine for you. Your problem was that you used the "style" attribute twice. Use this in the future.

I just want to point out for future reference, don't use double quotes inside of attributes. A web browser will see 

<h1 style="color: red; font-family: "Courier";"> See List of Radio Streams Below.</h1>

as <h1> having two attributes: style, and Courier. Replace the Courier's double quotes with single quotes, so it looks like: 

<h1 style="color: red; font-family: 'Courier';"> See List of Radio Streams Below.</h1>

That way the browser will know you are not trying to end the style attribute.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Yes, thank you Matt. That was a typo on my part.

I will most likely not respond to you in a thread unless you quote me.

$500 PC | $800 PC | $1000 PC | $1200 PC | $1500 PC | $2000 PC | $2500 PC | $3000 PC | $4000 PC

Spoiler

Damnit Carl (My portable POS):

CPU: Core i7-6700HQ

Motherboard: Toshiba L55-C5392 Mobo

RAM: 8GB DDR3 (even though I have Skylake)

GPU: Intel HD Graphics 530

Case: Toshiba L55-C5392 Case

Storage: 525 GB Crucial MX300 SSD

PSU: Whatever power jack comes with it

Display: Some 1366 x 768 garbage + an OK 1080p monitor

Cooling: Not enough + an external laptop tray

Keyboard: The included one

Mouse: $4 Lenovo 3D Optical Mouse (not as bad as you (rightly) assumed)

Sound: The Skullcandy branding right under the power button should clue you in

Operating System: Windows 10 Home

PCPartPicker URL: pcpartpicker.com/i-wish-i-had-enough-money-for-a-desktop-my-laptop-is-so-sh*t-its-not-even-on-portablepicker

 
 
 
 
 
 
 
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

you might want to look into CSS, it will make your code a lot nicer looking.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, vorticalbox said:

you might want to look into CSS, it will make your code a lot nicer looking.

CSS? At the moment that is just a thing I have heard of, how would I go about doing CSS?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, vorticalbox said:

you might want to look into CSS, it will make your code a lot nicer looking.

That is CSS. It's just inline. Do you mean a separate file?

I will most likely not respond to you in a thread unless you quote me.

$500 PC | $800 PC | $1000 PC | $1200 PC | $1500 PC | $2000 PC | $2500 PC | $3000 PC | $4000 PC

Spoiler

Damnit Carl (My portable POS):

CPU: Core i7-6700HQ

Motherboard: Toshiba L55-C5392 Mobo

RAM: 8GB DDR3 (even though I have Skylake)

GPU: Intel HD Graphics 530

Case: Toshiba L55-C5392 Case

Storage: 525 GB Crucial MX300 SSD

PSU: Whatever power jack comes with it

Display: Some 1366 x 768 garbage + an OK 1080p monitor

Cooling: Not enough + an external laptop tray

Keyboard: The included one

Mouse: $4 Lenovo 3D Optical Mouse (not as bad as you (rightly) assumed)

Sound: The Skullcandy branding right under the power button should clue you in

Operating System: Windows 10 Home

PCPartPicker URL: pcpartpicker.com/i-wish-i-had-enough-money-for-a-desktop-my-laptop-is-so-sh*t-its-not-even-on-portablepicker

 
 
 
 
 
 
 
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
18 minutes ago, LordMastodon said:

That is CSS. It's just inline. Do you mean a separate file?

exactly that. Also better to keep styling in am external sheet.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

It's better, but not necessary, especially for this little bit of code. OP, if you're just starting out in code, I can wholeheartedly recommend Treehouse for learning HTML, CSS and Javascript. They taught me a lot and they have good lessons.

I will most likely not respond to you in a thread unless you quote me.

$500 PC | $800 PC | $1000 PC | $1200 PC | $1500 PC | $2000 PC | $2500 PC | $3000 PC | $4000 PC

Spoiler

Damnit Carl (My portable POS):

CPU: Core i7-6700HQ

Motherboard: Toshiba L55-C5392 Mobo

RAM: 8GB DDR3 (even though I have Skylake)

GPU: Intel HD Graphics 530

Case: Toshiba L55-C5392 Case

Storage: 525 GB Crucial MX300 SSD

PSU: Whatever power jack comes with it

Display: Some 1366 x 768 garbage + an OK 1080p monitor

Cooling: Not enough + an external laptop tray

Keyboard: The included one

Mouse: $4 Lenovo 3D Optical Mouse (not as bad as you (rightly) assumed)

Sound: The Skullcandy branding right under the power button should clue you in

Operating System: Windows 10 Home

PCPartPicker URL: pcpartpicker.com/i-wish-i-had-enough-money-for-a-desktop-my-laptop-is-so-sh*t-its-not-even-on-portablepicker

 
 
 
 
 
 
 
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

If you're planning to make a whole site, it would be much easier to make a css file with your styling in it.

 

So say for your <h1> elements, you could specify in your css file what style attributes the <h1> elements have.

 

For example in your css file: 

h1 {
  color:red;
  font-weight:bold;
  font-size:30px;
}

The h1 { identifies that the following style attributes should be applied to all <h1> elements.

 

Then say we called this a file called style.css, saved it in your server files and then linked it in by adding this in the <head> section of your HTML:

  

<head>
  <link href="./style.css" rel="stylesheet">
</head>

 

So now all the <h1> elements in your HTML file will be red, be bold and have the font size of 30px.

 

You can identify many different elements in many different ways (a more elaborate list is available here), so for example:

 

Adding a class="example" into an element, such as a <div class="example"></div> could then by styled in your css file like this:

  

.example {
  background:red;
}

Which would then make the background of a div element with the class of "example" red. Easy, right?

 

Here are the most common types of ways of giving a element an attribute that you can style with css:

 

<element> = element

class="test" = .test

id="test" = #test

<element class="test"> = element.test

 

All of the bold selectors would then be followed by a left brace ({), with your style attributes underneath and then finished with a right brace (}).

 

If you want to style the child of a certain div element, you could do this:

 

<div class="testdiv">

<element class="test"></element>

</div>

 

div.testdiv > element.test

 

You can add multiple selectors for only one set of style attributes by adding commas in-between selectors, for example:

 

<h1>Hi</h1>

<h2>Hello</h2>

 

h1, h2 {

     font-weight:bold;

}

 

Which would make both <h1> and <h2> bold.

 

Remember, you only have to put the class="" or id="" in the first tag of an element if it has two.

 

The layout for css with selectors is always your selector (1), a left brace (2) your style attributes (3) and closed with a right brace (4).

 

.h1(1) { (2)

     color:red;(3)

}(4)

 

http://www.w3schools.com/css/css_syntax.asp has some more info about the more basic selectors. I made https://jsfiddle.net/1tw2zfrf/ to help you understand the differences.

 

Hope this helps! Let me know if this was confusing or you need some more info!

Expert procrastinator.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×