Situation
I recently decided to put comments in my CSS files. And once I did so, one of them stopped working.
Both ways of making comments make my entire CSS file not to work. I know this is lacking informations, I just don't know where it could even possibly come from.
In case it does matter, this is how I write my CSS:
// Background
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
// The white spaces are actually tabs (Alt+i on Emacs)
Update 1
I am looking for ways to debug this situation. I see my CSS files in the developer tool from Google Chrome, but properties are not applied.
foobar {
// color: cyan;
}
Does this simply make the CSS wrong but only on the one line ? So the rest of the file keep getting parsed ?
Update 2
I always used // to comment my CSS but with the later notation I used in this post. Now that I changed my mind and am using inline CSS, // being an invalid token make the whole file not readable.
css does not recognize the double slash as a comment. You have to use the
/* */ one.
I might be wrong, but since the double slash is not a valid css token the behaviour might be browser dependent. I would expect browsers to simply ignore the property or the statement that follows the //, but I never checked/tested.
There are rules on what browsers should do in various situations, however I did not see any for unknown token (maybe a I didn't look well enough).
Use */ Text */ , instead of // (// is comment in javascript)
/* Comment */
For Example
/**** Background ****/
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
Try the comments this way
/* Background */
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
The only way to comment in CSS is by /* this is a comnent */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Related
I have variables in my css but it isn't recognized.I have tried setting variable like the code below but when I run it in chrome it doesn't work.
li {
border: 2px solid red;
}
:special {
background: yellow;
--col: blue;
}
.completed {
text-decoration: line-through lime;
color: var(--col);
}
but when I set to blue directly it works like that
li {
border: 2px solid red;
}
:special {
background: yellow;
--col: blue;
}
.completed {
text-decoration: line-through lime;
color: blue;
}
I don't understand what is the problem.
:special isn't a recognised selector which is most likely causing your problem here. People tend to add global custom CSS property declarations to the :root {} selector. Or simply scope them to the parent selector that you're using.
:root {
--col: blue;
}
.class-name {
color: var(--col);
}
:special is an invalid selector. Rules in invalid selectors are ignored as per the specification, so your variable is never defined.
I would like to know how to split or sperate hyperlinks from eachother, i also would like to know how to align or position where the links go. ps. i am just beginning so this is probably basic.
thanks
Not sure about your problem. But from the code you given i just added some changes. Try this.
html { background-image: url(file:///C:/Users/Tom/Pictures/93af2cd5d83f6f839db98e6d5079b4f4.jpg); }
h1 { color: gray; }
a:visited { color: black; }
a:hover { color: yellow; }
a:active { color: yellow; }
a { background-color:gray; filter:alpha(opacity=60); opacity:0.4; padding:0px 15px; }
How can I add CSS comments in LESS nested rules? Ex:
div{
span{
font-size: 16px;
color: #fff;
}
/*This is my comment*/
em{
color: blue;
}
}
This is the output I expect to get:
div span {
font-size: 16px;
color: #fff;
}
/*This is my comment*/
div em {
color: blue;
}
But, unfortunatelly this is how it is processed:
div {
/*This is my comment*/
}
div span {
font-size: 16px;
color: #fff;
}
div em {
color: blue;
}
Is it possible to make this?
This isn't possible using /* */.
The reason being that it is still under the div scope, so it won't work using /* */ comments.
However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).
Here is the official documentation on comments.
Well, you can get your comment inside nested rules:
div {
em {
/* This is my comment */
color: blue;
}
}
output:
div em {
/* This is my comment */
color: blue;
}
I hope this would be useful for you.
/*This is my comment*/
div {
em {
color: blue;
}
span {
font-size: 16px;
color: #fff;
}
}
and the output will be,
/*This is my comment*/
div em {
color: blue;
}
div span {
font-size: 16px;
color: #fff;
}
More or less it would be like what you are expecting !!!
I just started to using sass/scss and i have a small issue. Let's assume this code:
.button {
color:#c00;
&:hover {
color:#000;
}
}
Everything is awesome and works as it supposed to. But.. Let's say I want to do different hovers depending of tag. So, if the tag is a span to show a color and if the tag is a a to show another color.
Is this possible without repeating some part of the selector?
Thanks!
No. Remember that in the end everything compiles to CSS.
The way to do it would be the following:
.button {
.green {
color:green;
&:hover { color:black; }
}
.red {
color:red;
&:hover { color:black; }
}
}
You would need to add a class though.
You could use the mixin approach but it's going to be more verbose.
I would do it like this:
.button {
color: red;
&:hover { color: black; }
}
span.button:hover { color: green; }
a.button:hover { color: blue; }
Have a play yourself here: http://tinkerbin.com/CBuHSGfV
I have a simple border style say:
.border
{
/*content*/
}
I want several other classes to inherit this border style. Can this be done in CSS only?
Or do I need to specify it in HTML also?
I want:
.actionArea : .border
{
/*content */
}
Or can this only be done in HTML like:
<div class="actionArea border"/>
It would be very annoying if the latter is only possible.
Update
This works good enough, but still is a bit ugly:
.actionArea, .otherArea, .anotherArea
{
/*border specification */
}
.actionArea
{
/*area specification/*
}
.otherArea
{
/*area specification/*
}
(..)
You will need to use a CSS framework such as LESS for such a thing.
You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css
Example copied from LESS
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}