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

CSS: An Overview Forum

View Course

181 points
55e700099113cbebde000515_573211417
Submitted by
Carlina Padgett
over 1 year ago

Help?!

How do you do this??? "Set all the paragraphs to the Courier font-family. (Make sure to capitalize "Courier" as shown!)
The second paragraph contains text between tags. Set the background-color of that to 'yellow'. "


0 votes

permalink

If your Browser loads this HTML-document into memory

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>I Know Kung Fu (er, CSS)</title>
    </head>
    <body>
        <div>
            <h3>What's CSS for?</h3>
            <p>CSS is for styling HTML pages!</p>
            <h3>Why use it?</h3>
            <p>It makes webpages look <span>really rad</span>.</p>
            <h3>What do I think of it?</h3>
            <p>It's awesome!</p>
        </div>
    </body>
</html>

the Browser does the load
by using the Document Object Model

               html
                 |
       + - - - - + - - +
       |               |
      head            body
       |               |
   + - - - +           +
   |       |           |
 link    title        div     
                       |
     +- - - +- - -+- - +-+- - +- - - +
     |      |     |      |    |      |
    h3      p     h3     p    h3     p
                         |
                        span

3316 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 1 year ago


0 votes

permalink

In DOM talk...
html Element has no parent, but is parent to a div Element.
The div Element is a descendant of html Element

div Element is a child of html,
AND is parent to 6 children

Those children are sibling's to each-other,
and are direct descendant of the div Element.

The second paragraph Tag, being the 4th child of the div Tag
is parent to a span Element.

In your link Element you defined
that the Styling specific's are defined
in the file 'stylesheet.css'

The CSS facility of your Browser will read this file
and will expect a specific syntax

css-Selector  {
     **a property**
     **property-key**: **property-Value**;
     }

For instance, we want all p-Tag to have the color red

 p {
    color: red;
 }

We want all span-Tags to be 'yellow'

span {
   color: yellow;
}

3316 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 1 year ago


0 votes

permalink

With the CSS-Selector you
can be more specific in your Selection by using
specific selector-ettributes

div>p as CSS-Selector would only select those p-Tag's which are direct-descendant of a div-Tag
div p as CSS-Selector would select all p-Tag's which are descendant of a div-Tag

3316 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 1 year ago


0 votes

permalink

If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.

                   html
                     |
           + - - - - + - - - - +
           |                   |
          head                body
           |                   |
       + - - - +        +- - - +- - - +
       |       |        |      |      |
     link    title      p     div     p
                    (intro)    |  (summary)
                               |
                       + - - - + - - - - +
                       |                 |
                       p                 ul
                  (synopsis)             |
                                         |
                                 + - - - + - - - - +
                                 |       |         |
                                 li      li        li
                                 |       |         |
                                 p       p         p

The p-Tags are located:
html > body > p  (2)
html > body > div > p (1)
html > body > div > ul > li > p (3)
p         as selector we have selected all 6 p-Tag's
body > p  as selector we selected 2 p-Tags ==> Intro & Summary
div > p   as selector we have selected 1 p-Tag  ==> Synopsis
div p as selector we have selected 4 p-Tag's
li > p    as selector we have selected 3 p-Tags under the ul-Tag

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

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

As jQuery uses the same syntax for it's selector's
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

3316 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 1 year ago