I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
Related
Is there a way of writing CSS to reduce the file size of a style sheet containing lots of adjoining classes. Example...
body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}
hey Use :is selector to reduce the code please check. to learn more about it here
body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37 ) .elementor-widget-spacer {
margin-bottom: 10px;
background: red
}
<div class="elementor-2">
<div class="elementor-element elementor-element-949d9dd ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-427933f">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-cb8ce37 ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
If you use the widget spacer in a different position every single widget makes those classes with the different ids. So you can't reduce the classes.
So if you need not write all the classes on the CSS file.
Use this CSS.
body .elementor-widget-spacer {
margin: 0 !important;
}
or
body .elementor-widget-spacer {
margin: 0;
}
It works with all of the spacer widgets on the webpage.
if you are using elementor.you don't need to do it with custom CSS. Elementor has a dedicated control for this. edit the column, select the layout tab to find widget space, and make it 0. Inside the column, your widget gap will be 0.
Before Doing 0
After Doing 0
Or
you are not using Elementor you can go with :is().To learn more about it follow the article Here
I am trying to override the right property for a h1 element that it is inheriting from the carousel-caption bootstrap class. It inherits right:15% and I am trying to set it to 0%. I found another post that led me to add id="bootstrap-overrides"to the tag and then use the selector: #bootstrap-overrides h1.second but this still doesn't remove the property. I check also in the inspect element and this property is not crossed out. When I uncheck this property in the inspect element I am left with the behaviour I desire.
code from React component:
<div id="initialImage">
<img src={logo} alt="Failed to load Image" class="img-fluid" />
<div class="carousel-caption greeting">
<h1 class="first">First.</h1>
<h1 class="second">Second.</h1>
</div>
</div>
CSS:
#bootstrap-overrides h1.second {
right: 0%;
float: right;
font-family: "Rock Salt", cursive;
color: #fff2f4;
}
and as mentioned I have an id #bootstrap-overrides in the body tag of my index.html. Could it have something to do with the location of the import for boostrap?
Just to confirm, are you adding id="bootstrap-overrides" directly to the h1?
If so, your css should look like this: h1#bootstrap-overrides otherwise, if you are applying it to the parent of h1, then try adding important to your css like so: #bootstrap-overrides h1 { right: 0!important; }
I am using quill editor. and storing the data inside MySQL DB along with the HTML tag.
Example:
<p>heading<p><p><img src=""></p>
Now as I am using angular I have used below code reproduce the same HTML structure which I have saved earlier in DB.
<div class="container-fluid">
<h3 class="fancyFont">Hot Posts</h3>
<div class="row justify-content-md-center">
<div class="col-md" style="width: 100%">
<div style="background:lightgray;">
<div *ngFor="let post of allPosts">
<p [innerHTML]=post.postContent></p>
</div>
</div>
</div>
</div>
</div>
and to give it a proper style I have used the CSS below
p img{
max-width: 100% !important;
}
p {
margin: auto;
padding: 16px;
max-width:100%;
display: inline block;
word-break: break-all
}
But despite doing this I cannot resize or fit my image inside the p tag. To describe innerHtml I can say it will look like this in plain HTML
if you have 2 posts in allposts
[![<div>
<p><p><h1>first post</h1></p></p>
<p><p><h1>Second post</h1><p><p>image</p><p>
<div>][1]][1]
Maybe p inside p tag invalid for HTML 5 and I agree with that. As few members already gave me proof and I also checked it by myself. But in the case of Angular when you use innerHTML like
<p [innerHTML]=post.postContent></p>
It doesn't even matter (Yes I checked my web dev tools and it is working perfectly fine). So the question arises why I was not able to add style to my image tag by using
p img{
max-width:100% !important;
}
p {
max-width:100%;
word-break: break-all
}
because for innerHTML content angular doesn't support that until and unless you add below code in your component.ts file
encapsulation: ViewEncapsulation.None,
I want to override the style padding-top:100px to padding-top:0px. How can i override the inline style inside wordpress template?
<!-- Sidebar With Content Section-->
<div class="with-sidebar-wrapper">
<section id="content-section-1" >
<div class="gdlr-full-size-wrapper gdlr-show-all" style="padding-top: 100px; padding-bottom: 0px; background-color: #ffffff; " ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item" style="margin-bottom: 0px;" >
<!-- MasterSlider -->
I already tried the below code in style.css but its not working!
.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}
To select this perticular <div> you to write your CSS like:
.gdlr-full-size-wrapper.gdlr-show-all {
} /*without space between*/
you're using
.gdlr-full-size-wrapper .gdlr-show-all {
}
viz selecting
<div class="gdlr-full-size-wrapper">
<div class="gdlr-show-all"></div>
</div>
Also if you're willing to override inline CSS only then you can use [style] selector also.
As:
<div class="someClass" style="font-size:10px; "></div>
So we can write CSS like:
.someClass[style] { font-size:14px !important}
what's trick here is this CSS only works when someClass has inline CSS for font.
Use following code it will work for both cases if you have one or both classes on div tag.
.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
padding-top:0px !important;
}
Justinas explains it well and that should work perfectly, I have applied the same to custom CSS of a WordPress theme and has worked for me. The CSS I had trouble changing were inline a div.
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
Can this be done using some kind of if statement condition in CSS?
For example, in 1.html:
<div class="classname"> Some code </div>
In 2.html:
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
Once again, I would not like to remove the class name at all, if possible.
Thanks!
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>
.ancestor1 .classname {}
.ancestor2 .classname {}
Obviously this depends on where in the html they might be.
You can add another class name to each element.
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
Updated Demo link: http://jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp
Just give each one a different id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
.classname.secondclassname{
}
You can also do something like this:
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classname would be something like that:
.classname:not(.second) {}
For the second element it goes easily:
.classname.second {}
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
First menu:
<div class="classname"> Some code </div>
Second menu:
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>