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>
Related
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>
I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>
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.
I'm new in coding and I'm having some noob issues...
Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.
This is my HTML:
<div class="4u 12u(mobile)">
<section class="highlight">
<a href="football.html">
<span class="image fit"><img src="images/pic02.jpg" alt=""></span>
<header>
<h2>Football</h2>
<p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
</header>
</a>
</section>
</div>
And this is my CSS, where I try to give them a 6px margin all around:
.miniflag {
margin: 6px 6px 6px 6px;
}
Can you help me find the problem? Thank you very much!
Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...
As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.
Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:
.miniflag : generic class attribute, the lowest level
.highlight p .miniflag : a more specific class attribute, with 3 levels
The more specific one will be applied.
Furthermore, the position of your css rules matters as well:
.miniflag {
color: red;
}
.miniflag {
color: blue;
}
This will set the color to blue, since the last rule is applied and overwrites the previous rule.
Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Tip: make sure you specify the location of style.css properly as follows
href="location/style.css"
you can do this:
<head>
<link rel="stylesheet" type="text/css" href="foldername/style.css">
</head>
Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this
.highlight p .miniflag {
padding: 2px;
background-color: white;
width: 35px;
}
And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
I want to put a background in my web im just staring with a tutorial my code is like this
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<title>PARIS DROP OUT</title>
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header1">
<h1>THE DROP OUTS</h1>
</div>
<div id="#container_div">
<img id="drop" src="img/SHOCK.jpg" />
<background-image: src="img/background" />
<p class="red">ESTA PAGINA ES DE LOS LOCOS</p>
<p> Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own web site you're going to need to learn HTML and CSS. Fortunately, we can help. </p>
</div>
</body>
MY CSS LOOKS LIKE THIS:
<code> #container_div {
width:1800px;
height: :1800px;
background:red;
I try putting an image it doesn't work either
I have the exact same code that its on the tutorial and I don't see a background no matter what I change
Your div should be <div id="container_div"> (note: without the #)
The CSS selector #container_div means "any element with the id="container_div"
Enjoy!
css code to change background color
Background-color:red;
css code to change background image
Background-image:url();
your css class:
#container_div {
width:1800px;
height:1800px;
Background-color:red;
}