I'm new in CSS and I have a question about blocks (actually I don't know how do we name the 'blocks' like #my-id{color: yellow} so if you can also answer that it would be great)
So, I wanted to know if it was possible to specifie how will type of a class comport, it would look like this:
.my-class{
h1{
color: yellow;
}
p{
color: blue;
}
}
I hope you understood what I want to explain, so please answer my two questions!!!
Technically, yes, but not when both blocks are rule sets. (e.g. you can put a rule set inside a media query).
Some other languages, such as SCSS, which can be transpiled to CSS, allow you to do that, but in CSS it is just invalid.
Related
I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.
Is there any way to specify a color and quickly reference it within other elements further down the page? For example:
.red_color {
color: #FF0000;
}
Now, further down the page we have other elements:
div.example {
padding: 10px;
color: [REFERENCE ABOVE]
}
This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.
I know it is possible if I list all the elements in one place, like:
div.example, div.other_example, p {
color: #FF0000;
}
But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.
Any other ways of doing this?
Thanks.
Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.
Is it possible to use existing css class as content in another class ?
I mean something like:
/* Contained in some library: */
.class1 { text-indent: 100 }
/* I can not change this: */
<span class="class2">
The definition for class2 is also contained in another library. So I can not change it directly.
/* But I want to do something like that in my CSS file: */
.class2 { .class1 }
I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project uses jQuery as well, but I would do it rather with CSS.
EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.
It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.
Despite it doesn't apply with your code restrictions, this is the closer way to do it:
.class1, .class2 { text-indent: 100 }
.class2 {
/* Styles you want to have only in class 2 */
}
<span class="class2" />
On the other hand, as #A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.
In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.
CSS has no means to reference one rule-set from another.
Your options include:
Using multiple selectors for things with common rules
.menu,
.nav {
font-weight: bold;
}
.nav {
display: inline-block;
}
Using multiple classes on a single element
.menu {
font-weight: bold;
}
.nav {
display: inline-block;
}
<li class="menu nav">
Generating your CSS programatically
For example, with SASS
#mixin menu {
font-weight: bold;
}
.nav {
display: inline-block;
#include menu;
}
Yes, it is possoble.
Write:
.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}
More info here.
Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.
Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.
You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:
Cannot change html
Cannot change the css file that defines .class1.
You can change the css file that defines .class2.
If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).
Step One: Make the CSS into LESS
Create a file, let's say CSStoLESS.less and put this in it:
#import (less) /path/to/your/your-css-defining-class1.css;
This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.
Step Two: Use that file as reference in your LESS
By doing this in your .less file defining .class2:
#import (reference) /path/to/your/CSStoLESS.less;
.class2 { .class1; }
You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.
It may be that this alone works:
#import (reference) /path/to/your/your-css-defining-class1.css;
.class2 { .class1; }
What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.
The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.
I am assuming you want whatever is in .class1 plus some extra properties in .class2
One way is to simply apply both classes to the element you want..
<span class="class1 class2" />
another is to name both classes when setting the properties
.class1, .class2 {text-indent: 100}
.class2{/*extra properties here*/}
You can define 2 classes in this way
.class1, .class2 { text-indent: 100 }
And it will work for you
Moreover if you want to ad some more in class2 then you can define it
.class2 { /*whatever you want here*/ }
Others mentioned SASS and LESS. Here's the solution of Stylus:
.class1
text-indent: 100
.class2
#extend .class1
I am coding a .psd image to html. But i confused with the best practise to do so. i.e
for styling a achor like a button i use following style attributes
.button {
padding: 10px;
display: inline-block;
text-decoration: none;
background-color: #3f4551;
color: white;
background-image: url("../images/icons/icon_left.png") no-repeat 10px center;
}
now i can use the to get the desired result.
However i have lots of anchor which have same styling as before only with minor changes like icon on right side instead of left and different color,gradient etc.. so i decided to break it in multiple class i.e
.button{
padding: 10px;
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
background-position: 10px center;
}
.color_blue{
color:blue;
}
now i can use these classes to style i.e <a href="#" class="button icon_left color_blue></a>"
But in this way the markup is getting more and more clumsy and weird.So i decided to ask for which is the best practice ??? THANKS in Advance :)
That's a good start and you are going in the right direction.
Some further hints though, considering best practice:
Use descriptive names which are not explicitly telling their value. For example, do not use color_blue as class name because the color could change if you redesign your application. Better are names that reflect the purpose of that element, like default-action, disabled or emphasized. In the same manner, with-icon would be a better class name than icon_left. Names are about semantics, and not the visual representation.
Use specific selectors if applicable. For example, if the button classes are used by button elements use selectors like button.emphasized. That let's you reuse that class name for other types of elements (i.e. div.emphasized), so that you do not have to rename them into .button-emphasized and .block-emphasized.
If you know more about the structure of your document, you could even distinguish between #content > button.emphasized and #sidebar > button.emphasized and use different button classes depending on the element hierarchy.
Use selector inheritance if applicable. If a class shares the same property-value pairs amongst others that differ, you should use inheritance. For example .emphasized for rules that apply to all elements using this class, and button.emphasized & div.emphasized for specific rules, which can overwrite the more general ("parent") selector.
Apply naming conventions. Usually, the names are lowercase and the minus sign is prefered instead of using the underscore. Therefore, with-icon is better than with_icon. You can also use uppercase letters like so: withIcon. Personally i prefer the first version.
If I understand correctly ..Your on the right path! I know it looks like your source code is too stuffed but that's the way it works.Remember that classes are used for styling more than one element, and Id (if used in the proper way) are used to style a single entity/element
I'm trying to tidy all my css code on my site, I want to be able to be specific with the type. Let's say the type will be 20px, bold and blue e.g.
<h1 bold blue>Hello world</h1 blue bold>
So the css file will have:
h1 {
font-size:20px;
}
bold {
font-weight:bold:
}
blue {
color:blue;
}
Then as I go through my design process i can mix and match with colors and sizes etc. Is something like this possible?
this isn't possible exaclty like you want to, but what you can do is this:
<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter
and
h1 {
font-size:20px;
}
.bold { // added . for being a class
font-weight:bold:
}
.blue { // added . for being a class
color:blue;
}
css-variables itself are possible when using something like lesscss, but this works in another way than the one you mentioned and your html-markup still has to be valid.
EDIT:
please note that, as edem (and others) said, using blue and bold as classnames in a real project isn't a good idea. i assumed you just gave this as short examples to ask for how to combine different "sets of css-rules" (read: classes). if thats not the case: stick to edems or tims explanation and take a look at guides for "semantical markup".
Colors rarely make good identifiers. Suppose "blue" is no longer blue? Maybe you want it to be red instead?
Font-weights ("bold" in your example) also are not good identifiers. Perhaps in the future you may prefer a font which looks better with a normal font-weight.
Determine the purpose of the style (e.g. article byline, or picture caption) and/or the semantic purpose of the element to which it is being applied, and name your styles accordingly.
You can then use a combination of classes (as others have mentioned) to achieve your desired goal.
This is against good practices. Let's say you have an article header type which can be found on any article page and a main header which is on every page:
.mainHeader {
font-size:20px;
font-weight:bold:
color:blue;
}
.articleHeader {
font-size:15px;
font-weight:bold:
color:red;
}
What if some day you decide that your article header won't be blue any more. If you change
.blue {
color:blue;
}
to
.blue {
color:red;
}
that wont'be good. You should name your classes/ids according to their semantical purpose.
The point is that CSS supposed to be succint so you can change the looks of your whole page with modification in 1-2 lines. The idea you present here is not succint therefore not considered a good practice.
I think you should use less css as the answer suggested above. By the way if you use some scripting language on your webpage like python or php you can use a template engine which supports inheritance and you can generate your own css code and you can use variables there. This simply does not fit in CSS alone.
Yes. Use classes.
<h1 class"bold blue">Hello world</h1>
h1 {font-size:20px;}
.bold {
font-weight:bold:
}
.blue {
color:blue;
}
I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.