UPDATE: This has been solved. My CSS selector was wrong. Thank you so much for all who responded!
I am just starting out building a site on a local server using MAMP. I have worked on other people's code but am a sort-of novice when it comes to starting from scratch so forgive my naivety. My CSS file wont apply and give me the proper background color for my header. I have two stylesheets, style.css and 960.css (downloaded from 960.gs).
Upon going to index.html, 960.css renders on the page but style.css is nowhere to be found. They are in the same folder, and called exactly the same on index.html. Please help.
My file structure:
-project
-styles
style.css
960.css
index.html
The code is as follows:
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/style.css"/>
<link rel="stylesheet" type="text/css" href="/styles/960.css"/>
<title>title</title>
</head>
<body>
<div id="header_container" class="container_12">
<div class="grid_2">
<h1>Title</h1>
</div>
</div>
</body>
</html>
and style.css
#header_container .container_12 {
background-color: #000000;
}
If you are not familiar with the 960 grid system, all it does is provide div classes and measurements for them. The container_12 you are seeing is in 960.css but is only set with dimensions, not background color so I dont believe it is necessary to include 960.css as it is pretty long. It may be an issue with MAMP, but I'm sure this is a simple mistake somewhere in the code, but I've been working on this issue so long im just braindead at this point. Thank you so much for any input/suggestions you have. If I have not made myself clear anywhere or I need to explain something in more detail please let me know! Thanks again.
This CSS selector you have written is wrong.
#header_container .container_12 {
background-color: #000000;
}
Use
#header_container {
background-color: #000000;
}
or
.container_12 {
background-color: #000000;
}
Hope the class .container_12 belongs to "960.css" and you are trying to force the class in your style.css, if yes, try to update your css (!important) like below..
CSS:
.container_12 {
background-color: #000000!important;
}
you selector wasn't wrong, you were only violating group selector's rule and a couple of things. However to use group selectors, you need to separate each selector with a "," not space. so you should have something like this;
#header_container, .container_12 {
background-color: #000000;
}
But I wonder why you are passing the same property and value to the same div element with a class and an id?
Good luck.
Related
I'm using bootstrap for a navbar that I like and I use the style.css from bootstrap, but I also want to implement some elements from another framework that has its own style.css. The problem is that the elements appears distorted because the second style rewrites the first.
Is there a way to specify the influence of a style.css?
For example, style_1.css to have influence over:
<header>...</header>
and style_2.css to have influence over:
<main>...</main>
It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.
See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.
If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:
.bootstrap-styles {
#import 'bootstrap';
}
/* OR */
.bootstrap-styles {
#import (less) url("bootstrap.css");
}
You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:
<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>
<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>
EDIT
It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.
Here is an example of using both Bootstrap and jQuery UI together:
<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>
<button class="btn btn-primary">Test Button</button>
<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>
<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>
And the result is this one:
As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.
Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/
Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.
I had the same problem and I resolved it like this:
copy the CSS rules you want to use in a specific region.
convert them to SCSS by pasting them in this link: css2scss and then
Click on the arrow (choose SCSS).
copy the SCSS rules result you got, and paste them in this link: scss2css.
wrap the entire SCSS rules with this rule: .wrapper {}
like this:
.wrapper {
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/*all other rules*/
}
click on the 'compile' button and wait until you will get all your CSS.
the above SCSS will result like this:
.wrapper a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
and so All your other CSS rules will be prefixed with the .wrapper class.
Click download button to download your CSS, and then link it to your HTML
page.
to use this CSS only in certain regions warp that region with a div
and give this div a class "wrapper".
<div class = "wrapper">
<a class = "a_Class_From_The_Downloaded_CSS_File"/>
<!-- put here all other HTML tags you want
and add all the class etc. you want from the
CSS file you created.
it will not collide with other CSS class from other
CSS files because of the div.wrapper tag
-->
</div>
Generally not. However you could use the > selector everywhere:
#divtoApplyTo > a {
color: green;
}
So that just all links in that specific div get changed.
This is not possible. Stylesheets are applied to the whole document and not to subsections of it. Whether an element is affected by the rules is then subject to the used selectors. Following of that, when you want a rule to only apply to elements within <header>, they must begin with header > or header (space).
However, from your comments it follows that rewriting all rules is not an option since it's too many. A solution might be to use a preprocessor like SASS.
Example:
Input (SASS)
header > {
div {
color: red;
}
button {
border: 1px solid hotpink;
}
}
Output (CSS)
header > div {
color: red;
}
header > button {
border: 1px solid hotpink;
}
The idea would be to wrap all rules that should only be valid for <header> into an appropriate block and let SASS rewrite the rules for you.
However, this leads to blowing up the overall file size. Also, one should not forget that frameworks also include global rules. Since something like header > html or header > body is bogus, this solution might still require doing manual changes.
Haven't tried it, but found this: The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is: Applying CSS styles only to certain elements
Concatenate the two Bootstrap files (bootstrap.css and
bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the
styles to apply to in <div class="bootstrap"></div>.
I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
So this would be my html:
<body>
<section id="info">
<div class="status">
...
I am trying to style the div.status through my css file attached to the html file and the line begins like this
body section#info > div.status { ... }
I am not using any css3 properties and the element is not applying ANY of them. I am able to style an inside element though, using the straight-child ">" symbol. To do it, I just copied the line before and completed the path to the element.
I'd really appreciate some thoughts, thanks!
Why you not just try to use
.status
{...}
But yours is working too.
In your CSS file, you haven't properly closed the previous line 21, which was breaking the file causing everything beyond line 21 to be ignored.
div.map > .countries > #country
Should be
div.map > .countries > #country {}
(Or whatever you intend to put in that declaration, but just try making it empty for now and seeing if that solves the issue)
Simply using div.status { ... } should work fine, or section#info div.status { ... } because as long as there is no interference with other elements of the same class which need to be styled differently (in which case you should probably be using a separate class), you don't need to be too specific, and the extra code increases the likelihood of syntax errors to creep into your work, breaking it. If you're still having problems, then can you please give a sample of work with a little more info in it so we can see if the problem is coming from elsewhere?
It is working just check how css is embedded into your html!
body section#info > div.status { color: blue; }
See Demo Here
I think the problem is in embedding the css into your file!
straight write between your head element like this
<head>
<style>
body section#info > div.status { color: blue; }
</style>
</head>
Or if it is separate css file! make sure path is correct!
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
EDIT: First of all, sorry for not pasting the link directly. Secondly, thank you ALL for the help, everything works now. Thank you Manoz especially for pasting my code and fixing it. This website is magical, I've been trying (and failing) to make my code work all day yesterday, so I thought to give this website a try and got much more help than I expected. THANK YOU!!
I'm an amateur programmer in school, having a lot of trouble with div id. Here is a link of how my code looks like:
http://convert.neevia.com/docs/e7416408-ff15-4c01-954c-603bfd1ce941/test11.jpg
The problem I'm encountering here is that anything from #title to #footer is not showing up in the browser. In other words, it is not linking any id (such as #title) to the HTML code .
I would really, really appreciate some help. Thank you very much.
<!Doctype html>
<html>
<body>
<head>
<style type="text/css">
div{
border:solid 2px;
margin:5px;
padding:5px;
color:green;
}
#title
{
height:150px;
}
#menu
{
width:150px;
float:left;
height:450px;
}
#mainarea
{
margin-left:180px;
margin-top:10px;
}
#content
{
}
#footer
{
height:30px;
text-align:right;
}
</style>
</head>
<body>
<div id="title">
<p>The title</p>
</div>
<div id="menu">
<p>the menu</p>
</div>
<div id="mainarea">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html
Changes are being appeared when I change anything from #menu to #footer in CSS.
If Tony Barnes's idea didn't work (which you should try), you might just not be saving the file before you refresh your browser.
I see nothing wrong with your code. Until you post it in your question (https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks) I'm not going to try it out, but it could be a caching problem. Ctrl+Shift+R (Win) Cmd+Shift+R (Mac) to refresh the page with a new cache. I noticed that you're using Dreamweaver. Don't. Especially do not use it's preview option. There are many better (free) text editors.
Caching probably isn't an issue though because it's all inline CSS.
The issue for me, is just that there is a cache file that is present in the browser. I had the same issue, so I had to remove that using CTRL + F5.
Otherwise, what does the red line means in the code? Does your text editors shows the error when you hover over to it? I am sure it would help you.
Third thing would be, to check the Html Inspector from your browser. To check that press F12, I am sure you will get the styled properties there, this way you will get to know which properties are being applied.
If the updated ones are not present in the Browser, then the cache is the issue. If they are being overridden then you will also know how!
For example:
<html>
<head>
<link href="css/style1.css" type="text/css" />
<link href="css/style2.css" type="text/css" />
</head>
<body>
<div>I want to use style1.css within this div<div>
<div>I want to use style2.css within this div<div>
<body>
Is there any posible way to do like that ?
Thank you.
In your two files define different classes of div.
For instance, in style1.css you might have:
div.class1
{
background-color: red;
}
And in style2.css you might have:
div.class2
{
background-color: blue;
}
Then change your code to reflect where you want each style, ie:
<div class="class1">I want to use style1.css within this div<div>
<div class="class2">I want to use style2.css within this div<div>
As you wrote, this is not possible but you can give the div-tags id and format for the id only. So you only have to add one css file which gives you a better overview ,structre and the website is loaded faster.
The HTML Markup
<div id='first'></div>
<div id='second'></div>
and in the css
#first{
background-color:red;
}
#second{
background-color:green;
}
By using id's you ensure that the access is faster than by using classes. If you want to style the content of the div's differently you could also do that.
If I were you, I also would use classes to define which styles go to which div. However I would not use a separate stylesheet for each class. I would combine the two classes into one stylesheet, because like EvilP said, loading two separate css files can be slow.
Also, I would avoid using ids where a class can do the job as effectively, because an id is only used to target one specific element, and a class doesn't have to, but can target more than one element. So a class is more versatile overall.