Please refer below css code
#AdminUser .admin-label-margin {
margin-left: 160px;
margin-top: -25px;
padding-bottom: 10px;
}
#AdminUser #entitytitle h4 {
margin-left: 175px;
padding-bottom: 13px;
}
#AdminUser input[type='text'] {
width: 180px;
}
#AdminUser .admin-label-span {
margin-left: -15px !important;
margin-right:12px;
}
Each and every time I am specifying the root element and applies the css to specific control. I don't want to this kind of scenario. How can i simplify the above css and specify root selector in one time ?
CSS does not support this. You can however use a preprocessor like Sass/SCSS.
With SCSS:
#AdminUser {
.admin-label-margin {
/* snip */
}
/* snip */
}
Note that the final code will look similar to the original one, SCSS translates the above code to the one you currently have, so that you can develop more easily.
You could use a CSS pre-processing library like LESS which allows you to express your css using nested statements.
So it will allow you to write
#AdminUser {
.admin-label-margin {
margin-left: 160px;
margin-top: -25px;
padding-bottom: 10px;
}
#entitytitle h4 {
margin-left: 175px;
padding-bottom: 13px;
}
input[type='text'] {
...
}
.admin-label-span {
...
}
}
but once processed it would output the CSS to the browser in the standard non-nested format. ie. it would generate your original CSS :
#AdminUser .admin-label-margin {
margin-left: 160px;
margin-top: -25px;
padding-bottom: 10px;
}
#AdminUser #entitytitle h4 {
margin-left: 175px;
padding-bottom: 13px;
}
#AdminUser input[type='text'] {
width: 180px;
}
#AdminUser .admin-label-span {
margin-left: -15px !important;
margin-right:12px;
}
Bear in mind that if you use LESS you have a few considerations :
running compilation of .less to .css files as part of your build process
or using on the fly conversion with the less javascript
you might get FOUC's
you'll need to check that your webserver is happy serving the less mime type
On the plus side you'll get mixins, variables and all the goodness that LESS brings you alongside the coding syntax convenience you're looking for.
LESS might be useful:
#AdminUser {
& .admin-label-margin {
margin-left: 160px;
/* ... */
}
/* ... */
}
There is no way to simplify it in CSS.
You could use a CSS preprocessor language, such as SASS, which would allow you to:
#AdminUser {
.admin-label-margin {
margin-left:160px;
margin-top:-25px;
padding-bottom:10px
}
#entitytitle h4 {
margin-left:175px;
padding-bottom:13px
}
input[type='text'] {
width:180px
}
.admin-label-span {
margin-left:-15px!important;
margin-right:12px
}
}
Related
When changing the html dir attribute from ltr to rtl, all directed margins and paddings need to be reversed :
[dir='ltr'] {
margin-left: 80px;
}
[dir='rtl'] {
margin-right: 80px;
}
Is there another better approach?
If you are sure that you need to reverse every instance of e.g. margin and you are using some css preprocessor such as sass. You could create the following mixin:
#mixin horizontal-margin($left: initial, $right: initial) {
&[dir="ltr"] {
margin-left: $left;
margin-right: $right
}
&[dir="rtl"] {
margin-right: $right;
margin-right: $left;
}
}
And then use it like this:
p {
background: blue;
#include horizontal-margin(16px, 48px);
}
and in your html
<p dir="ltr"> some text</p>
Hope this helps.
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
I am currently working on the CSS-styling of a Warning statement.
This is a icon + a statement in this specific case. The code is as follow:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
It works all fine, but now my question!
Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.
Now it would be great if I can manage a import at var-ID level.
I was actually wondering if css can do this.
cheers,
Frank
Are you using a CSS preprocessor like SASS or LESS?
Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.
Another suggestion is that you can maybe add a class for each language and then change the content based on the class.
eg:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
$sSCP .warning.french:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ATTENTION"; /* <-- Font icon + statement*/
}
$sSCP .warning.spanish {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ADVERTENCIA"; /* <-- Font icon + statement*/
}
I'm using Less to write CSS, it totally saved much time for me. Now I have small issue, here is my code:
largest fight gym in Australia
Less
.btn{
position: relative;
padding: 15px 22px;
color: #color-black;
&-black-bg{
background: #color-black;
color: #color-white;
}
&-right-skew{
position: relative;
&:after{
content: '';
position: absolute;
right: -10px;
top: 0px;
width: 20px;
height: 100%;
.skewX(-15deg);
}
}
}
Now I my goal is if btn-black-bg so btn-right-skew has black background too. In CSS, I can handle with this code:
.btn-black-bg.btn-right-skew:after{
background: #000;
}
But I don't know how to do this in LESS. Hope everyone can help me out.
Based on your HTML, adding the background: #000 to .btn-black-bg:after (one of the 2 classes) alone is enough but I assume you want to apply some properties only when both classes are present on the same element. For that, you can use the parent selector like below:
.btn {
&-black-bg&-right-skew:after {
background: #000;
color: #fff;
}
}
You cannot nest this into the &-black-bg or &-right-skew (as the order of classes doesn't matter in CSS) and make use of the parent selector because the parent selector would always refer to the full parent and not just the immediate parent. The best that can be done with nesting would be the below but the would need the .btn to be statically added to the innermost selector instead of using &.
.btn {
&-black-bg {
&.btn-right-skew:after {
background: #000;
color: #fff;
}
}
}
You can make use of variables to achieve nesting like mentioned here but I wouldn't recommend it for your scenario because the selector given above is more simple and readable.
I would recomend to separate the clases into a base class "btn" and modifier classes "black-bg" and "right-skew". (In my opinion this makes it easier to understand what is applied and how it can be combined.)
see my axample on codepen: http://codepen.io/fabiandarga/pen/bVNpLE
largest fight gym in Australia<br />largest fight gym in Australia
css:
.btn {
display: inline-block; // added to let the padding affect the height
position: relative;
padding: 15px 22px;
color: #color-black;
&.black-bg{
background: #color-black;
color: #color-white;
}
&.green-bg{
background: #color-green;
color: #color-white;
}
&.right-skew{
position: relative;
&.black-bg { // combine both classes = .right-skew.black-bg
&:after {
background: #color-black;
}
}
&.green-bg:after { // or short form
background: #color-green;
}
&:after {
content: '';
display: block; // was missing;
position: absolute;
right: -10px;
top: 0px;
width: 20px;
height: 100%;
transform: skewX(-15deg); // changed to make it work in the example on codepen
}
}
}
Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;
1. Single CSS file - Overriding LTR default codes.
.content {
position: relative;
padding: 5px 10px 5px 240px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
2. Single CSS file - Without overiding
.content {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.ltr .content {
padding-left: 240px;
padding-right: 10px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.
If you are looking for a more robust solution, I would suggest you these approaches:
CSS Preprocessor
Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.
Back-end controlled variable
Use CSS mixed with some back-end variable like:
direction: <%=rtl%>;
padding-<%=right%>: 10px;
padding-<%=left%>: 240px;.
RTL Tool
Use a RTLer tool.
CSS can display your text right to left with this:
.rtl
{
direction:rtl;
}
I prefer to handle padding and margins on a single line:
.content {
position: relative;
padding:5px 10px 5px 240px;
}
.rtl .content {
padding:0 240px 0 10px;
}
You could try doing something like this
.content {
width: 500px;
padding: 5px 10px;
border: 1px solid #ddd;
}
.content.rtl {
float: right;
direction: rtl;
}
try to hardcode the minimum amount of paddings/margins specific to a direction, heres an example http://jsfiddle.net/icodeforlove/UNS5L/