I have been having some trouble with some text in the footer of my page. In my external style sheet
text is aligned to the left by default. but it was my understanding that Inline CSS would overide this. here is what I have done with my code:
<div id="footer" style="text-align: center; ">
<p>Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>
However the text still appears on the left of the page, what is my error here?
Thanks in advance.
Hi now used to this
<div id="footer" >
<p style="text-align: center; ">Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>
Now p is block level element so than you can apply to css p tag
2nd option if you used to external CSS used to this in external CSS as like this
#footer>p{text-align:center;}
To make later declaration override the previous declaration:
/* 0: default */
#footer { text-align:left; }
#footer { text-align:center; }
/* 1: using !important */
#footer { text-align:left; }
#footer { text-align:center !important; }
/* 2: specific selector */
#footer { text-align:left; }
#mainpage #footer { text-align:center; }
/* 3: selector type tag - id - class */
div { text-align:right; }
div.footer { text-align:left; }
div#footer { text-align:center; }
The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
!important = is the superior: only !important can override !important
ID attribute = 100
Class attribute = 10
Element = 1
<p id="target" class="target">Hello World</p>
<style>
p#target {color: black} /* Specificity: 101 */
p#target {color: red} /* Specificity: 101 */
p.target {color: blue} /* Specificity: 11 */
p {color: tomato} /* Specificity: 1 */
/* Red color is applied */
</style>
Keep these rules in mind:
.contents {color: #999 !important;}
section.contents {color: #999;}
body .contents {color: #999;}
#container > .contents {color: #999;}
Credit: CSS Rule Priorities: https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
#footer p {
text-align: center;
}
Try this code in an external style sheet.
