When I change the index.php file to index.html, it runs main.css file on local. But when I run it with php, it does not see main.css. Bootstrap sees the css files.
Note:The index.html code works when I run on local. There is no problem with the code.
Edit:The problem is not in PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
</body>
</html>
main.css:
.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
This is not really a PHP problem. This is happening because Bootstrap is overwriting your main CSS. In fact, using the main CSS, give your button an ID name and change it to the main cass. I think this will work
bootstrap default css btn-primary
<a href="" class="btn-primary class_name" ></a>
use css
.class_name.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
Please do not overwrite the bootstrap classes,instead use custom class say .btnDelete.
.btnDelete{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
And also remove asterisk btn-primary.Bootstrap uses snake case notation for naming classes.why don't you use camelCase notation in order to distinguish between user-defined classes and bootstrap classes.
It is actually not a PHP problem. It is happening because Bootstrap is overwriting your main CSS. To actually use main CSS give your button a id name then change it in main.css. I think that will work. ;-)
Related
I have included a CSS file in my project for my own CSS use, but it is not working or having any effect on my page
the file default.css
.feedbackText{
display: none;
text-align: center;
margin-left: 50px;
color: blue;
}
in the HTML file:
<!-- Bootstrap core CSS -->
<link href="<?=THEME_CSS?>bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?=THEME_CSS?>default.css" rel="stylesheet">
Later in the HTML file
<span id="invalidPasswordFeedback" class="feedbackText"></span>
The path is right, i checked it from the source in the browser, the PHP code is just a path to CSS files.
Thank you
As some commenters allready said, your rule is probably overridden by another, more specific rule.
You can fix that by making your CSS-Selector more specific, e.g.:
span#invalidPasswordFeedback.feedBackText{
/*Your rules*/
}
I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
Using a google webfont, I can't get the font-weight to yield results. The three weights do have names but aren't specified in the href link so I'm not sure if the name needs to be added.
Here's that portion of the code:
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'><style type="text/css">
body{
background-color: white;
margin-left: 20%;
margin-right: 20%;
border: none;
padding: 10px 10px 10px 10px;
font-family: Quicksand, sans-serif;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500&display=swap" rel="stylesheet">
:- Use preconnect in relation before link any type of extronal font now it is work if any problem then told me
I was able to get this working in a fiddle which leads me to believe you have another font-weight overriding the font-weight you are trying to set. Use either chrome or Firefox's developer tools and you can easily locate the style that is overriding the one you are trying to set.
Keep in mind:
More specific styles win (ID vs class for example)
Styles found later in the style sheet will override identical styles earlier in the sheet.
When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive css?
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
or
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
and what are the pros and cons of each?
If I edit the body padding after the bootstrap-responsive.css like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
/* Add padding for navbar-top-fixed */
body {
padding-top: 60px;
padding-bottom: 40px;
}
Then I must also fix the responsive layout using a media query as I have overwritten the global body style.
/* Fix to remove top padding for narrow viewports */
#media (max-width: 979px) {
body {
padding-top: 0;
}
}
It's usually better to place your custom CSS after the Bootstrap CSS. I'd imagine that you're wanting the custom CSS to override the Bootstrap CSS.
The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.
I can't really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn't really make much sense to write your own styles and then override them with Bootstrap's...
For example, this isn't bootstrap CSS, but it would work the same way, if you had the following in your head section:
<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />
Then in framework.css you had the following:
div.row {
border: 1px solid #eee;
border-radius: 3px;
margin-bottom: 50px;
padding: 15px;
}
But then you realised you wanted to add a red background (why oh why...) and change the border radius, you could have the following in custom-styles.css:
div.row {
background-color: red;
border-radius: 10px;
}
The resulting CSS applied to the element would be this:
div.row {
background-color: red;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 50px;
padding: 15px;
}
Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! :)
I think if you put style.css on top then bootstarp styles will override it.If you put style.css at bottom then bootstrap styles will be overriden with your custom styles
I am using bootstrap for my site, I think the black header is not good and the font is too small. How to customize the header of bootstrap ? Is there any example ?
It's better to just override the class/id.
Declare the bootstrap first then your own css
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/mystyle.css" rel="stylesheet">
in your mystyle.css you can:
header,.header,#header{
background: red;
color: white;
font-size: 15px;
}