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.
Related
I want to change my <h2> text to <p>. But I want it to look the same as the <h2> text.
I've tried changing my CSS to no avail:
<section id="" class="form container-fluid">
<form id="frm_contact" action="" method="post" enctype=multipart/form-data" style="">
<h2>Make an Enquiry</h2>
<p>Make an Enquiry</p>
<p>Please ask us about any parts you need and we’ll get back to you shortly.</p>
The text just comes back obviously as standard p text, but I can't figure out where I'm supposed to change the code.
I want 'Make an Enquiry' (what is currently h2) to be <p>, but still look the same.
Have a look at what i mean here
Most browsers display <h2> with these default values Source :
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
So, your best bet is to add a class to the <p> element with the above properties.
HTML
<p class="text-mod">Make an Enquiry</p>
CSS
.text-mod{
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
EDIT:
Okay, since the above solution didn't work, it must be because of specificity.
Try overriding the properties using !important:
.text-mod{ display: block !important;
font-size: 1.5em !important;
margin: 0.83em 0 !important;
font-weight: bold !important;
}
Note: Using !important is an extreme measure and is only recommended when nothing else works out.
I suggest you change the tag to <p>, and use CSS styling to change the way it appears.
For example you could do:
<p class="headingText"> Make an Enquiry </p>
And in your CSS file:
.headingText {
font-weight: bold;
font-size: 14px;
}
You can learn more about CSS here: https://www.w3schools.com/css/
If this doesn't answer your question please let me know how I can help you :)
ADD TO CSS FILE:
.makeHeader {
font-weight: bold;
color:#000;
text-transform: inherit;
font-weight: 500;
font-size: 32px;
}
Have tag like so:
<p class="makeHeader">Make an Enquiry</p>
You can try the inline CSS to overwrite some changes.
<section id="" class="form container-fluid">
<form id="frm_contact" action="" method="post" enctype=multipart/form-data" style="">
<h2>Make an Enquiry</h2>
<p style="font-size:30px;font-weight:bold;">Make an Enquiry</p>
<p>Please ask us about any parts you need and we’ll get back to you shortly.</p>
You can always change the styling if you wanted to by using this kind of approach.
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>
my current html:
<section class="menu-group">
<h2 class="menu-group-name">Appetizers</h2>
<div class="menu-item-line">
<h3 class="menu-item">Battered Cauliflower(GF,SF), Tofu (GF), or Kalebone (SF)</h3>
<h3 class="menu-item-price">$3.90/ea</h3>
</div>
<div class="menu-item-line">
<h3 class="menu-item">Herb Potatoes (GF)</h3>
<h3 class="menu-item-price">$3.50</h3>
</div>
<p class="item-desc">A tasty order of our baked seasoned potatoes</p>
<div class="menu-item-line">
<h3 class="menu-item">Eggless Bowl (GF)</h3>
<h3 class="menu-item-price">$3.00</h3>
</div>
<p class="item-desc">Our most popular eggless salad served chilled with whole wheat crackers</p>
</section>
and the relevant css:
.menu-item, .menu-item-price {
font-family: 'Francois One', sans-serif;
font-size: 18px;
margin: .5em 0;
color: black;
display: inline-block;
}
.menu-item {
max-width: 300px;
}
.menu-item-price {
float: right;
/*margin: 0 0 0 5px;*/
}
.item-desc {
font-family: 'Open Sans', sans-serif;
color: black;
font-size: 18px;
/*float: left;*/
max-width: 300px;
/*font-style: italic;*/
margin: 0;
}
Is there a way to grab all "(GF,SF)" (and all other permutations of "___free") using css and make the text slightly smaller? I could not find a way except altering the markup. Thanks
Yes you can do without altering markup, but you will have to use javascript or jquery for that.. but if you are only sticking to css to accomplish it, you will have to alter the markup.. need to catch it in <span> and use h3 > span and give the new font size
You might try wrapping each abbreviation in a abbr tag and then use the title attribute to provide a key to the meaning of the abbreviation.
Reference: http://www.w3.org/TR/html-markup/abbr.html#abbr
You can then define a CSS rule for abbr to style it as you want.
As for the opening and closing parentheses, maybe use first-child and last child selectors with pseudo elements.
<abbr title="Good Food">GF</abbr>
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 made this sketch in photoshop and I am converting it to HTML & CSS.
HTML:
<div class="pricebox">
<p class="price">360kr</p>
<p class="min">40 min</p>
<p class="info green">Körlektion</p>
</div>
<div class="pricebox">
<p class="price">1700kr</p>
<p class="min">Riskutbildnig 2</p>
<p class="info yellow">Halkan</p>
</div>
<div class="pricebox">
<p class="price">500kr</p>
<p class="min">Riskutbildning 1</p>
<p class="info red">Riskettan</p>
</div>
CSS
body {
font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
display:inline-block;
border: 1px solid #EEEEEE;
border-radius: 3px;
width: 100px;
height: 150px;
margin: 5px;
}
.price{
font-size: 28px;
font-weight:300;
color: #383838;
padding: 11px;
}
.min {
font-size: 11px;
color: #909090;
padding: 0 25px;
}
.info {
height: 35%;
margin-top: 15px;
color: #EEEEEE;
font-weight: 600;
font-size: 11px;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}
But I am kinda lost on how to structure everything up, should use span or div tag instead of p-tags.
Check this jsfiddle: http://jsfiddle.net/upas3/1/
Any ideas or solutions are welcome.
I would use DL list for each such block and UL list to group them together semantically:
<ul>
<li><dl>
<dt>Körlektion</dt>
<dd>360kr</dd>
<dd>40 min</dd>
</dl></li>
<li><dl>
<dt>Halkan</dt>
<dd>1700kr</dd>
<dd>Riskutbildnig 2</dd>
</dl></li>
<li><dl>
<dt>Riskettan</dt>
<dd>500kr</dd>
<dd>Riskutbildning 1</dd>
</dl></li>
</ul>
Looks like a good place to use ul and li tags.
Using paragraph tags can work but is counter intuitive for UI design.
Well, div and p are "the same" in that they are block elements, but p has more default styling, so as between them, you will want to use div.
You might use span if you want these blocks to be treated as one line of text, which it kind of looks like you do.
Update: As noted in other answers, you could also use various list tags, and style them to be inline elements, like span. That can be nice for screen readers.
This looks like tabular data, and tabular data goes in tables. However, that doesn't mean it has to look like a table!
http://jsfiddle.net/jdEP4/
table.prices {
display: block;
}
table.prices thead {
display: none;
}
table.prices tr {
display: inline-block;
border: 1px solid;
}
table.prices td {
display: block;
text-align: center;
}
.info.yellow {
background: yellow;
}
.info.green {
background: green;
}
.info.red {
background: red;
}
The CSS is incomplete, of course, but the baseline is there for reformatting the table.
Generally speaking there is no unified format, so you may use just whatever you feel better. Practically I am always trying use elements which will require less workaround. Let's say p tag will require additional margin normalization, so I would use instead divs, if you need inilne element probably better would be use span not div and so on. Just one thing which annoys me a lot it class/id names, always trying avoid somethign like size1, size2, style124 :) and use instead something that makes sense in context and will be understandable by other developers
Try this one: http://jsfiddle.net/P4xwK/
About your question I think that does not really matter you can convert every that to that you like with display:inline and with display:block. However the order of the tags should be syntactically correct.
Except that little triangle that looks like you want.
body {
font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
display:inline-block;
border: 1px solid #EEEEEE;
border-radius: 3px;
width: 100px;
height: 100px;
margin: 5px;
}
.price{
font-size: 28px;
font-weight:300;
color: #383838;
text-align:center;
}
.min {
font-size: 11px;
color: #909090;
text-align:center;
}
.info {
height: 35%;
margin-top: 15px;
padding-top:15px;
color: #EEEEEE;
font-weight: 600;
font-size: 11px;
text-align:center;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}
This here is a trick to paint a triangle with css:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I would organize it like so:
<div class="pricebox">
<ul>
<li class="price">360kr</li>
<li class="min">40 min</li>
<li class="info green">Körlektion</li>
</ul>
</div>
then style accordingly.
The only things that really matter here are author convenience and fallbacks.
For convenience, you would use div or span, which have no default rendering except for being block vs. inline, so there are no default settings you need to override.
For fallbacks, i.e. for non-CSS rendering, you would probably want to use p instead of div and span instead of div, since you want the items to be rendered as paragraphs (with empty lines or pauses between them) but internally just as text.
They look like list items to me. Not paragraphs. Programmatically, what you have is fine. Semantically, I'd try to think of them if CSS were shut off (That's why I'd make them a list)
<ul>
<li><h2>Header</h2></li>
<li>Price</li>
<li>Description</li>
</ul>
Couple of things: 1) I try to target the elements, but using ".pricelist" on the <ul> tags would be an option. 2) If I'm correct in thinking that "Header" is important, than you could use positioning on the <ul> and <li> elems to move the header to the last item for presentation, but maintain your semantics.
I like more semantic solutions:
HTML:
<dl class="pricebox">
<dt>Körlektion</dt>
<dd><abbr class="price" title="360 kronor">360kr</abbr></dd>
<dd><abbr class="min" title="40 minutes">40 min</abbr></dd>
</dl>
<dl class="pricebox">
<dt>Halkan</dt>
<dd><abbr class="price" title="1700 kronor">1700kr</abbr></dd>
<dd><abbr class="min" title="2 FrihDehBiDeUh">Riskutbildnig 2</abbr></dd>
</dl>
<dl class="pricebox">
<dt>Riskettan</dt>
<dd><abbr class="price" title="500 kronor">500kr</abbr></dd>
<dd><abbr class="min" title="1 FrihDehBiDeUh">Riskutbildning 1</abbr></dd>
</dl>
Inspired by #MaratTanalin solution
In CSS:
Replace .green, .yellow and .red by dl:nth-of-type(1) dt, dl:nth-of-type(2) dt and dl:nth-of-type(3) dt except if the choice of color depends on something else than the position of the pricebox.