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>
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 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>
I am having trouble figuring out the proper CSS for this page. I would like to maintain a responsive design so that images will re-size for the container they are in. If you look at this JSFiddle in Chrome and Safari it works fine. The images do not resize in FireFox or IE 11. The larger full images do not show on an iPad or iPhone at all. I'm not sure where to turn to next.
Here's the HTML
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_top">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-01.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h1 class="colab_text_padding">About Chiara Debenedetti</h1>
<p class="colab_text_padding">Chiara Debenedetti was born in Italy in 1982 and graduated from the European Design Institute of Milan in 2003. She founded Harta Design in 2011 and specializes in packaging, logos and corporate identity for luxury brands in the fashion, fragrance
and food and beverage industries.</p>
<p class="colab_text_padding">“Design for me is going beyond the visual form in order to develop the material aspect. We have five senses, but we often forget about touch. And yet this is the sense that allows us to first interact with the reality that surrounds us: the mother-daughter
relationship comes to mind. In my daily work as a designer, whether I am dealing with graphics or home décor objects, I always pay particular attention to the materials. My studio has become a depository of paper and textiles. With Bloomx, I aimed
to highlight the X-factor of felt: its feeling of warmth to the touch together with the lightness of the shapes that one can create at will.” </p>
</div>
</div>
<div class="colab_page_block_full colab_margin_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-02.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-03.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h2 class="colab_text_padding">About Bloomx</h2>
<p class="colab_text_padding colab_margin_bottom">Bloomx is a modular product that marries design and mathematics while providing strong graphic patterning through the play of positive and negative space. The exponent ‘ x’ (best known as ‘ power’ ) represents the infinite solutions in quantity, colors,
and shape. By pairing the single module—a clean essential shaped 6 petals flower—with header options, Bloomx can provide soft and textural space separation as flexible room dividers. 63 colors of 100% Wool Design Felt can be configured in limitless
ways and the product can grow or shrink as needed by adding or removing modules. Plus, the product can be quickly and easily reconfigured in the future as needs or tastes change.</p>
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-04.jpg" alt="" class="colab_image colab_bottom">
</div>
</div>
<div class="colab_page_block_full">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-05.jpg" alt="" class="colab_image colab_bottom">
</div>
And here's the CSS that I have so far.
.colab_page_block p {
margin: 0;
font-style: normal;
font-weight: normal;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #585858;
margin-top: 1.4em;
}
.colab_page_block h1 {
margin: 0;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-family: Museo-300, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 1;
color: #2f292a;
}
.colab_page_block_full {
width: 100%;
overflow: auto;
display: table;
border: 1px solid black;
}
.colab_page_block_half {
width: 48%;
display: table-cell;
}
.colab_page_block_left {
padding-right: 2%;
border: 1px solid red;
}
.colab_page_block_right {
padding-left: 2%;
border: 1px solid blue;
}
.colab_text_padding {
padding-left: 4%;
padding-right: 8%;
}
.colab_image {
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.colab_bottom {
vertical-align: bottom;
}
.colab_top {
vertical-align: top;
}
.colab_margin_bottom {
margin-bottom: 3.5em;
}
And here's a link to the JSFiddle:
https://jsfiddle.net/twestfall/Lbqfo40u/4/?utm_source=website&utm_medium=embed&utm_campaign=Lbqfo40u
Change the CSS for .colab_image to:
.colab_image {
overflow:auto;
width: 100%;
height: auto;
}
Here's a working JSFiddle.
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.