I have a CSS like below,
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
I want to use the same CSS but only the values inside the body should be changed. The values are
body
{
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
I tried adding a new class like this. Is this right ? Or how we can use two different body for different classes. Please anybody tell me.
I tried like this
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
#media screen2 {
.page2{}
}
#media print2 {
.page2 {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
But every time it is taking only the first body only.
As far as the body selectors, they both apply to the same element, so only one can be used. If you want to change the style of body, change the existing selector's properties. If you want to switch between the two based on some logic, give the <body> element an ID or class and add that to the selectors so you can choose which one will apply.
ALso, screen2 and print2 aren't valid media selectors.
Ok, here is the first bit.
As #Adrian said, you can only have one body element for a page.
Secondly, #media and #print corresponds to normal screens (such as desktop, laptop, and such) and prints (for examples, when you click on the print button) respectively.
So, what you need to do is simple. Either put the body tag outside all the other media queries.
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
#media screen {
.page{}
rest of your styles and classes...
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
rest of your styles and classes...
}
and so on...
or
do this...
#media screen {
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
.page{}
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
}
However, you should note that the print type css will only visible while you take a print out. It will not be visible on the main site display.
Related
I am new to HTML, CSS and Javascript. I am learning things. WHile learning, I came to a problem how to print only a textarea from HTMl while printing using CSS only.
#media print {
* { /* the asterix denotes every element */
/* belt and braces */
display:none;
visibility:hidden;
height:0;
overflow:hidden;
}
textarea {
display:block;
visibility:visible;
height:inherit;
overflow:visible;
}
}
[gulp-minify-css says quite cleary, that is has been deprecated in favor of gulp-cssnano.]
I am quite happy with thi css minification of cssnano, except for two things..
identical selectors with no interference otherwise do not get merged, i.e. body, html or h1, h2, h3 in the sample below
identical media query-‘brackets’ are not joined into one big query bracket, i.e. #media only screen and (max-width:500px)
even certain overrulings even on the very same selectors and precedence are not pruned (i.e. color:orange over green for h1,h2,h3)
Any advice, how to achieve this optimisation with cssnano.co ? (or another minification gulp task to chain into)
body,html{
margin:0;
padding:0;
}
h1,h2,h3{
color:green;
background-color:#caa;
}
#media only screen and (max-width:500px){
p{
background-color:orange;
}
}
#media only screen and (max-width:500px){
div,p{
background-color:purple;}
}
body,html{
margin:0;
padding:0;
background-color:#aac;
}
h1,h2,h3{
font-weight:700;
color:orange;
text-decoration:underline;
}
html{
background:orange;
}
h1,h2,h3{
font-weight:700;
}
p{
text-decoration:none;
color:#eee;
}
(This example is coming from three rather trivial files, merged together. core:false to keep whitespace. Turning it on removes whitespace, but does not fix the mentioned issues. )
I have a problem with using my styles in a certain class with my style.css.
The class structure is shown below. What i tried so far to make changes is:
#media (max-width:920px)
{
#section {padding-left:20px !important}
}
#media (max-width:920px)
{
#block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block .block-system .clearfix {padding-left:20px !important}
}
Class structure looks like that:
<section id="block-system-main" class="block block-system clearfix">
<div id="node-493" class="node node-meeting node-promoted node-teaser clearfix"
When I right clicked and examined the element I found a spot in the css code, where certain styles where automatically applied to this class. It looked like that:
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
The "section" was accentuated blue here, so i guess this was the class which was important in this case. If i wrote padding-left:20px; in that part of the code, everything worked fine, but i do not understand why my solution does not work...
No need to write each and every time media queries for same resolution. You can combine everything into only one. Also there is no id called "section" and class called "block-system-main".
#media all and (max-width: 920px)
{
section.block-system{padding-left:20px !important}
}
Just add the above one line instead of your entire code.
CSS :
#media (max-width:920px)
{
section {padding-left:20px !important}
}
#media (max-width:920px)
{
#block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block .block-system .clearfix {padding-left:20px !important}
}
section is a tag so don't use #section . I think this should work.
In ActionScript I got used to the with() selector that helped me assign attributes to one object quickly.
For CSS3 I am searching something similar, so that instead of:
.custom1 .redclass { background:#F00; }
.custom1 .fontbig { font-size:20px; }
.custom1 .hidden { display:none; }
I would only specifiy something like:
with(.custom1) {
.redclass { background:#F00; }
.fontbig { font-size:20px; }
.hidden { display:none; }
}
This would improve my speed a lot and ease things, especially for targeting site specific CSS using only one CSS file. E.g. each body gets its own class and I can assign styles to each different page / body.
CSS3 does not have what you're asking for.
Your options for the kind of functionality you're asking for are found in CSS preprocessors like LESS with its nesting capability.
In LESS, you could write this:
.custom1 {
.redclass { background:#F00; }
.fontbig { font-size:20px; }
.hidden { display:none; }
}
which would process to this:
.custom1 .redclass { background:#F00; }
.custom1 .fontbig { font-size:20px; }
.custom1 .hidden { display:none; }
Try LESS. With it you could do something like this:
.custom1{
.redclass { background:#F00; }
.fontbig { font-size:20px; }
.hidden { display:none; }
}
Then compile it with the lessc command into CSS. This is especially useful for styling several pages with one style sheet, because you don't have to target selectors yourself. In other words, you write:
body.home{
.header{color:red;}
.content{margin-top:20px;}
}
body.contact{
.content{margin-top:50px;}
h1{font-size:20px;}
}
and get back:
body.home .header{color:red;}
body.home .content{margin-top:20px;}
body.contact .content{margin-top:50px;}
body.contact h1{font-size:20px;}
There's a lot more you can do with LESS, this is just the tip of the iceberg.
I'm creating a chat program for the web designed primarily for mobile devices. My issue is that in trying to be as appropriate for mobile devices as possible I dropped pixel font sizes for em, however on my desktop pc with firefox the li text shows as very small and does on the iPad too. On my Nokia Lumia 800 windows phone it shows as much larger.
My CSS:
* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }
ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }
a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }
input[type="text"], input[type="password"]
{
width:100%; margin:0;
font-size:2em; border:0;
}
input[type="button"]
{
width:100%; padding:10px; font-size:2em;
font-variant:small-caps; letter-spacing:2px;
border:1px solid #000000; background-color:#dddddd;
}
#messages
{
width:100%; height:200px;
border:0; padding:0; margin:0;
overflow:auto; font-size:0.9em;
}
span.msgTime { font-size:0.7em; }
.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }
As you can see the list element uses 0.8em. I realise there are browser inconsistencies but is this really unavoidable?
I also use this to make sure the scale of the web pages show properly:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
update 1
I think it's worth mentioning that all other relative font sizes look fine, it appears to only be the list element that differs across the mobile browsers.
em is a measurement relative to the current font size. If the browsers all have a different default base font size, then they'll look differently. Try using pt instead which is still appropriate for different size screens and is not fixed like px would be.
http://www.w3schools.com/cssref/css_units.asp
Each browser has its own default stylesheet which sets the base text size. Ems are relative units that change size based on that default text size. Try giving your body a font-size:16px, just as an example, and see if that doesn't make the text show at the same size.
To be more clear here is a link to help explain why I suggest using a pixel size on the body element, and only that element. http://www.alistapart.com/articles/fluidgrids/
In css file line no 1 shows
* { margin:0; padding:0; font-family:arial; }
replace it with
* { margin:0; padding:0; font-family:arial; font-size: 1em; }
it will work!
If you wish to let each browser use its default font size, presumably suitable for the device, simply do not set body font size at all and do not use a meta tag to prevent scaling, as you are now.
If you think that “one size fits all” is your way, then set font sizes in pixels or points (different approaches), instead of trying to achieve that using the em unit.