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>
Related
So as my other question failed because I failed to post the right stuff.
My question is if there is a way to chosse tag inside an element... This is the xml file.
<?xml version="1.0" encoding="utf-8"?>
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen"/>
<mytest>
<mystory>
<myItem>
<myDescription>Hello my name is <myName>Frosta</myName></myDescription>
</myItem>
<myItem>
<myDescription>Hello my name is <myName>Frosti</myName></myDescription>
</myItem>
</mystory>
</mytest>
this is my css file :
myitem{
color: green
}
myDescription{
color: blue;
}
myName{
color: red;
}
The problem is when I call the tag title or topicWord there's nothing that displays... And I would like to habe the title in blue and the topicWord in red...
What i tried :
element element
element+element
element1~element2
element>element
and it just dosn't work... It doesn't even show up...
EDIT: fixed a typo in the CSS file but it doesn't change my initial problem...
You need to say
title {
display: inline;
color: blue;
}
because title element is display: none; by default. Note however, that it treats its content as text and shows explicitly.
I ran your code through a jsfiddle, and I see that the title tag is not showing up, but if you remove the topicWord from within the title tag, it shows up fine, and is actually getting the styles changed fine.
Why don't you put your title in an h2 tag, with a class of title? That way, it shows up, and you can do this for your css:
.title{color: blue;}
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>.
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.
I am doing a report and inside the report I have to render emails from different providers, this emails come with their own css (usually inline css but sometimes they apply general styles). I usually use iframes to encapsulate css so it doesn't breaks up mine but I can't use it now.
Is there a way to encapsulate css without the use of iframes?
here is an example of the problem I am having:
<html>
<head>
<style>
// I enclose it to content so it doesn't override the email css
#my_content table, #my_content p {
color: black;
}
</style>
</head>
<body>
<div id='my_content'>
... some stuff ...
<div id='email'>
<html>
<head>
<style>
table {
margin-left: 100cm; // screws up all my tables
}
.... some styles that should only apply inside the email div ...
</style>
</head>
<body>
.... email content ...
</body>
</html>
</div>
</div>
</body>
</html>
I could extract the html structure and just get what's on the body but then not all my emails will look as it should. Also the html must be valid so any suggestions would be great!
You can prepend #email to your css selectors, making them only apply to your div.
For example, change
.classname { display: block }
to
#email .classname { display: block }
Edit: If you have no control over the e-mail CSS as arxanas suggests, consider using LESS. Less is a CSS preprocessor that allows nesting of CSS selectors. If you include less.js, then you can do something like this:
#email {
CSS goes here
}
less.js will parse this and convert it to CSS.
You could try to check the E-Mail css part for collisions with Your own class names.
I just found this post which could be helpful for You:
Listing known CSS classes using Javascript
I'm making a web page where I want the color of the font to be red in a paragraph but I'm not sure how to do this.
I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?
<p style="color:red">Foo</p>
Or preferrably:
<p class="error">Foo</p>
Where "error" is defined in your stylesheet:
.error {
color: red;
}
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="hilight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
Brief CSS Explanation :
Since most of the answers you're getting are all mentioning CSS, I'll add a small guide on how it works:
Where to put CSS
First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:
<style type="text/css"> <!-- Your CSS here --> </style>
This is called embedded CSS since it's inside the document. However, a better practice is to link "include it" directly from an external document by using the following tags:
<link href="file.css" media="all" rel="stylesheet" type="text/css"/>
Where file.css is the external file you want to include into the document.
The benefits of using the "link" tag is that you don't have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.
This two ways of including CSS are the most recommended ways. However, there's one more way that's by doing in-line CSS adjustments, for example:
<[tag] style="<!-- CSS HERE -->"> Content </[tag]>
CSS General Structure
When you code write CSS, the first thing you need to know is what are classes and what are id's. Since I already mentioned what they do above I'm going to explain how to use them.
When you write CSS you first need to tell which elements you're going to "select", for example:
Lets say we have a "div" element with the class "basic" and we want it to have a black background color, a white font, and a gray border.
To do this we first need to "select" the element:
.[identifier] { }
Since we're using a class we use a "." in front of the identifier which in this case is: "basic", so it will look like this:
.basic { }
This is not the only way, because we're telling that ANY element that has the class "basic" will be selected, so lets say we JUST want the "div" elements. To do this we use:
[html-tag].[identifier] { }
So for our example it will look like this:
div.basic { }
Now we've selected the "div" with the class "body". Now we need to apply the visual style we wish. We do this inside the brackets :
div.basic {
background-color:black;
color:white;
border:1px solid gray;
}
With this, we just applied successfully a visual style to all "div" elements that have the "basic" class attached.
Remember this doesn't just apply for "class" it also applies for "id" but with a slight change, here an example of the final code but instead of a class we'll just say it's a "id"
#unique-basic {
background-color:black;
color:white;
border:1px solid gray;
}
For a complete guide to CSS you can visit this link:
http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
<style type="text/css">
.myCSS
{
color:red
}
</style>
<div class="myCSS">text</div>
<span class="myCSS">text</span>
<p class="myCSS">text</p>
<!-- table elements..... -->
<td class="myCSS">text</td>
<tr class="myCSS">text</tr>
<p style="color:red">Your Text here</p>
But as others have by now said in more and better words: Even better than the above would be to use classes or IDs and assign the CSS-attributes to that instead of using the inline style.