I'm just new to CSS and I want to run this particular animation but not sure yet how to call it in my html file
http://www.impressivewebs.com/demo-files/css3-animated-scene/
Type in the CSS code in a file named `style.css
Then include it as shown:
<link rel="stylesheet" href="style.css">
Place style.css and a HTML page, for examplepage.html in the same folder and open `page.html. Should work :)
I have set up a JS fiddle for you:
http://jsfiddle.net/kr2XU/
You have to link your CSS in the HTML file like this:
<link rel="stylesheet" href="style.css">
For the future, you should know very easy and good way of animating content in your HTML files is using an Adobe product called Edge Animate. It is available with a free Creative Cloud membership.
You can learn more about it here.
About calling CSS selectors, let's have an example:
main.css
.class1
{
background-color: #fff;
border: 1px solid #000;
}
#another_selector
{
background-color: #eee;
border: 1px solid #666;
}
In your HTML file, you will have:
<div class="class1"> This div has the CSS class ".class1" </div>
<div id="another_selector"> This div has the "#another_selector" id </div>
See here a JSFiddle that will help you figure out what's going on with those classes and ids.
Related
I'm trying to edit a template I've downloaded on the internet, by changing some colors.
However, when I change the color in the css file, it doesn't change it on the website:
HTML:
.user-panel {
float: right;
font-weight: 500;
background: #ffb320;
padding: 8px 28px;
border-radius: 30px;
}
<div class="user-panel">
Link
</div>
This is how I import the .css file:
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
So what I did was changing #ffb320 to #cc0000 to have red instead of yellow, saved the file, and reloaded the page, but the color didn't change. Same goes for font size, etc...
The only thing that did work was using style='font-size:20px' for the font size.
What am I doing wrong here?
This happens because of the cache so, you can do like:
<link rel="stylesheet" href="{% static 'css/style.css' %}?version=55"/>
Also, do run the command:
python manage.py collectstatic
You should check out the original CSS from the template. Maybe there is a selector with more strength that just .class, I don't know the strength scale from memory, but I believe that doing something like div.class has more priority than .class.
You can always try adding !important. For instance:
.user-panel {
background: #ffb320!important;
}
It's a button with a link, so you need to target the 'a'. Because there's a child inside the parent, when you target the parent it won't automatically target the child. I've learned this through trial and error.
Try it like this:
.user-panel a {
background-color: #cc0000;
}
That will work.
Try to use property
background-color
Hope It will help
I have created a newsletter template with 1 HTML file and 4 CSS file. But the CSS is not linked when I send the newsletter. So I want to create a single HTML file with the CSS included directly in each tag. For each CSS tag I ha use in the HTML, I want that all the real value of this tag in the CSS file, to directly in the HTML tag. How can I do that?
Old code
CSS code
<style>
.mycss{
width:100px;
color: red;
}
</style>
html code
<html>
<div class="mycss">
//some code
</div>
</html>
I want that to become
CSS code
html code
<html>
<div style="width:100px; color: red;">
//some code
</div>
</html>
Use a CSS Inliner such as Mailchimp's CSS Inliner Tool to accomplish this.
This is the process I use for newsletters that I write:
Copy and then paste the CSS from your various CSS files between the <style></style> tags in your html file
Copy and then paste all the code from that file into Mailchimp's CSS Inliner Tool
Click Convert
Copy and use the resulting code which now has with your CSS inlined.
Would not you be looking for something from that?
console.log(document.styleSheets[0].cssRules[0].cssText )
console.log(document.styleSheets[0].cssRules[1].cssText )
/*
for (let styl of document.styleSheets ) {
for (let rules of styl.cssRules){
console.log( rules.cssText )
}
}
*/
.class01 {
border: 1px solid blue;
width:200px;
height: 50px;
}
.class02 {
border: 1px solid red;
width:300px;
height: 30px;
}
<div class="class01">MyDiv 01</div>
<div class="class02">MyDiv 02</div>
I want to use Angular Material's md-autocomplete in my angular application. I already have a modified css which my application is using. But adding the angular material css screws up my entire page.
I tried scoping the css to only that div. But still it somehow overrides the parent css also.
This is how I used the css in my page :
<div>
<style>
The whole Angular material css goes here.
(https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css)
</style
</div>
I thought the above would scope the css only to that div. But it somehow leaks to the other divs as well.
Also I tried to remove parts of the original css so that I leave only the styles that the md-autocomplete uses. But this is really tiring and also the results are not great as well.
Please help me how to use the md-autocomplete in my original html file.
what you are trying to do is not possible in css see below code
<div>
<style>
div{
color: red;
}
</style>
some text
</div>
<div>
<style>
div{
border: 1px solid brown;
}
</style>
another text
</div>
earlier it was possible in css with <style scoped> but support for this feature has been dropped.
<div>
<style scoped>
#import "style.css";
</style>
</div>
however you could use CSS preprocessor like less or sass
.your-class {
#include 'style.css';
}
for more details you can refer Link external CSS file only for specific Div
hope i answered your question
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
If I use css code directly inside of the html code it works.If I use by linking css file inside of the html by tag it is not working.But I tried with ffox viewsource and link for css redirects to the perfect CSS.Please enlight me in this Case.Thanks in Advance.
CSS(POStyle.css) File included like this in HTML :
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
POStyle.css has
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
CSS inside the html directly :
<style type="text/css">
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
</style>
When using:
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
The browser uses the string literal $contextpath/css/yes/POStyle.css to request the CSS file. There is no replacement that occurs as you would expect in JSP files or some other view technology.
You must use either an absolute or relative url to the file:
Relative
<link href="../css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Absolute
<link href="http:/www.mydomain.com/context/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Use {$contextpath} instead of $contextpath. It is a smarty variable.