I am new CSS styles and HTML.I have css file called layout.css in which we have a class called
.Grid {
width:100%;
direction:rtl
}
.tblsMonth {
direction :rtl
}
I have created another css file with class as below:
.textdirection {direction:ltr}
Can i make for .Grid and .tblsMonth direction property to read from my css file .textdirection
As far as I know, you can't combine them in the CSS, but you can in HTML:
direction.css
.textdirection {direction:ltr}
layout.css
.Grid {
width:100%;
}
.tblsMonth {
}
HTML
<div class"Grid textdirection"></div>
Related
We have a large CSS file with many styles that contains overriden styles like this:
.block {
width: 100px;
}
...
.block {
width: 200px;
}
We want to automatically remove unused styles and get as result only 1 style property value for the class like this:
.block {
width: 200px;
}
https://purifycss.online/ - This does not solve our problem.
purifycss
How can I do it having only html and CSS files?
What's the best and correct way to identify specific sections or contents inside a CSS3 stylesheet.
For example, if I have an image syntax defined like this for all images:
/* Image */
.image {
border: 0;
display: inline-block;
position: relative;
}
And now I want to define different settings for the images inside a specific section, for example here:
<!-- One -->
<section id="one" class="wrapper major-pad">
What's the correct way to do it? Using the Section ID or the Class in the CSS syntax? (please inform the correct syntax I should use).
If you have many sections with same class but want to target an image in a specific one, use id
#one .image { ... }
If you want to target an image within a section with a given class, use class
.wrapper.major-pad .image { ... }
or
.wrapper .image { ... }
or
.major-pad .image { ... }
Updated based on a comment, showing a simple sample
.wrapper .image {
border: 5px dotted red;
}
<section id="one" class="wrapper major-pad">
<img class="image" src="http://placehold.it/300x100/">
</section>
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.
I just had the idea of organizing my work as follows:
Create very basic CSS classes, for example this :
.backgroundRed {
background-color:red;
}
.backgroundGreen {
background-color:green;
}
.fixed300 {
width:300px;
}
.percent100 {
width: 100%;
}
.centered {
margin: auto;
}
.centeredTextHorizontally {
text-align:center;
}
.colorWhite {
color:white;
}
and then use 2-3-4 of them simultaneously, to create what I want, for example:
<div class = "backgroundGreen fixed300 centered">
<div class="centeredTextHorizontally">300px wide green stripe with centered text</div>
<div class="centeredTextHorizontally colorWhite">Centered white text</div>
</div>
</div>
Im sure you get the idea.
Now this has the problem that if in the future we want to change the web site, we need to edit the HTML of all those DIVs, which breaks the very pupropse of using CSS in the first place.
So I would like to be able to define CSS classes as follows
.navbar {
.colorRed;
.backgroundColorGreen;
}
etc etc. So that if the website colors need to be changed, for example, I only change the .navbar and not the DIVs in the HTML.
Is it possible to perform something like the above and how ?
Its not possible with pure css. you will need to look into a CSS pre-processor. Two popular ones are called Sass and Less. These links should give you more information on them:
Sass
Less
This will help you get started with your specific problem:
including another class in Sass
.navbar {
.colorRed;
.backgroundColorGreen;
}
This is not css rule. You have to use class like below -
.navbar.colorRed.backgroundColorGreen {
/* Your css styles */
}
Notice, there is no space between class name and dot . next to it.