I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.
Related
I've just started learning CSS and am following a YouTube tutorial Learn CSS in 12 Minutes, however I am stuck at minute 4:49 - the title should show a blue background but mine doesn't?
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.cs
</head>
and on my stle.css sheet I have:
#header {
background-color: #66CCFF;
}
I expected the area behind 'title' to be blue when I view in browser.
you need to create a header tag to make it turn blue using css.
In css, you can apply style to a tag by simply copying its name (here header, not #header), and apply style to id or class by indicating their #name (for id) or their .name (for classes).
The title tag display a text in tab and program title (like here).
Your html code should look like this (I closed the link element):
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>My blue text</header>
And your css:
header{
background-color: #66CCFF;
}
If you want to learn css, you can find some fantastic tutorials :)
Try by closing the link rel=stylesheet tag completely, and actually calling div id header in body, and defining height of that header if you don't have any content in it or you won't be able to see it.
As #metaDesign mentioned, you should consider taking a lot longer than 12 minutes to learn CSS...
#header {
background-color: #66CCFF;
height: 100px;
}
<head>
<title>My website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
</div>
</body>
I just started learning php and I dont know how to change the color of well.
Doing research I found this
.well.homefull{
background: rgba(0, 0, 0, 0.4);
}
But I dont know where to put it and how to use it with
<div class="well">
if I simply put it before div class=well it doesnt work
You'll need to override the css rules of the boostrap well class.
To do this, you'll need to create a custom css file and call this external style sheet from the html page.
For example :
.well {
background-color: rgba(0,0,0,0.4) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
Some content
</div>
Hope it helps.
EDIT :
Or in one page, you could put the style rules between <style></style> tag (take care to put the overriding style rules after the call of bootstrap sources) :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Developping JazZ Sheet</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.well {
background-color: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="well">
some content
</div>
</body>
</html>
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
Flowplayer has an icon on the top left of the video which is "<>". When you click on it comes up with message "Paste this HTML code on your site to embed."
I want to remove that icon from my videos.
So I changed the fp-embed to display:none as per below.
However its still not working.
Any help would be appreciated.
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flowplayer ยท iframe src</title>
<!-- optimize mobile versions -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The "minimalist" skin - choose from: "minimalist.css", "functional.css", "playful.css" -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/playful.css">
<style type="text/css">
.fp-embed {
display: none;
}
</style>
<!-- Flowplayer depends on jquery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
</head>
<body>
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
<video>
<source type="video/mp4" src="http://example.com/example.mp4">
</video>
</div>
</body>
</html>
the above mentioned method will Never work. I wasted a lot of time in doing it just by css.
instead of this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
use this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true" data-embed="false">
Your style gets overwritten by that of flowplayer itself.
If you be more specific with your CSS style selector you will be able to hide it:
.flowplayer .fp-embed {
display: none;
}
Use this:
flowplayer.conf = {
embed : false
};
Rer.: https://flowplayer.org/docs/embedding.html#disabling-embedding