I'm new to less css and trying it out. I've done the following
I've added this div
<div class="myclass">This is a test of LESS CSS</div>
and in the mystyles.less, added this
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
.myclass {
.somepattern();
}
When I change the syntax to this, it works, which means the problem is in the syntax of caling .somepattern. I tried .somepattern() and .somepattern and somepattern but nothing works. The only thing that works is the plain old way of having the code in the class itself
.myclass {
font-size:16px;
font-weight:bold;
border:2px solid red;
}
You don't have to use .somepattern(); just somepattern;
So:
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
.myclass {
.somepattern;
}
You have to use "stylesheet/less" instead of plain "stylesheet" as the rel paramater. It should look like this:
<link href="mystyles.less" media="screen" rel="stylesheet/less" type="text/css" />
Related
As mentioned here it's possible to set properties based on e.g a class on a parent element.
I've tried it a while without luck to specify the color of a paragraph based on the sections background containing the paragraph to have all style definitions in the file for that paragraph to keep it atomic.
If I looked into the compiled CSS and saw something happens. I guess my filestructure broke things here because I created a lot of files and included them on the levels where these were needed.
Here's what I did:
// Main.scss
html{
body{
#wrapper{
#import "areas/section";
}
}
}
// _section.scss
section{
width:100%;
height:100%;
&.black{
background-color:#000;
}
&.white{
background-color:#fff;
}
#import "paragraph";
}
// paragraph.scss
p{
section.black &{
color:#fff;
}
section.white &{
color:#000;
}
}
And the generated outout looks like this:
section.white html body div#wrapper section p {
color: #000;
}
And I expect an output like this:
html body div#wrapper section.white p {
color: #000;
}
Is that possible or is my interpretation completely wrong?
The parent selector isn't a reference to the next level up, but the entire composed selector after all imports/extends/mixin calls are resolved.
.one {
.two {
.three & {
color: red;
}
}
}
The output will be this:
.three .one .two {
color: red;
}
In this example, & is equal to .one .two, not .two. It doesn't matter what method you use to nest your rules (extending, importing, or using mixins), the result is still the same.
I've gotten this code to work propely,
<img src="forest.gif" class="magnify" border="0" />
but I do not want to add class="magnify" to each img. I want to make it part of my style sheet, and have it effect all images. Is that possible?
You'll have to use JavaScript if you want to add it at a time after the page is loaded.
In JQuery:
$(document).ready(function(){
$('img').each(function(){
$(this).addClass('magnify');
});
});
change
.magnify {
color: red
blabla...
}
to
img {
color: red
blabla...
}
that gives style to all images.
Try defining TAG specific style sheet definition. Define your own CSS class to override it on specific image tag when needed, you can even combine more than one CSS class.
img {
border: 0;
attribute1: 1abc;
.
.
.
attributeN: nABC;
}
Including example:
<style type="text/css">
img {
margin: 10px 10px 10px 10px;
border: 2px 2px 2px 2px
}
h1, h2, h3 {
font-size: 12pt;
}
</style>
Including additional example:
<style type="text/css">
img.magnify.magnifyEx {
border: 2px;
}
</style
I'm trying to add PT Sans into a newsletter, but for some reason it isn't loading I've copied almost all of the code, but it isn't working. I would be so grateful for anyone who can help.
Here is the CSS code:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
and the HTML code:
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
EDIT:
Here's the rest of the CSS:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
#logo{width:810px}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-94px;
left:160px;
text-align:left;
}
Try to use URL without "http":
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
Few tips:
1. Use the HTML code in the beginning of your <head>, before anything else. Example:
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. If that doesn't work, put this in your CSS file instead:
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
Ask yourself this:
1. Are you developing online or offline (if online check number 2)
2. Make sure your browser does not have a shield icon because this
means the browser is blocking the font and you need to click
the allow button.
3. Check for spelling errors or anything suspicious.
4. Finally #import is the safest way I think.
I had the same problem and if using the CSS tag of:
"font: 3em bold;" ---this overrides the google api call and loads your next default font.
SOLUTION: Use font-style and font-size
Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.
I had this issue today. And the metter if you made your test in with a httpsurl you need to change the link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"
by href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet".
Otherwise, there is a conflict issue.
I hope that will hope someone.
Are there containers for CSS Selectors?
I'm simply curious if there's a more elegant way to do this without repeating the class:
#div1 .divClass, #div2 .divClass { color:cyan; }
This is what I had in mind, but I don't think there's a way to do it.
#div1,#div2 > .divClass { }
[#div1,#div2] .divClass { }
Short answer: No.
It seems a case where you can add a class for both divs.
<div id="div1" class="sharedClass"></div>
<div id="div2" class="sharedClass"></div>
.sharedClass > .divClass { color: cyan; }
Anyway, this question can have multiple answers. Consider looking at LESS, which extends CSS capabilities. Then you could do something awesome like this:
.divClass {
/* ... */
}
#div1 {
color: red;
border: 1px solid blue;
.divClass;
}
#div2 {
color: cyan;
border: 1px solid green;
.divClass;
}
Sounds like you're looking for a something like LESS, which is a stylesheet language which can be compiled into ordinary CSS. It might not do exactly what you're after in your specific case (but then again, it might, I haven't tried) but it sounds like it would be useful to you.
Is it possible to give a whole set of styles supreme importance?
Ie, early on you might have the following default css:
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
and inside it has
body {
background: #000;
}
h1 {
color: #fff;
}
But then(!) you decide to make things exciting and have some more css inside the tag that is the same but different:
<style type="text/css">
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
For whatever reason, the styles inside style.css that are linked in take importance over the ones I'm putting in statically.
What I'd like to know is, is there a way of umbrella'ing a whole bunch of styles so they take the highest importance? The best I know is
<style type="text/css">
body {
background: #fff !important;
}
h1 {
color: #000 !important;
}
</style>
Which starts to get a bit tedious if there are many styles.
add a single class to body, ie body class="stylecatcher" or whatever
then you can style (and override default styles) easily
<style type="text/css">
body.stylecatcher {
background: #fff;
}
.stylecatcher h1 {
color: #000;
}
</style>
I didn't find it to be a good practise to use the !important selector.
What you need is called specificity. From the w3 here and here and adobe link
Typically in CSS if you add a selector that is the same further down in the document, the one closest to the end (the highest line number) will be taken into effect.
<style type="text/css">
body {
background: #000;
}
h1 {
color: #fff;
}
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
The background would be white and the font color black.