I have a 3 scss file which are the base.css, layout.css and contents.css. I declare them as the following:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="contents.css">
base.css is for the default styles of elements. I use the layout for the header, footer, and also the wrapper of the website. As for the contents.css, the name speak for itself. Yes it is all the contents of the website. Since I got it separately, I don't practically use specificity. Like for example:
base.css
input {
padding: 12px 0 12px 0;
}
layout.css
layout-wrapper{
/*some styles*/
}
contents.css
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
Instead of overriding the input of contents.css the style of the base.css gets read first and then comes the contents.css. I wonder why it doesn't work for input because in other elements it was fine. I can achieve my goal if I put a specificity in my input element but it would look like this:
contents.css
layout-wrapper{
/*some styles*/
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
}
This would defeat the purpose of separating the layout and the contents. So my question is how can I override the input style from contents without any specificity?
even having separated files, specificity is the answer to your problems, other may say to use !important , but avoid that at any cost.
you should give the defaul diff class names or element name like make it default-input for the default css
Related
I am making a hangman game. And I am working on styling everything. I am including CSS reset in my HTML and I think it is causing my tags to error out. Like my H1 tag isn't working now. Any thoughts?
The H1 tag should make my text big and bold. However that is not working. The linked stylesheet I am using is empty right now. When I remove the CSS Reset link the H1 then works correctly.
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container" id="gamebox">
<h1>Hang-Person</h1>
</div>
</body>
<script src="assets/javascript/game.js"></script>
</html>
The last script tag is outside the body tag. It should be inside
Be aware to not repeat the same properties for each object in CSS.
Example:
In reset.css:
body {
margin: 0;
text-align: center;
}
And in style.css:
body {
margin: 20px;
text-align: justify;
}
It might cause the browser to get confused, I recommend you to do CSS reset in only one of your stylesheets. You can do it in the other one as well, but it won't be as efficient.
Here you have the universal CSS reset code:
* {
margin: 0;
padding: 0;
}
After this, you can specify the margin or padding to every element, although it violates the DRY (Don't Repeat Yourself) principle.
CSS Working example:
* {
margin: 0;
padding: 0;
}
.object1 {
padding: 70px;
}
It would be more helpful if you post the CSS code for better answers.
Last but not least, the last <script src="assets/javascript/game.js"></script> tag should be inside the body tag.
EDIT: try with the universal CSS reset code and keep the linked stylesheet.
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5
I have main style.css and the one provided with third party
// Include main CSS
<link charset="utf-8" media="screen" type="text/css" href="http://test.style-hunters.ru/wp-content/themes/style-hunters/style.css" rel="stylesheet">
// Include third party CSS, we have put it to css folder
<link href="http://test.style-hunters.ru/wp-content/themes/style-hunters/css/style.css" rel="stylesheet">
In the second style.css
body {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 20px;
}
This makes all body elements to have padding.
How to resolve it?
Include the third party CSS file first so that you can override undesirable rules in your own file.
You have three good options, two of which are mentioned:
1: Use the !important flag. This is the least desirable, because you forever overwrite the padding rule--what if a page needs to overwrite it?
body {
padding: 0 !important;
}
2: Flip the order; put the third party style sheet first.
3: Use the html tag:
html > body {
padding: 0;
}
/* OR */
html body {
padding: 0;
}
If don't you care about IE6, use the first, if you do, use the second.
Because second css file overwriting to first one. Because of this you have to delete padding : 20px; line from second css file.
If you can't edit second css file you can add !important to first css file. I mean like this :
padding : 0 !important;
In your first CSS file:
html body {
padding: 0;
}
Add more selectivity to your styling rules.
if you add !important after the rule it will override other rules regardless of order.
body{
padding: 0 !important;
}
Don't flip the order bcos in that case other attributes of the second css file can be overwritten by the first css file. So uuse the important flag.
i'm writing a component that is to be used across multiple websites.
each website has it's own stylesheets and displays certain things differently.
all of my html is wrapped within a div with an id:
<div id="myComponent">...</div>
my component however is to look consistent across all of the sites.
this is fine as i apply styling to most of the attributes in my component.
div#myComponent p {font-size:11px;} etc
however i've come across a site that removes the border from all input fields
input {border: medium none;}
i need to 'un-apply' this directive for the input fields within my component, and preferrably use the browser's default styling for inputs, as the border style for input type="text" will need be different to input type="button".
how would you achieve this?
You'd need to redefine it.
https://developer.mozilla.org/en/Common_CSS_Questions#Restoring_the_default_property_value
You can do it now since CSS2: border:initial;
div#myComponent input { border: 1px inset; }
you can use styles for different input types/
css :
div#myComponent input[type=text] { border:dashed 1px #ccc;}
div#myComponent input[type=button] { border:solid 1px #999;}
You can use javascript to add a class to the input.
Here is a jquery example...
<script type = "text/javascript">
$(function(){
$("#myComponent input[type=text]").addClass("borderMe");
});
</script>
and then define 'borderMe' in a stylesheet (or style tag)
<style type = "text/css">
.borderMe
{
border:solid 2px black;
}
</style>
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?