Currently I have my stylesheets as such:
<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Is there a way to force style.css to be only on a monitor, and force print to only be on printed matter? I'm trying to make a printer-friendly page and it's taking forever to override the mass of rules in style.css.
Use media="screen" on the main stylesheet so styles are only applied on a monitor screen:
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
If you don't specify a media attribute, the stylesheet takes a default of media="all", which means styles are applied everywhere.
Read more about media types here (HTML spec) and here (CSS spec).
Related
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
If I use this .css file in my code, it will overlap the previous .css files which I wrote myself, how can i load my .css files first, if I can not find the css then turn to the bootstrap .css file?
i would guess that your css declaration looks like this
<link rel="stylesheet" type="text/css" href="yourcss.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
you should change them upside-down
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="yourcss.css" />
the reason is that any css that is closer to the body tag, will be considered the first priority. if items in yourcss.css has the SAME NAME with the items your bootstrap.css, the bootstrap.css's items will be OVERRIDDEN. if you didn't want to override these, make sure the item/class/id name is different for each in the yourcss.css. Make the best practice of giving each tag a different class name for your css.
You write your css files like this:
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/your-style.css" />
try this
<link rel="stylesheet" href="assets/css/bootstrap.css">
after your own css
<link rel="stylesheet" href="assets/css/YOURCSS.css">
You could load your own CSS with
<link rel="stylesheet" type="text/css" href="css/style.css" />
and then import bootstrap inside your own CSS file, that way your CSS will be on top of bootstrap and you will be able to override it.
#import url("bootstrap.css");
Hey I have a problem which is two part but the first one is obviously where I must begin:
I have inherited a project which has three stylesheets, desktop.css, tablet.css, and mobile.css - they are called like so on the page:
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
However the programmers before me were in a hurry and really, most of the code is the same; they just made tweaks per file as needed. Probably 90% of the code is the same.
My goal is to have a common stylesheet first as below:
<link rel="stylesheet" type="text/css" href="/css/UNIVERSAL.css" />
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
and get all common css into universal.css, and include on the other files only the "overrides" needed for that particular device.
All three files are a mess. There are multiple instances of a class/id declarations. They are quite out of order. I know there are CSS prettifiers out there, but is there any application which will take a CSS file, "READ" it, and re-output it in a condensed format?
It would be also nice to do a diff on the css and see what's different. DIFF itself is not going to work because of being out of order in probably multiple ways. So if you know anything in this regard, I'd appreciate it.
Check the advanced options of proCSSor
Good morning,
I am creating my 1st Wordpress theme from scratch and I have hit my 1st barrier.
If you take a look at my progress so far;
http://www.trevorpeters.co.uk/brad/?page_id=4
You will see that the CSS is linked correctly, but the H1 tag and P tag are not taking all of the attributes from the defined style, In Mozilla Firefox dev tools, some of the attributes are crossed out but are NOT being overwritten by any other styles.
Thanks, Brad Houston
Your styles get overridden by reset.css line 92. You can have a look at computed styles in the dev tools to have a look which style finally is applied to your element and the name of the source this style comes from. This is very handy when there are a lot of styles overriding each other.
You need to switch the order of your style.css and reset.css and then everything should be fine, because now your stylesheet overrides the default settings of the reset.css.
your style.css is above your reset.css.. what you do expect?
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
should be
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
check your header.php for the codes...
Looks like you've placed the CSS-files in the wrong order.
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
You reset your style after style.css.
You need to reorder the css stylesheets. You're putting the reset.css after the style.css so the reset is overlapping the style.
on my site i have 3 css
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
i thought the media handheld will automatically load my site formated for devices
when i load my site with my android, i still see the "site.css" why it does not load the handheld.css?
Apparently Android/iPhone/Nokia browsers don't think that they are handhelds.
You should use media queries to detect devices.