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;
}
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>
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.
I am trying to make it so that the features that are on every page of the site are in separated HTML files. I made a header.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/inc/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="identityAndLinksHeader">
<table>
<tr>
<td><a>Home</a></td>
<td><a>About</a></td>
<td><a>Privacy</a></td>
</tr>
</table>
</div>
</body>
</html>
And the following CSS:
#charset "utf-8";
/* CSS Document */
#identityAndLinksHeader
{
height: 50px;
width: 100%;
margin: 0, 0, 0, 0;
padding: 0, 0, 0, 0;
background-color: rgba(127, 140, 141,1.0);
}
The file works fine and looks like this:
http://puu.sh/68SbK.png
Then I have this index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object name="header" type="text/html" data="inc/header.html"></object>
</body>
</html>
However when I run this, the header looks like this:
http://puu.sh/68S9M.png
Does anyone know why this happens? Thank you!
The first thing is you don't need to define type = "text/css" in html5
and second the width of your #identityAndLinksHeader is 100% and perhaps in index.html, that small area is the 100%.
The object tag's size is only so large. Try setting its width to the width of the page.
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.