How to use the same name classes but in separate styles - html

see the example to understand:
<!--Standard Bootstrap -->
<link href="/build/css/site/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/build/css/site/mdb.min.css" rel="stylesheet">
so i want a thing like it:
<div class="btn btn-danger" >Standard Bootstrap Button</div>
<div class="btn btn-danger" >Material Design Bootstrap Button</div>
The name of the classes are the same. But they are in two separate styles.
How can I use the two styles as I said?
Forgive me for the bad English.

You can't, you will allways get the last definition of the class.
This is how style-sheets work, That's why they are called CASCADING Stylesheets. So basically what you define in mdb.min.css extends or overwrites what is definied in bootstrap.min.css And yo will get the combination of both
Let's say in bootstrap.min.css you have this :
btn-danger:{
color:#FF0000;
width:100px;
}
and in mdb.min.cs you have
btn-danger:{
background-color:#00FF00;
width:120px;
}
Your browser will interpret this:
btn-danger:{
color:#FF0000;
background-color:#00FF00;
width:120px;
}
The width will be overwritten by mdb.min.css because that one is added last, the later you add a stylesheet, the more precedence it has, so it will overwrite everything that was defined earlier, and extend everything that hasn't been defined earlier, and merge everything else

If using SCSS is an option, you could create a file that imports the two files but wraps each in its own namespace. Something like:
.bootstrap {
#import 'bootstrap.min.css';
}
.mdb {
#import 'mdb.min.css';
}
This file should go in the same directory as bootstrap.min.css and mdb.min.css and should have a .scss extension. After running the above through an SCSS compiler, you will have one CSS file that you can link to in your HTML file instead of bootstrap.min.css and mdb.min.css. For example, if your new compiled file is named combined.css, then you would replace the link tags in your question with this:
<link href="/build/css/site/combined.css" rel="stylesheet">
You could then use the styles in your HTML like so:
<div class="bootstrap">
<div class="btn btn-danger" >Standard Bootstrap Button</div>
</div>
<div class="mdb">
<div class="btn btn-danger" >Material Design Bootstrap Button</div>
</div>
Note that you must wrap your elements in a DIV (or other element) with a class of bootstrap or mdb to get the intended styling.

Browser's stylesheet
Included by <link> tag
Nested in <head><style> tag
Inline, e.g. <a style="display: none">
That's the order of loading cascading stylesheets in your document. You can extend style of any class in any further place, but cannot define two classes with same name with different styles. It will override in given order.

.btn-danger{
background-color:red;
width:90px;
height:90px;
}
.m1 .btn-danger{
background-color:green;
width:90px;
height:90px;
}
<div class="btn btn-danger" >Standard Bootstrap Button</div>
<div class="m1">
<div class="btn btn-danger" >Material Design Bootstrap Button</div></div>
i think one way is like this, hope this may solve your problem

Using the <style> scoped attribute this is possible, but comes with several caveats.
It currently works only in Firefox
Every other browser will require a polyfill to add support for the scoped attribute - here's one and there are several others available
And even with a polyfill it may not work - I did a few quick experiments with different polyfills and #import but had no luck
The scoped attribute allows CSS within a <style> tag to be scoped to the parent element where the <style> tag is contained. Here's a quick example:
<div>
<style scoped>
p {color: blue;}
</style>
<p>This paragraph is blue.</p>
</div>
<div>
<style scoped>
p {color: red;}
</style>
<p>This paragraph is red.</p>
</div>
Using this, we can replace the CSS selector with an #import to import the Bootstrap CSS in one section and the Material Design Bootstrap in another.
Note: the example below will ONLY work in Firefox as of 07/06/2017.
<div>
<style scoped>
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
</style>
<div class="btn btn-danger">Standard Bootstrap Button</div>
</div>
<div>
<style scoped>
#import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.min.css)
</style>
<div class="btn btn-danger">Material Design Bootstrap Button</div>
</div>
Here's the result in Firefox
Another downside to this is you'll need to re-#import each stylesheet for each section.
There are several polyfills available to add support for scoped to browsers which currently don't support it. There's also a jQuery script if you're already using jQuery.

Related

Moving inline styles to external css

I have a school project that requires me to not use inline style or embedded styles. I have finished the whole thing and figured that out so now I need to move stuff to my external css. I even uploaded it to my school cwp page and it isn't working as is.
There are a few parts to this:
Firstly, create an external style sheet ('style.css' - or whatever)
You must reference this .css file in the head of your HTML document
You must accurately reference / move all inline styles to the external .css file
Firstly, create an external style sheet ('style.css' - or whatever)
You can do this by creating a new Notepad solution & hit 'Save As'. Ensure you save it with the extension '.css'. If you're unsure how to do this, refer here: Save As Other File Type Notepad
You must reference this .css file in the head of your HTML document
This can be done like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Refer here for more information: Reference External Style Sheet.
Please note, if the 'style.css' file is not in the same folder as your .html file & is instead in a folder called 'Folder', you will need to reference it like this instead:
<link rel="stylesheet" href="/Folder/style.css">
You must accurately reference / move all inline styles to the external .css file
You can add identifiers to your tags, i.e. you can add an 'id' or a 'class' attribute to any tag, these will help reference your item in css.
You can add an id to a tag like so:
<label id="lblMyLabel">Example Text</label>
You can add a class to a tag like so:
<label class="lblMyLabel">Example Text</label>
You can reference an id in css like so: #lblMyLabel { font-weight:bold; }
You can reference a class in css like so: .lblMyLabel { font-weight:bold; }
For more examples how to reference an ID see here: CSS ID Selectors
For more examples how to reference a class see here: CSS Class Selectors
This article gives a good overview of the conversion as well: How To Add CSS
Here are examples of before & after the conversion for your reference:
BEFORE
<label style="color:green; font-weight:bold;">I am your heading</label>
AFTER
#lblHeading {
font-weight:bold;
color:green;
}
<label id="lblHeading">I am your heading</label>
BEFORE
<label style="color:green; font-weight:bold;">I am your heading</label>
AFTER
.lblHeading {
font-weight:bold;
color:green;
}
<label class="lblHeading">I am your heading</label>
BEFORE
<div style="padding-top:10px; background-color:green;">
<div style="padding-top:2px; background-color:red;">
<label style="font-weight:bold;">Example</label>
<img src="" style="height:10px;"/>
</div>
</div>
AFTER
.outerDiv {
padding-top:10px;
background-color:green;
}
.outerDiv .innerDiv {
padding-top:2px;
background-color:red;
}
.outerDiv .innerDiv #lblMyLabel {
font-weight:bold;
}
.outerDiv .innerDiv #imgMyImage {
height:10px;
}
<div class="outerDiv">
<div class="innerDiv">
<label id="lblMyLabel">Example</label>
<img id="imgMyImage" src=""/>
</div>
</div>
If you have any questions or want to supply some of your code, I'm happy to help show you a few conversions!
Use <link rel="stylesheet" href="styles.css"> in HTML file
I put a link for tutorial to learn how to use css, I hope it will help your study
https://www.w3schools.com/html/html_css.asp
<!DOCTYPE html>
<html>
<head>
// Link to your external css
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Add CSS directly into HTML on a template webpage

I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>

External CSS won't change element style

I'm trying to change an elements class, but it doesn't seem to affect it.
The CSS file is loaded in <head>, but the class doesn't seem to have any effect.
My HTML:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
and my CSS:
.col-sm-3 {
background-color:black;
height:500px;
}
this is because your bootstrap file is loading after the css file ,or try giving
.col-sm-3{
background-color:black !important ;
height:500px !important;
}
but giving !importantis a bad idea since it overrides the bootstrap class.Hence try swapping the files make sure you css loads after the bootstrap file.
Try to avoid !important.
Include your custom css after bootstrap.
Use custom class to overwrite bootstrap style
HTML
<div class="col-sm-3 black-bg">.col-sm-4</div>
<div class="col-sm-6 black-bg">.col-sm-4</div>
<div class="col-sm-3 black-bg">.col-sm-4</div>
CSS
.col-sm-3.black-bg{
background-color:black;
height:500px;
}
do one thing, nest you css, write rules like this
html body .col-sm-3{
background-color:black;
height:500px;
}
it is the right way to override css

Appropriate CSS syntax for an element with Multiple ID's or Classes

So I am relatively new to front-end development, and I am going back and cleaning up a bunch of my code which has a lot of in-line styling. What I am trying to figure out is the appropriate way to apply multiple CSS class selectors, or ID selector to a single HTML element. I attempted at creating a single class selector. What is the correct way of applying multiple classes or ID's to a single element... Please note that that they need to be separate in CSS as they have dofferent properties.
Custom Class Selector:
#customModal .modal-open .modal{
overflow: visible;
}
#customModalDialog .modal-dialog{
position: fixed;
left: 60%;
}
Example CSS:
<style>
.modal-open .modal {
overflow: visible
}
.modal-dialog {
position: fixed;
left: 60%;
}
</style>
HTML to be applied to:
<div class=" bg-white" modaldraggable>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<div class="modal-title">{{alert_data.title}}</div>
</div>
<div class="modal-body" style="height: 319px">
<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-info btn-xs" ng-click="cancel()">Ok</button>
</div>
</form>
</div>
********* Note**
I am trying to overwrite a bootstrap class selector for a very unique template... by doing .modal{} in main.css I would overwrite them all... thats why I need a custom selector to handle both.
Out of general good coding habits, it's always better to apply css on an element with classes like so:
.red{
background-color: red;
}
.outline{
border: 2px #000 solid;
}
<div class="red outline"></div>
The classes in the element are separated with spaces and the last one is the most important class (can override some css properties if needed)
The main goal of this is to make sure you code is sustainable, if you want to add a new element with the same properties to your page, you don't need to re-write some css.
About IDs:
Use only one ID on an element, it should only need one, and this id should be unique throughout the document, this will be more important than css properties given with class.
I also recommend this article to further your knowledge on the matter.
Enjoy front-end!
To apply multiple classes to an element just write it like this (i.e. without comma):
<div class="class1 class2 class3">...</div>
To mix classes with an ID, write
<div id="element1" class="class3 class4">...</div>

Multiple HTML links to CSS

I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>