CSS issue, not sure to use div, id, class, etc.

  • Hi,

    I am trying to style a 3 column page layout to my wordpress pages and post through the use of calling up a class (learning CSS and HTML as I go so please bear with my terminology and redundancy in code.)

    The CSS I have so far is this:

    p.column1, p.column2, p.column3{
    float: left;
    width:30%;
    }

    p.column1 {
    background-color: transparent;
    background: url(‘themes/images/bgback1.jpg’) no-repeat top;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    background-repeat: no-repeat;
    width: 115px;
    margin-top: auto;
    margin-right: 45px;
    margin-bottom: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    }

    p.column2 {
    background-color: transparent;
    background: url(‘themes/images/bgback.jpg’) no-repeat top;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    background-repeat: no-repeat;
    width: 115px;
    margin-top: auto;
    margin-right: 45px;
    margin-bottom: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    }

    p.column3 {
    background-color: transparent;
    background: url(‘themes/images/bgback.jpg’) no-repeat top;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    background-repeat: no-repeat;
    width: 115px;
    margin-top: auto;
    margin-right: 0px;
    margin-bottom: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    }

    The HTML I enter is as follows:

    <p class=”column1″>What To Buy
    Pink or Blue Widgets. Pink or blue widgets. Pink or Blue widgets.
    Learn More</p>

    <p class=”column2″> How To Buy
    Some tips and deals. Some tips and deals. Some tips and deals.
    Learn More</p>

    <p class=”column3″> How To Use
    How to use your pink and blue widgets
    Learn More</p>

    Questions:

    The layout looks good (padding and margin) but I am not sure how to style each of the text independently, example would like the “How To…” to be bold. The middle section to be smaller text and a different color. And the bottom “Learn More” text to be styled another way. As right now it is defaulting to the “.p” css style for all the text withing this.

    Not sure what sort of selector I should be using for the css. Also not sure how to style a class within a class, if that is even possible.

    Hope someone can help me out here. thanks again.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Is there a reason you are floating the paragraphs instead of divs?

    To have a style within a style you can use the span tag with a class of whatever you like. This method can get sort of messy so I try to avoid span whenever possible.

    There are comments where I have added things. Is this kind of styling what you are talking about?

    p.column1, p.column2, p.column3{
float: left;
width:30%;
}

p.column1 {
background-color: transparent;
background: url('themes/images/bgback1.jpg') no-repeat top;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
background-repeat: no-repeat;
width: 115px;
margin-top: auto;
margin-right: 45px;
margin-bottom: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 10px;
}

p.column2 {
background-color: transparent;
background: url('themes/images/bgback.jpg') no-repeat top;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
background-repeat: no-repeat;
width: 115px;
margin-top: auto;
margin-right: 45px;
margin-bottom: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 9px; /* Small! */
font-weight: bold; /* Heavy! */
color:#006600; /* Green! */
}

p.column3 {
background-color: transparent;
background: url('themes/images/bgback.jpg') no-repeat top;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
background-repeat: no-repeat;
width: 115px;
margin-top: auto;
margin-right: 0px;
margin-bottom: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 10px;
}

.heading {
font-weight: bold;
font-size: 22px;
}

.learnlink {
font-style:italic;
}
</style>

</head>

<body>
<p class="column1">What To Buy
Pink or Blue Widgets. Pink or blue widgets. Pink or Blue widgets.
Learn More</p>

<p class="column2"> How To Buy
Some tips and deals. Some tips and deals. Some tips and deals.
Learn More</p>

<p class="column3"> <span class="heading">How To Use</span>
How to use your pink and blue widgets
<span class="learnlink">Learn More</span></p>

    https://www.w3schools.com/TAGS/tag_span.asp

    Here is another way to use spans if you need to do something one time and one time only. If you might reuse it, set it to a class and forgo the inline styling.

    Why? Having to search your code for 5 identical instances of an inline style defeats the purpose of using a CSS document to define your styles.

    Thread Starter kingpro

    (@kingpro)

    Hey thanks, for your comments that does work!!!

    Not sure how to answer your question, “Is there a reason you are floating the paragraphs instead of divs?”. Really is no reason, used this on a similar design and just carried it over without thinking one way or the other. Am learning as I go. And usually just play with something until it works, if it is the right or wrong way I can’t be certain.

    I am all ears on your suggestion though. Would a Div class be better suited?

    Thanks again.

    Thread Starter kingpro

    (@kingpro)

    Also might be another stupid question, next time I enter code into the forum how to I place it in a content box much like you did above.

    Maybe this tutorial can help you.

    For your code in a box: read below the form where you write your message, it says: “Allowed markup: a blockquote code em strong ul ol li.
    Put code in between backticks“

    So put your code between backticks and it’ll appear as follows:

    p.column1, p.column2, p.column3{
float: left;
width:30%;
}

p.column1 {
background-color: transparent;
background: url('themes/images/bgback1.jpg') no-repeat top;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
background-repeat: no-repeat;
width: 115px;
margin-top: auto;
margin-right: 45px;
margin-bottom: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 10px;
}

    BTW: the backtick is on the left side of the 1, above the tab on my keyboard ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS issue, not sure to use div, id, class, etc.’ is closed to new replies.