I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
Related
I have imported my custom CSS file below the bootstrap CDN but still it is not getting overridden.
[here is the screenshot of inspecting element.][1]
Importing bootstrap and css
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="{% static '/css/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static '/css/cart.css' %}" />
My custom style (to override bootstrap)
* {
font-family: 'Poppins';
box-sizing: border-box;
margin: 0;
padding: 0;
}
Your code is working as expected:
* is of lower priority than p (or any selector), so the boostrap code will be more important.
The order of the files only matters when two selectors with the same priority exist. In that case the file loaded latest will win.
To fix this, do:
p {
margin: 0;
padding: 0;
}
And you'll see your code applying.
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!
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
I am currently learning polymer and I am struggling with one of the example on the Polymer website. The example is this one : https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header.
My index.html is the same as the one in the Sample toolbars section, I have just replaced the body with the one in the Condensing Header.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- import latest release version of all components from polygit -->
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-header id="header" effects="waterfall" fixed condenses>
<app-toolbar>
<div title>Left</div>
<div title>Title</div>
<div title>Right</div>
</app-toolbar>
<paper-tabs selected="0" primary>
<paper-tab>Food</paper-tab>
<paper-tab>Drink</paper-tab>
<paper-tab>Life</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
To make things easier: Plunker
In the Polymer tutorial, Left / Title / Right are resp. on the left, center and right of the header but in my version, they are all on the left. Any idea why ?
Thanks
Below i mentioned the html and css. but when i open it in browser,css property of background color and other properties not showing anything expect image.
HTML code
<html>
<head>
<title>Home Page One </title>
<meta http-equiv="Content-Type" content="type/html" charset="utf-8" />
<link href="home1.css" type="text/css" />
</head>
<body>
<header class="headerpart">
<img src="images.jpg"/>
</header>
</body>
</html>
CSS Property
body
{
background:#CCCCCC;
color:#000000;
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-style:normal;
margin:0px auto;
}
.headerPart
{
background:#00CCFF;
margin:0px auto;
width:1120px;
height:30px;
}
when i run this html in browser, it shows only the image expect the css propety of background and everthing. when i inspect the html, browser showing the css property not found..
am looking solution for this problem..
CSS Classes are case sensitive. You have class="headerpart" in your html but your CSS says .headerPart with a capitol P. Change one or the other, and you should see the behaviour you want.
Add rel="stylesheet" to your link tag, like following:
<link rel="stylesheet" href="home1.css" type="text/css" />