I'm currently trying to make and ecommerce site by using html, and css, got a navigation bar template from bootstrap. My problem goes when i want to style the .navbar-light .navbar-nav .nav-link classes, and I can't figure out what I'm doing wrong, I'm currently learning so I'm not so experimented, also is my first time using bootstrap
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:'Poppins', sans-serif;
}
h1{
font-size: 2.5rem;
font-weight: 700;
}
h2{
font-size:1.8rem;
font-weight:600;
}
h3{
font-size: 1.4rem;
font-weight:800;
}
h4{
font-size:1.1rem;
font-weight:600;
}
h5{
font-size:1rem;
font-weight:400;
color:#1d1d1d;
}
h6{
color:#d8d8d8;
}
.cash{
color:rgb(231, 215, 66);
font-family: 'Amita';
font-size:50px;
font-weight: 900;
}
.aside{
color:rgb(255, 179, 0);
font-family: 'Playfair Display';
font-size:50px;
font-weight: 900;
font-style:italic;
}
.logo{
width:3.5%;
display:flex;
}
.navbar{
font-size: 16 px;
}
.navbar-light .navbar-nav .nav-link{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.active{
color:coral;
}
.navbar i{
font-size:1.2rem;
padding:0 7px;
cursor:pointer;
font-weight:500;
transition:0.3s ease;
}
</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Amita:wght#700&display=swap" rel="stylesheet">
<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=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>CashCavaleria</title>
</head>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<img class="logo" src="img/logo.png" alt="">
<a class="navbar-brand" href="#"><span class="cash">Cash</span><span class="aside">Cavaleria.</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Acasă</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Magazin</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Despre Cashcavaleria</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<i class="fal fa-search"></i>
<i class="fal fa-shopping-bag"></i>
</li>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap is a CSS framework that has awesome styling right out-of-the-box. It's a versatile tool during wireframing because you can just add a class here and there and you'll be all set. The downside, however, is that most of the styling that is attached to those classes have been written in such a specific way, that browsers naturally will favor Bootstrap styling over custom styling.
You see, browsers will favor more specific 'element-targeting' over more general targetting. e.g.:
html body #wrapper ul li is more specific than ul li and thus browsers will overwrite the latter with the former.
In case of Bootstrap, this leaves you with a few options:
Option 1
Be more specific, i.e. make use of the html body prefix for your styling, and make sure your elements are more specifically targeted.
Option 2
Use !important as a suffix for your CSS properties. This will communicate to the browser that your styling has to have top-priority over anything else that is applied to that element. However, if two CSS target statements receive the !important tag, browsers will still favor the more specific:
html body ul li{ display: none !important; }
body ul li{ display: block !important; }
<!-- result: <li> will be hidden. -->
Furthermore, it is usually considered bad practise to use !important so always try this as a last resort.
Option 3
Think of new classes which you can apply to your elements. If you target a specific 'unique' class that has not styling declared anywhere else, browsers will be more likely to favor that styling - i.e. a class named .flaviusPopaStyling will surely not be used by Bootstrap and thus can be considered unique enough.
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling.active{
color:coral;
}
Make sure to add the class to your HTML as well, for instance:
<a class="nav-link active flaviusPopaStyling" aria-current="page" href="#">Acasă</a>
Bonus option
Instead of using Classes, I personally prefer using a non-reserved attribute name called contains.
<nav contains='customNavBar' class="navbar navbar-light . . .">
Because, by doing so, I both add more semantic meaning to my HTML as well as use obviously unique identifiers for CSS targetting, as well as prepare my HTML to be handled by JavaScript in such a way that will never influence its styling, for instance by toggleClass etc. You've written that you're quite new to styling so I'll take the liberty to assume you're kind of fresh to the front-end game so it might be a bit unclear as to why exactly you'd want to do this. But that's a topic for a later time.
Hope this helps!
You need to learn Css selectors Weight:
Css Specificity
In your example, there are some some selectors which have more weight and overrite your custom-css Codes. For Example if you add:
nav .container-fluid .navbar-nav .nav-link.active{
color:red ;
}
then you overrite the current css.
First of all you forgot to close the <ul> tag.
Second, you are using v4.1.3 for bootstrap.min.css but v5.0.2 for bootstrap.min.js. You should use the same version for all bootstrap files.
Finally, your styles.css should go after bootstrap.min.css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Amita:wght#700&display=swap" rel="stylesheet">
<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=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- put this last so it can overwrite bootstrap styles -->
<link rel="stylesheet" href="styles.css" />
<title>CashCavaleria</title>
</head>
<body>
...
</body>
</html>
Related
I keep seeing this effect used on a lot of websites and am wondering how they're doing it
Example: https://app.uniswap.org/#/?intro=true
When you hover over one of the navbar links, it looks like a button instead of a different colored text link. How would I do this? Also using bootstrap v5.3.0-alpha1 if that makes any difference
I have this navbar as an example:
import './App.css';
import React, { useState, useEffect } from "react";
const App = () => {
return (
<div className="App">
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand d-none d-md-block" href='/'>
<img src={"./logo.png"} style={{ height: '50px', width: '50px'}} alt='' />
</a>
<div className="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="/#">Home</a>
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
<a className="nav-link disabled" href='/'>Disabled</a>
</div>
</div>
<div className="btn-group">
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider
chains={chains}
initialChain={mainnet}
theme={lightTheme({
borderRadius: 'small'
})}
>
<ConnectButton accountStatus='address' chainStatus='none' showBalance={false} />
</RainbowKitProvider>
</WagmiConfig>
<div className="dropdown">
<button className="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '30vw'}}>
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
{/* <li><i className={darkMode ? 'fas fa-sun' : 'fas fa-moon'}></i></li> */}
</ul>
</div>
</div>
</div>
</nav>
);
};
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
It's just adding a background-color on hover. Also, add some padding around the links by default.
ul {
display: flex;
list-style: none
}
li {
margin-right: 15px;
}
a {
padding: 8px 15px;
color: #000;
text-decoration: none;
}
li:hover a {
background: #e1e1e1;
border-radius: 5px;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #000;
transition: color 0.3s ease;
}
nav a:hover {
color: #fff;
background-color: #000;
}
In the CSS code above, we first define the basic styles for the navbar,
including a flexbox layout for the ul element and some margin and padding
adjustments for the li elements.
Then, we style the a elements with text-decoration: none and a default
color of black. We also add a transition property to animate the color
change when the link is hovered over.
Finally, we define the :hover styles for the a elements. When a link is
hovered over, we change the color to white and add a background-color of
black to create a contrast with the text. This creates a simple but
effective hover effect for the navbar links.`
I have an anchor tag Home this displays homepage and another one Books this display books page. Now when I click on Home link I want it to change it's color and keep the same color until I click on the other link. Similarly, when I click on Books link I want it to change this color and keep the same color until I click other link.
I can do it using JavaScript but I want to know how I can achieve it using CSS only?
I tried with a:active but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
You can do it like that, Use focus, But if using only that the styling will be lost once another element gains focus, So add a class to your a like in my example link then use it in CSS like the demo below:
a {
color: black;
text-decoration: none;
font-size: 20px;
}
a:focus {
color: red;
}
:link {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
HTML code
<a tabindex="1">Your Button</a>
CSS code
a {
color: black;
font-size: 30px;
}
a:active {
color: rebeccapurple;
}
a[tabindex]:focus {
color:rebeccapurple;
}
Adding a tabindex to each anchor element allows you to apply a :focus pseudo-class:
<style>
ul li a {
color: #000;
}
ul li a:focus {
color: red;
}
ul li a:selected {
color: red;
}
</style>
<ul>
<li><a tabindex="1" href="#" class="selected"> item1 </a></li>
<li><a tabindex="1" href="#" class="selected"> item2 </a></li>
<li><a tabindex="1" href="#" class="selected"> item3 </a></li>
</ul
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 2 months ago.
I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :
header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
I'd be glad to know what's wrong here. Thanks in advance!
I tried using a Google Font using a CSS sheet, but the font does not render
You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font
header {
font-family: 'ABeeZee', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
</header>
you have a font problem you are requesting ABeeZee
font but in style sheet you are appling font Alata
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<style> header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
font-family: 'Alata', sans-serif;
}</style>
<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=Alata&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
</body>
</html>
I'm new to html + css and having lots of trouble while making a basic simple website. My css properties often be overridden by static property that I can't find with inspect tool in Chrome.
Regarding CSS, my body tag is not working at all, the h3 tag also not working even though it's separated from class/div, etc.
Then my hover code is partly working, every code in the hover tag works just fine, however, if I want to change the text color to white, it doesn't do anything.
Regarding html, I put up a banner and the text is hidden behind the banner, I am unsure how to pull it out and place beneath the banner.
body{
clear: both;
background-color: #EBD8B7;
}
.navbar{
background-color: #EBD8B7;
height: 70px;
}
.navbar-brand {
font-size: 3em;
padding-left: 50px;
color: #DA723C;
font-family: 'Dancing Script', cursive;
letter-spacing: 5px;
}
.nav-link
{
color: #DA723C !important;
font-size: 25px;
margin-right: 50px;
font-family: 'Dancing Script', cursive;
}
li a:visited{
color: #ee9a00;
}
a:hover {
text-transform: uppercase;
color: white;
border-bottom: 0.5px solid #fff ;
}
.h3{
color: red;
font-size: 3rem;
text-align: center;
}
.banner {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-image: url(pic.png);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>36 Cafe</title>
<link rel="shortcut icon" href="logo.ico" />
<!-- Boostrap5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<!-- Jquery here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="">36 Cafe</a>
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Order Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Hours</a>
</li>
</ul>
</div>
</nav>
<h3> WE ARE OFFICIALLY OPEN FOR DINE-IN </h3>
<div class="banner">
<div class="content-area">
</div>
<h5>Please wear your mask</h5>
<p> We have 50% of capacity, please wear your mask until seated.</p>
<p> She nervously peered over the edge. She understood in her mind that the view was supposed to be beautiful, but all she felt was fear.
There had always been something about heights that disturbed her, and now she could feel the full force of this unease.
She reluctantly crept a little closer with the encouragement of her friends as the fear continued to build. She couldn't help but feel that something horrible was about to happen. </p>
</div>
<script>s
</body>
</html>
body {
background:red;
}
.body {
background:red; /* does not work*/
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
You've done a very simple mistake with the body tag. Instead of bodyyou've used .body. The dot is only used for classes, to directly select an element by its tag you just use its tag name. For example, h1 {}selects all h1 tags and .first-h1 will select all elements that have that class.
Kind of a peculiar thing happening here...
I'm using ASP.NET in Visual Studio 2015. When I add custom CSS within a <style> tag in the header of my HMTL document, my CSS will override Bootstrap's CSS, but when I reference my CSS in an external .css file it does not... Here is my code (the CSS in the style tag is the exact same as what's in the external css sheet):
<head runat="server">
//BOOTSTRAP CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%>
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS
<style>
//THIS CSS WILL OVERRIDE BOOTSTRAP CSS
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">X.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Projects</li>
<li>Contract</li>
</ul>
</div>
</div>
</nav>
</body>
All searches on Google for a resolution say that putting my .css link underneath the Boostrap CSS links should override it, but that's what I've tried and it's not working. Any suggestions?
Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.
Try and wrapping your html code inside a div and give it a class/id and try to override with that wrapping div.
HTML:
<div class="wrapping_class">
<nav class="navbar navbar-default">
</nav>
</div>
CSS:
.wrapping_class .navbar.navbar-default{
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
This is a solution based on CSS specificity that plays a role in overriding certain CSS rules based on their power.
Refer to this link for table of specificity values (for Star Wars fans a treat):
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/