I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css
.myInvalid {
border: 5px solid red;
}
I have added that file to my index.html and the file gets loaded but when I write
<input type="text" class="myInvalid"/> there isn't any border around my input.
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ui-bootstrap-0.4.0.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
<link href="Content/css/my.css" type="text/css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div data-ng-view=""></div>
</div>
<input type="text" class="myInvalid"/>
</body>
</html>
If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?
You have to make sure that your selector is more specific than the bootstrap one,
Instead of .myInvalid use input[type='text'].myInvalid
Check out this answer for more about selector priority.
This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:
.myInvalid {
border: 5px solid red !important;
}
I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.
You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.
Related
In w3schools CSS framework there are some predefined buttons and predefined settings for this buttons. I've already changed the color of them by adding to my HTML file the .class(.w3-button) in the style element at the head section but I cannot do the same with hover settings.
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
background-color: #8B4513;
box-shadow: 2px 5px 5px black;
border-radius: 4px;
color:black;
}
.w3-hover-green { <!-- I've tried to that but it didnt work -->
background-color: #D2691E;
color: white;
}
</style>
<body>
<p><button class= "w3-button w3-hover-green"> button </button> </p>
Any idea?
The trick to override the w3-button hover style in W3.CSS is to use the CSS !important exception.
Although I believe !important should be avoided whenever possible, this is actually how the "official" W3.CSS custom themes work, as you can see on the W3.CSS Color Generator page.
A simplified example:
a.custom-hover-color:hover {
background-color: orange !important;
color: red !important;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<a class= "w3-button w3-green custom-hover-color"> click me </a>
Hey in the last section of code the <p><button class= "w3-button (ADD A DOT HERE)w3-hover-green"> button </button> </p> please add a dot before the "w3-hover-green"
Good luck!
Any help with this would be highly appreciated. How do I add a border around my entire site? I've just started learning HTML and CSS but I haven't discovered how to do it. The writing on my website is too wide and I'd like it to look neater and trim - like this one. http://www.millcreekconstruction.biz/.
I would just appreciate one code to copy and paste to see that it actually works, and then I can edit the style and colour. I just have no idea what and where exactly to put the HTML and CSS codes. i thought the HTML goes undeneath "title" and the CSS for a border inside body - but nothing I try ever works.
Here is the first part of the html for my site:
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script>(function(html){html.className = html.className.replace(/\bno-
js\b/,'js')})(document.documentElement);</script>
<title>It – Built with SitePad</title>
<link rel="alternate" type="application/rss+xml" title="It » Feed"
href="feed/" />
<link rel="alternate" type="application/rss+xml" title="It » Comments
Feed" href="comments/feed/" />
<link rel='stylesheet' id='this-style-css' href='css/style.css'
type='text/css' media='all' />
<link rel='stylesheet' id='sitemush-fonts-css'
href='https://fonts.googleapis.com/css?
<style type="text/css">.recentcomments a{display:inline
!important;padding:0 !important;margin:0 !important;}</style>
</head>
<body class="home page page-id-6 page-template-default">
<div id="page" class="site container-fluid">
<div class="site-inner">
The question is kind of ambiguous, but I guess you are either trying to put a border around the whole page or its content.
The first is really simple:
#overlay {
position: fixed;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
outline: 4px solid black;
}
<div id="overlay"></div>
You can edit the values that are now set to 4px, and you can also change the color and the line type (dashed, dotted, etc.)
The second alternative is even simpler:
#page {
/* IDK if you have already applied the styles to position it, but I assume you have */
outline: 2px solid black;
}
<div id="page">
<p>Your content, whatever it is</p>
</div>
Again, you can edit the line width, color and type.
Another idea, since I see that you are probably using Bootstrap (because I'm a wizard and totally not because I've noticed you used the container-fluid class), a better alternative could be to just use a card and put your website content in it
Practially, i have a css file with some classes ,id's and html selectors (index.css) and the kendo.mobile.all.min.css.
I've tried putting it before and after to no avail.
My classes won't work , for example:
<div data-role="view" data-title="main-menu" id="main-menu" data-persist="true" class="body" data-transition="overlay:up" >
<h1>Text text</h1>
<h2>Another</h2>
<div>
This code, when used only with my css and the kendo.common.min.css and kendo.default.min.css files, shows the proper styling with background, when used , in any combination with kendo.mobile.all.min.css all i see is the plain html.
I'm a begginer (still in university) , is there something implicit about this that escapes me? I also tried jquery mobile but quit that because it overrided all my css and got blank html.
Also anyone know how can i change the default android skin from android-dark to android-light without forcing the app to run on one platform? (as in still adapt to different platforms)?
My include order:
<script type="text/javascript" src="cordova.js"></script>
<script src="js/load.unload.js"></script>
<script src="js/hangman.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<!-- audio css-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.ui.core.min.js"></script>
<script src="js/kendo.mobile.listview.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- audio js sources-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
you can try adding the !important property to your css to see if that works.
like this:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
I don't know how to use CSS. So I am asking here.
I am creating a JSP page. I have added two tables in my JSP page using Twitter Bootstrap. I need to add different alignment for both tables. Since I am using bootsrap both tables having same alignment.
This is my code
<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>
<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>
I want to align the text to center for table 1 and left for table 2. Table 2 header should be alinged to center and table 2 boreder should be blue.
So I tried this CSS
.table.table-hover.target td {
text-align: left !important;
}
.table.table-hover.target th {
text-align: right !important;
}
.table.table-bordered.source td
{
text-align: center !important;
}
.table.target
{
border-color:blue;
}
It is not working.
When I give
.table td
{
text-align:left !important;
}
it aligns both table contents to left.
I dont now CSS. How can I write the CSS rule?
you probably have something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
right below the bootstrap-responsive.css (or if you are not using responsive layout, you will not even use this file, witch would then be below the bootstrap.css call).
add a new file like:
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
and add all your override rules to that file, the code above will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
the line "/assets/css/application.css" will say that your code will be in that specific path, change it for your needs
Comments:
Remember to comment your CSS rules so others (and even you in 6 month time for example) will understand why did you wrote that... in CSS you can add comments wrap it with /* ... */
for example:
/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
text-align:left !important;
}
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.