Coding CSS and Using Firebug

[strifemit]

A little explanation would help me here:

When I look at firebug I get this HTML

<div class="entry-content">
<p style="text-align: left;">
The link to shopping takes you on an internet
Shopping
experience. You can also save money and find opportunities to make money. You will find a wide range of products that can be directly shipped to you in Australia. If you are not in Australia then use the Global link which ships to many other parts of the world.
</p>
</div>

All the text is aligned left as wanted.

When I look at another page set up the same way the code looks like this and only the second paragraph is aligned left.

<div class="entry-content">
<p>The world is a fascinating place which had an estimated 7 billion unique people in 2011. In 1800 it was less than 1 billion. Once upon a time people survived by exchanging skills and produce for different skills and produce they needed for basic survival. Community was important.</p>
<p style="text-align: left;">Today we rely on money to live. We earn money through work to pay for skills and produce to survive. Now we need money for our entertainment, travel, luxurious goods, time saving gadgets, pastimes, etc., etc. In some countries people who don’t work for whatever reason receive money from the government which is supposed to be enough to survive. In many countries this doesn’t exist.</p>

I also cannot find this in the style. Can anyone explain this to me please>

http://www.verasnetwork.com

[strifemit]

Eureka! I found it. I disabled:

.featured-content .entry {
text-align: center;

and it was left justified. I found this in my style.css and updated it to align left and it worked. What I can't understand is why the align left didn't work on all pages. I realise it changed back to center when there was more than one paragraph. Can anyone explain why for me?

[Victor Font]

Whenever you have inline styles like this: <p style=”text-align: left;”>, they override the style sheet settings. If you want the style sheet to control your text appearance, you need to remove the inline styles.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[strifemit]

Thank you Victor. Could you explain that a little more please or point me to somewhere that can explain this? Where will I find <p style=”text-align: left;”>?

[IDX Leads]

In the element itself. <p style=”text-align: left;”>The element</p> That is inline styling.

http://www.w3schools.com/css/

---

Esse quam videri

[strifemit]

Hi Dave

Late reply because I a in Singapore at the moment without much time to work on my websites. I have read up on inline styling, unfortunately I find the explanations a little technical using lots of jargon and I am probably called a slow starter. But when it sinks in I move faster.

I have assumed fro my reading that the inline styling is what I can find in the style.css file or have I got that wrong?

[coralseait]

@strifemit,

You've got that a bit in reverse; what's in style.css is the site's CSS. Inline style is when embed style / CSS into the content itself usually via the text editor in WP or within widgets, etc. This overrides the site's style sheet.

Generally, we devs / designers frown on inline styles and prefer classes / selectors within the style.css (or other style sheets, you can have more than one if you desire).

The (simplified) reason for this is that inline styles force you to make any changes within ALL the content where you've used inline styles vs. in the one or two places of a style sheet you reference. There are other reasons as well, but keeping it simple per your comments on just learning this.

As a summary:

Try not to inline your styles / CSS - use the style sheet with classes or id selectors if you must.

---

Coral Sea IT

[Author]

Posts