My paragraph is black even though I specified a (supported) color.
Where seems to be the error?
How do I fix it?
Thanks!
HTML code:
<div id="welcome">
<p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
</p>
</div>
CSS code:
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p{
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
color:#f4f6f7 !important;
font-weight:500;
}
It's because <center> is a block level element. You can't have a block level element inside of a <p> (paragraph) element. The reason for this is a nuanced alternative syntax for paragraph tags that excludes the closing tag. You can have a paragraph tag written like the following and have it validate:
<p>This is a paragraph element that doesn't have a closing tag.
<p>Here's another. This is all valid HTML.
The definition of this functionality can be found in the w3c documnetation under the "Tag omission in text/html" part. Because of this, generally when a paragraph tag hits a block level element, it assumes that the tag has closed. Your HTML then becomes this:
<div id="welcome">
<p></p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
<p></p>
</div>
As you can see, this means that your em is not technically inside a paragraph. It's recomended that you instead use the text-align:center CSS property as <center> is deprecated.
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p{
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
text-align: center;
color:#f4f6f7;
font-weight:500;
}
<div id="welcome">
<p>
<b><em> AaBbCcDdEeFfGgHh</em></b>
</p>
</div>
you can do this in 2 ways.
1.try removing the id=welcome.
or
call the id=welcome in css and specified a (supported) color.
HTML code:
<div>
<p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
</p>
</div>
CSS code:
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p {
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
color:#f4f6f7 !important;
font-weight:500;
Related
First of all sorry for my bad English.
I want to exclude a class from all of the selectors in CSS.
I need to use something like
(h1, h2, h3, h4, ..., p, span, a, ...):not(.exclude){
font-family: arial;
}
instead of:
h1:not(.exclude), h2:not(.exclude), ..., a:not(.exclude){
font-family: arial;
}
It is possible with CSS4 :is selector. You can watch out for the browser support here: https://caniuse.com/?search=is but in modern web developer terms, you are safe to use it.
:is(h1,h2,h3):not(.exclude) {
background: #bada55;
color: #565656;
padding: 10px;
}
<h1 class="exclude">
Excluded
</h1>
<h2 class="include">
Included
</h2>
<h3 class="exclude">
Excluded
</h3>
The above code works like this
h1:not(.exclude), h2:not(.exclude), h3:not(.exclude) { Properties... }
You can also make use of :where which does the same:
:where(h1,h2,h3):not(.exclude) {
background: #bada55;
color: #565656;
padding: 10px;
}
<h1 class="exclude">
Excluded
</h1>
<h2 class="include">
Included
</h2>
<h3 class="exclude">
Excluded
</h3>
*:not(.exclude) {
font-family: arial;
}
would give everything font family arial except elements with class .exclude, but I'm not sure if that's what you mean.
I have part of HTML like this and I want to define in separate static CSS file a specific color for the font of the element a nested in h2.
h1 > a, h2 > a
{
color: #c25100;
font-family: 'Lobster';
}
body {
padding-left: 15px;
}
<div>
<h2>
abc
</h2>
</div>
With your way you could change of the color of all anchor tags which is child of h2 elements. To avoid this I would give a class to h2 and then point anchor tag like this:
HTML:
<div>
<h2 class="header">
<a href = ''>abc</a></h2>
</div>
CSS:
.header > a {
color: #c25100;
font-family: 'Lobster';
}
I have a css what describe the h6 tag like this
h6{
font-family: 'Josefin Sans', sans-serif;
font-size: 10px;
text-align: center;
color: #0f7f7f7;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);}
In just 1 line in my page I want an exception so I did this:
<h6 font color="red">text here not in red <br>
But I can't find why it still keeps the color, what is defined in the CSS
Inline css looks like this
<h6 style="color:red">text here IS red </h6><br>
see here jsfiddle
Option 1 : in case you have one element you want to style :
<h6 style="color:red">text here is in red </h6>
first of all, color: #0f7f7f7; is not correct. all colors have 6 characters not 7 for their HEX value
second, you are missing the closing tag in the <h6> you always need to close it with </h6>
third, color attribute you use it like so
<font color="red">text here is in red</font>
fourth , the color attribute is not supported in HTML5. so in html if you need to change smth use style="" . <tagname style="property value">
<h6 style="color:red;font-size:20px;text-transform:uppercase"</h6>
etc.
Option 2 : if you have many items to which you want to apply same styling for example you want to add color:red to more elements, it's better NOT to use inline styling, but to add a class to those elements and then style them from CSS.
for eg
<h6 class="red">text here is in red</h6>
<p> some text</p>
<h2 class="red">text here is in red</h2>
<p> some text</p>
<h3 class="red">text here is in red</h3>
<p> some text</p>
and CSS
.red { color:red;}
for more information click here HTML style
Your html is invalid. Here's how you do it.
h6{
font-family: 'Josefin Sans', sans-serif;
font-size: 10px;
text-align: center;
color: #f7f7f7;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
<h6 style="color:red">text here is in red</h6>
Have a read about inline-css and the style attribute here.
EDIT: Seems like you have an invalid hex-value for your color.
I think is just a matter of syntax. Try with:
<h6 style="color:red">text here not in red <br>
First you have the wrong syntax for applying inline styles. (As posted by #grateful)
Second you maybe better set a class name and apply styles to this class name. For example:
CSS:
h6 {
font-family: 'Josefin Sans', sans-serif;
font-size: 10px;
text-align: center;
color: #0f7f7f7;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
h6.important-note {
color: red;
}
HTML:
<h6>A normal heading of size six.</h6>
<h6 class="important-note">A really important heading of size six.</h6>
better to use:
<h6 style="color:#ff0000">text here IS red </h6>
I have the following html:
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 id="fancy">
This is one fancy heading!
</h3>
<p>
But I am a very plain paragraph
</p>
<p id="fancy"> But I'm fancy too!
</body>
With the following css:
body {
margin-left: 20px;
}
body :nth-child(7) {
font-family: courier;
}
#fancy {
font-family: Cursive;
}
I am wondering about the css only changing the paragraph's font to courier when the nth-child is labeled as 7. Every way I count it, I only see it logically being the 6th, 5th (if it is starting at 0) or maybe even 2nd child (if it for some reason is not counting the div's). Can someone explain to me how the "very plain paragraph" is the 7th child of the body?
The 7th child is
<p id="fancy"> But I'm fancy too!</p>
(FYI you were missing closing </p> tag)
To make it easier to see, look at this JS Fiddle Demo where I've added color:red; to body :nth-child(7).
To break it down further
body {
margin-left: 20px; //this is applied to all of your elements
}
body :nth-child(7) {
font-family: courier; //this is applied to 7th child
}
#fancy {
font-family: Cursive;
//this is applied to all elements with id="fancy" including the 7th child
//this overwrites font-family: courier;
}
Also as noted by DJ #Paulie_D, don't use an id more than once per page. Instead use class="fancy" and in your CSS .fancy instead of #fancy.
Like what was mentioned by Paulie_D and Dan, ID's should not be repeated.
If you change the id to a class, you will notice that the 'nth-child' selector has more weight than the class selector. So you will need to either add '!important' like so:
.fancy {
font-family: Cursive !important;
}
Or include the elements selected:
p.fancy, h3.fancy {
font-family: Cursive;
}
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 class="fancy">This is one fancy heading!</h3>
<p> But I am a very plain paragraph</p>
<p class="fancy"> But I'm fancy too!</p>
/In CSS please make .fancy instead of #fancy/
<style>
body {
margin-left: 20px;
}
body :nth-child(7) {
font-family: courier;
}
.fancy {
font-family: Cursive;
}
</style>
I am not exactly sure why the text does not center in the title class span.
<div id="vid_display">
<span class="title">SampleText</span></br>
<span class="desc">Sample Desc</span>
</div>
Stylesheet
#vid_display {
height: 500px;
width: 700px;
box-shadow: 10px 10px 5px #888;
}
.title {
font-family: cursive;
font-size: 20px;
font-style: bold;
text-align: center;
}
text-align doesn't have any effect on inline elements like span tags. You need to apply your text-alignment onto the parent element that is display:block; like the <div> or <p> that is wrapping the span.
You might be better off with something like this:
HTML
<div id="vid_display">
<p class="title">SampleText</p>
<p class="desc">Sample Desc</p>
</div>
CSS
.title { text-align: center; }
Update: Here is a working sample: http://codepen.io/anon/pen/jEnys
is an inline element and not a block. Use div instead:
<div id="vid_display">
<div class="title">SampleText</div><br>
<span class="desc">Sample Desc</span>
</div>
Use
<div class="title">SampleText</div></br>
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
<span> defaults to being display:inline; whereas <div> defaults to being display:block;.