This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course » View Exercise

244 points
5564de8e9376760e98000203_54233957
Submitted by
sara hilal
almost 2 years ago

9/26 hi guys can u help?

h3 {
color:red;
font-family:Courier;
}

span {
background-color:yellow;
}


1 vote

permalink

You are forgetting point-2 of the Instructions...

  1. Make all the h3 headings red.
  2. Set all the paragraphs to the Courier font-family. (Make sure to capitalize "Courier" as shown!)
  3. The second paragraph contains text between tags. Set the background-color of that to 'yellow'.

3311 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
almost 2 years ago

1 Comment

19c978e06a94c2f23fd9f870a1035a0b?s=140&d=retro TylerSmithss almost 2 years ago

While it is true that point-2 is not correct, the system still does not let you submit the code. I think there is something wrong with the system itself.


0 votes

permalink

i need help with css: An Overview

114 points
831e67d0661d122e2a683c45394f6c65?s=140&d=retro
Submitted by
STERMIC000
almost 2 years ago


0 votes

permalink

@STERMIC000,

<!DOCTYPE html>
<html>
    <head>
        <title>First font size change</title>
    </head>
    <body>
       <p style = "font-size:8px"> Some text for you to make tiny! </p>
       <p style = "font-size:10px ; background-color: blue"> Some text for you to make normal size!</p>
       <p style = "font-size:18px> Some text for you to make super big!</p>
    </body>
</html>

You see the HTML-page,
with a HEADER characterised by the HEAD-Tags <header></head>
with a BODY characterised by the BODY-Tags <body></body>

within the BODY you have 3 PARAGRAPH-Tags <p></p>

Within the opening-Tag of a HTML-Element like the p-Tag
you can insert so-called attributes.

One of those attributes is the style-attribute
with which you can manipulate the display-style of a HTML-Element.

Now we run into the usage of the word property
Each property consists of a property-key and it's associated VALUE
If you have more then one property you use the semi-colon-; as separator

The syntax of writing a property is
the property-key a colon and it's associated VALUE
thus the font-size-property would look like:
font-size: 12px

As the font-size is a property
of the style-attribute we would write
style = "font-size: 12px"
or ( with multiple properties )
style = "font-size:12px ; background-color: blue"
we are using the semi-colon-; as a so-called separator

We now integrate this into the starting <p>-Tag
<p style = "font-size:12px ; background-color: blue" ></p>
The -background-color of this p-Tag will be blue
and the characters of the TEXT
which we write in-between the p-Tags
will have a font-size of 12 pixels.

Some reference-material:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

3311 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
almost 2 years ago


0 votes

permalink

t should look like this:

index.html

<!DOCTYPE html>

<!--Add your link tag here!-->

<title>Result</title>

Change me to Verdana.
Change me to Courier.
Make me purple!

stylesheet.css

/* CSS comment*/
h1 {
font-family: Verdana;
}
h3 {
font-family: Courier;
}
p {
color: purple;
}

263 points
C65441967b29b97d17815749eb0c0769?s=140&d=retro
Submitted by
AndiswaMS
over 1 year ago

2 Comments

5334fc819c4e9db930001a0d_32139218 Leon over 1 year ago

Please update your post into a correct format....


-1 votes

permalink

@STERMIC000,

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with
<div class="myClass1 myClass2 myClass3" ></div>
you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
$('.article').removeClass('.current')
$(this).addClass('.current')

into
$('.article').removeClass('current')
$(this).addClass('current')

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .current,
In this .current object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".current") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "current"

Reference::

google search
class site:jquery.com
http://api.jquery.com/class-selector/

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS

Some reference-material:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

www.crockford.com

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

3311 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
almost 2 years ago

1 Comment

831e67d0661d122e2a683c45394f6c65?s=140&d=retro STERMIC000 almost 2 years ago

thank you Leon and i would help u but i don't no how to do this very good SORRY