CSS: Cannot enter code properly


#1

Hi! I'm stuk on the CSS: An overview where we are taught to change the color of a single word of a paragraph with CSS. They have asked to use the tags, but I'm not actually quite sure where to put them or what I should write in between. Could someone show me what that code needs to look like please?


#2

@nadetie,
The description of HTML-tags
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags

Changing the color of text is called styling of the text.

In HTML there are 3 ways to give a HTML-tag its styling

= 1 ==== style a text directly in the HTML-Tag ====

<html>
	<head>
		<title>Result</title>
	</head>
	<body>
		<p style="color: green">You're about to style this paragraph with CSS all on your own!</p>
	</body>
</html>

= 2 ==== add a style-Tag into the header-Tag ====

<!DOCTYPE html>
<html>
	<head>
		<title>Result</title>
            <style>
                p { color: green }
            </style>
	</head>
	<body>
		<p>You're about to style this paragraph with CSS all on your own!</p>
	</body>
</html>

= 3 ==== a link-Tag point to a stylesheet.css file, there you write selector&style

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css">
		<title>Result</title>
	</head>
	<body>
		<p>You're about to style this paragraph with CSS all on your own!</p>
	</body>
</html>

In this case you must edit the stylesheet.css file and insert

p {
   color: green;
   }

#3

@nadetie,

Concerning the Selector's

There are several kind of CSS selectors

Each HTML-Element can have attributes
id-attribute

 <p id="Step1"></p>  ==> CSS selector would be #Step1
 <p id="Step2"></p>  ==> CSS selector would be #Step2
 <p id="Step3"></p>  ==> CSS selector would be #Step3

( NOTE: the convention is that you only use an id-attribute-name once in a document. It should make the HTML-Tag carrying this id-attribute unique )

class-attribute

 <p class="fancy"></p>  ==> CSS selector .fancy
 <p class="fancy"></p>  ==> CSS selector .fancy
 <p class="fancy"></p>  ==> CSS selector .fancy

HTML-Tag

==> CSS selector p
==> CSS selector body

Play around to get the feel
http://www.w3schools.com/jquery/trysel.asp


#4

If you're feeling extra frisky you can also use several other languages like jQuery and effect things in a similar fashion. But the easiest method is what @leonhard_wettengmx_n has been mentioning in the above two statements.


#5

@leonhard_wettengmx_n, @lolman, Thanks for the help. I tried it that way many times and it would not go through. I left it alone all night and came back to it the next morning, reset the code and it worked. Maybe it was a glitch of the program or a problem with my internet connection? Either way, thanks for the help!