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.
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'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>
I have designed a webpage which is only one navbar.
The navbar works completely fine when I am using it in my computer simulating using PHPstrom, but when I upload it to my host it start to behave badly.
Replacing the colors I gave it or combining them.
The align of flex box which I want menu to be in the middle but keep using right.
The hover effect I designed will keep overwrite by default one.
It keeps ignoring almost everything i write in my CSS and the ones it doesn't ignore, it shows half broken. None of this happens in my local server (either with xammp or PHPStorm run)
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #e8e8e8;
color: #242424;
}
.wrapper {
width: 100%;
}
/*****navbar****/
ul {
direction: rtl;
}
ul li {
padding: 0 10px;
}
.bg-dark {
background-color: #242424 !important;
}
.nav-a {
text-decoration: none;
direction: rtl;
justify-content: right;
border-bottom: solid transparent 3px;
transition: all ease-in 0.3s;
color: #e8e8e8;
}
.nav-a:hover {
border-bottom: solid rgb(80, 80, 80) 3px;
}
.navbar-me {
color: #e8e8e8;
justify-content: space-between;
text-align: center;
min-height: 10vh;
height: auto;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--STYLE LINKS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<title style="direction: rtl"> </title>
</head>
<body>
<!--start Wrapper-->
<div class="wrapper">
<!--navbar START-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-me">
<!------------------n--------NAVToglle---------------------------------------->
<a class="navbar-brand" style="font-family:monoton,sans-serif; font-size: 1.6rem; color: #e8e8e8;">Technotron</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse m-auto" id="navbarSupportedContent">
<!--Unordered list----->
<ul class="navbar-nav m-auto " style="justify-content: right; text-align: right;">
<li class="nav-item active"><a class="nav-link nav-a" href="#">خانه</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">محصولات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">خدمات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">تماس با ما</a></li>
</ul>
<a style=" display: inline-block; padding: 10px; background: #e8e8e8; color: #242424; text-decoration: none;" href="#"><span> فروشگاه <img src="Mainpage/pic/cart.jpg" style="width: 30px;" alt=""></span></a>
</div>
</nav>
<!--navbar STOP-->
</div>
<!--END Wrapper-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
At first please check is your css file accessible on [www.your-theme-assets.com]/main.css then in browser with inspect element tools check is your theme reading you css class file? for example in firefox:
your css file may not be read correctly
or css file its been cache for test change you can you add version number end of your css file address and each time you change the css file for see new changes without caching just change number of version file in source like tihs:
themeaddress/css/style-min.css?v=2.0.4
?v=2.0.4 do nothing it just force browser read new css file
Need some help getting my background image to display on my page.
I'm having trouble getting it to work and I can't figure out why because to me it seems like I spelled everything correctly. Any help would be appreciated.
HTML
'<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>'
CSS
'body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};
.pageOne{
background: url("../images/mountains.jpg");
};'
Your <div> is empty, which means that it is 0px tall (there needs to be some content to force it to "expand"). Try setting the height explicitly in your CSS.
.pageOne {
height: 100px; /* or whatever height you want */
background: url("../images/mountains.jpg");
};'
.pageOne is an empty div. Your current content is in your <body> tags. If you put the background on your body instead, it would appear. A div shouldn't be outside the body tag anyways. If you leave your div outside of the body, it could render faulty.
Checkout this example
You made several mistakes in your html and css
pageOne is empty put some content in it or you can give height of that div from css
don't add ; semicolon like this .pageOne{}; remain part of css will not execute
Hope this will helps you
body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
}
.pageOne{
background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 100px;
width: 100%;
text-align: center;
}
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
hi
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>
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/