Solved

override css text styling

Posted on 2013-12-01
12
326 Views
Last Modified: 2013-12-01
I am working out of Bootstrap. I want to add some embedded css to override their random indentations, etc. on this page

http://conutils.com/dist/affiliatedsystems/

Can someone give me some css to do this?
0
Comment
Question by:burnedfaceless
  • 5
  • 4
  • 3
12 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Inline CSS will override CSS from a stylesheet. CSS later in a stylesheet will override CSS from earlier. You can use the !important keyword to increase specificity.

What exaclt do you want to override - your question is pretty vague..
0
 

Author Comment

by:burnedfaceless
Comment Utility
Yes I understand that. I need to put the css after the stylesheet.

I'm not sure what it is, it's the text - if you look at the link the indentations are weird.

The text itself is inside the class panel body. So I'm assuming there is some text styling in there.
0
 

Author Comment

by:burnedfaceless
Comment Utility
The css is way over my head. Or I would do it myself.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
There's nothing weird or random about the indentation - all your text is centred, because of this rule from bootstrap.css:

.starter-template {
    text-align: center;
}

Open in new window

If you want to override that style, then create another stylesheet and attach it AFTER your bootstrap file.

You haven't said what you want, so I can't help with specifics until you do.
0
 
LVL 34

Expert Comment

by:Dan Craciun
Comment Utility
0
 

Author Comment

by:burnedfaceless
Comment Utility
Ok well is there a "Default" style or do I just put style:none or something like that?

edit: with important declaration
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 34

Expert Comment

by:Dan Craciun
Comment Utility
Put this:
.starter-template {
    text-align: left !important;
}

somewhere inline or on an external css file that you'll import in your page.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
@burnedfaceless - the text in your document is styled that way because of the text-align-center style that I've mentioned (the other options are left, right, justify, inherit). It has nothing to do with a default style.

You still haven't told us what you want, so we're left guessing!!!

If you can't tell us what you need, then how do you expect us to help you.
0
 

Author Comment

by:burnedfaceless
Comment Utility
Dan that worked except the h1 header is aligned left

I tried to align h1 - the element or whatever.

Then I tried to enclose the text-align:left in a div after the header with a different class name.

Any suggestions?
0
 

Author Comment

by:burnedfaceless
Comment Utility
Now I got it working with html align center.

W3C doesn't like it. What do you say Dan, you're the expert.
0
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 250 total points
Comment Utility
HTML errors are fairly straightforward to fix:
© instead of &copy
find and close  <div class = "maxwidth">

On CSS the validator complains mainly about code inserted to cater for Microsoft applications.
As long as you fix your HTML and your page is working, I wouldn't worry about CSS errors.
If you absolutely need to validate, you'll lose some effects.
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
Comment Utility
Do not use align=center on an HTML element - it's not supported at all in HTML5
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now