I'm trying to target just the links in my nav bar as I have inserted other dummy links further down in my home page that I want to style on their own. I have tried adding an ID/class to the section that my header tags live in, and I have also tried targeting each individual with a class or ID attribute. This is lending itself to some functions being applied while others are not. This is purely a little practice site I am building alongside what I learn in my Udemy course, but I wanted real-time feedback. Here is the HTML I have right now:
<header id="nav-bar">
<h1 class="welcome">Welcome to Peter's Penguins!</h1>
<nav class="nav">
Home
About Us
Meet The Team
Contact Us
Our Penguins
</nav>
</header>
and my (external) CSS is:
.nav {
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
}
.nav-links {
text-decoration: none;
padding: 5px;
margin: 23px;
}
Is there a way I can use the pseudo-class property for my LVHA portions? I.e.
.nav-links a:link {
}
.nav-links a:visited {
}
Or is this improper syntax?
You can do something like
a.nav-links: visited {
}
This will target more specific (higher priority).
.nav .nav-links {
color: blue;
}
Beloow wil give it a little bit more priority because it is more specific.
ul.nav a.nav-links {
color: blue;
}
And you may use the :hover, :active, and other for functionality
.nav .nav-links:hover,
.nav .nav-links:active {
color: red;
}
Related
what is the difference between that .navbar and .navbar a
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I can't get to find what the difference is between those. Please don't get irritated I am a noob at web technologies
If you have the below HTML
<div class="navbar">
<p>Hello World>
Hello World
</div>
.navbar will get applied to your div and then subsequently to everything that is within it
.navbar a will only get applied to the <a> tag inside the div with class=navbar
To explain it consider the following html code:
<div class = "navbar">
<a></a>
</div>
The first div will apply the following style:
overflow: hidden;
background-color: #333;
font-family: Arial;
However <a></a> will apply the following style:
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
For <a> tag you need not to add any class attribute. It will automatically apply the style as you defined the style .navbar a
In this case .navbar is a css class that refers mostly to a parent element inside which your hyperlink is located (that is the <a> in your HTML file). It can be a div or some container element, that depends on your HTML.
While .navbar a refers to any <a> that is a child element inside a container element. Hyperlinks that are not children of .navbar elements will not be affected. For example, let's look at this html chunk:
<div class="navbar">
Click here!
</div>
Let's say the above is part of your index.html file or so. In your css file:
.navbar {
/*all css style here will affect your div class="navbar"*/
}
.navbar a {
/*put something here to style all hyperlinks that are child to .navbar elements*/
}
Please let us know. You can check sites like this and read and read a lot, your skills will be largely improved with practice and reading.
I am currently building a website but having trouble with the links display when I apply hover (CSS+HTML5). How do I stop the hover to apply on all the links that are on the same line at once? like I want the hover to apply to the pointed link only and not all of them at once. The links are on the navigation bar. Please help me.
Here is what my program looks like:
a:link {
color: white;
padding: 10px;
}
nav:hover {
background-color: #ff3399;
}
<nav>
HOME
MARCHENDISE
TRANSPORTATION
CIMENT
LOCATIONS
LAITERIE
CONTACTS
</nav>
You are applying background to the nav element on hover i.e nav:hover, not to <a>.
Just use a:hover
a:link {
color: #000;
padding: 0 10px;
}
a:hover {
color: #fff;
background-color: #ff3399;
}
<nav>
HOME
MARCHENDISE
TRANSPORTATION
CIMENT
LOCATIONS
LAITERIE
CONTACTS
</nav>
you have to be spesific
I recommand you to learn more about selector in css:https://www.w3schools.com/cssref/css_selectors.asp
nav a:hover{
color:red
}
<nav> HOME
MARCHENDISE
TRANSPORTATION
CIMENT
LOCATIONS
LAITERIE
CONTACTS
</nav>
I have just started learning about web development and I'm having some issues. In the website that I am currently creating I have a navigation menu. However, I also have other ul and li elements throughout the main content of the web page. I have been trying to get certain styles to apply to just my navigation bar and not the bulleted lists in my content but no matter what I try, I either get the styles on both my navigation and the content or on none. I have looked on google and a lot of different websites, I have tried having the .navigation and # in front of my styles but nothing seems to be working. I must be doing something wrong somewhere but I have no idea what it could be. If someone could help that'll be wonderful! The following is my navigation barcode:
<div id=navbar">
<ul>
<li>
Home
</li>
<li>
About Volleyball
</li>
<li>
Sign-Up
</li>
<li>
Announcements
</li>
<li>
Contact Us
</li>
<li>
Links
</li>
</ul>
</div>
and these are the styles on my separate css style sheet that I wish to apply to just the above code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
li a:hover {
background-color: #80bfff;
}
You can simply select only elements which are children of you navbar by prepending your selectors with #navbar which selects the element with the id navbar and the selectors after that will only search in its children:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #80bfff;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>About Volleyball</li>
<li>Sign-Up</li>
<li>Announcements</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</div>
<ul>
<li>No styles applied</li>
<li>No styles applied</li>
</ul>
In your .css file you can create classes to use across elements.
Try this in the .css file.
.hello {
color: blue;
text-align: center;
}
Then try this in your html
<h1 class="hello">Hello World</h1>
This will apply the style defined in the .css file to the element with the class "hello".
More information about classes can be found here: https://www.w3schools.com/cssref/sel_class.asp
If you want to add style to any specific element then you can add CSS code to that specific element like: for tag you can use p{color:red} OR by using class: p.my-element{color:red} or using ID: p#{color red}
You are in your initial phase of learning development. So read and write your own code.
Look into id's and classes.
This will allow you to style elements seperately.
I am trying to style a nav link to be a certain color when I am on that page.
HTML:
<nav>
<ul>
<li>Portfolio</li>
</ul>
</nav>
CSS:
nav a.selected {
color: #000;
}
The above code works. But if I removed the nav selector and just used
a.selected {
color: #000;
}
then the code doesn't work.
What if I wanted anywhere that I have an anchor element with a class "selected" to have #000?
The problem here seems to be the specificity of your selector.
Meaning:
nav a.selected {
color: #000;
}
Is not as exact as:
nav ul li a.selected {
color: #000;
}
Which holds more significance than the above.
So in order for your a.selected to work, You need to remove the nav before it, making it a global modulator just as the color you applied to your global anchor modulator, or apply the more specific selector from above (the second block):
a {
color: #6ab47b;
}
a.selected {
color: #000;
}
As a learner, I suggest You try and stick to the Mozilla Developer Network (MDN) Almanac.
I'm completely new to HTML, CSS and Javascript but drawing on previous knowledge of typical programming from Java and C along with numerous tutorials and google searches I've been piecing together a very rough image of how this all works.
Now something that is driving me crazy is I recently added a tabbed content box into my website, one that is on the main page that allows you to select one of 4 different paragraphs by clicking on the appropriate tab. I pulled it off of a tutorial and have a basic understanding of how its working.. but for some reason I cannon get it to let me adjust the width of each of these tabs..
Here is the html for the tabs:
<div id="feature-tabs">
<ul id="tabs">
<li>What We Do</li>
<li>What Makes Us Different</li>
<li>Our Background</li>
<li>Why We Do It</li>
</ul>
</div>`
And here is the associated CSS that styles it.
#feature-tabs {
height: 16px;
width: 150px;
}
ul#tabs {
list-style-type: none;
margin: 0 0 2 0;
}
ul#tabs li {
float: left;
}
ul#tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
text-decoration: none;
width: 150px;
}
ul#tabs li a:hover {
background-color: #f1f0ee;
}
ul#tabs li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
}
I need this very much so for the look I'm going for but I simply cannot find out why no matter where I put width: ___px; it just won't apply.
I am wondering if there is something I'm doing which prevents width from being an applicable trait or what have you.
Thanks in advance.
Try adding this style:
ul#tabs li a {
// ..
display: block;
}
DEMO
This happens because a is an inline element by default. Inline elements don't react to height/width.
Does height and width not apply to span?
The Width Propertyw3
Add the following rule to your link :
ul#tabs li a { display: inline-block; }