I want to change the font size and color of the a when I hover over p. It is not working. Probably there is a simple solution, but I am struggling with this for a few hours.
If anyone has not too complicated links related to this topic I also would be happy
<!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" />
<title>Document</title>
<style>
p:hover div nav a {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
Hi there i get the simple solution for you .
<!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" />
<title>Document</title>
<style>
p:hover + .hv {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Hi there ok so if i might get you . you want to get
<!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" />
<title>Document</title>
<style>
.hv a:hover{
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Try something like:
p:hover, a:hover {color: blue;font-size: 22px;}
Your CSS selector p:hover div nav a is incorrect. This would refer to an <a/> within a <nav/> within a <div/> within a <p/> that is being hovered. You can fix this with the change I made below.
<!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" />
<title>Document</title>
<style>
nav p { /*selects all hovered <p/> within a <nav/>*/
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
Related
how can I prevent this? the edge of the "f" character is overflowing from div. how can I make it fit the text?
HTML code :
<!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">
<title>Document</title>
</head>
<body>
<div class="parent" style="display: inline; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>
You can also try padding to left and right.
<!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">
<title>Document</title>
</head>
<body>
<div class="parent" style="display: inline; padding:0 25px; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>
I tried to import font from Adobe and I struggle with polish characters. The font displays Polish characters on the Adobe website correctly but on mine not. What am I missing?
My simple HTML with CSS:
body {
font-size: 60px;
font-family: stolzl, sans-serif;
font-weight: 100;
}
<!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="stylesheet" href="https://use.typekit.net/jwn6fph.css" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
wymagające
</body>
</html>
And that's a screenshot from the Adobe website
what do I have to do to fix this?
My css file is not changing the thhing i need:
Here's my 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">
<script src="/www/style.index.html.css"></script>
<title>Test</title>
</head>
<body>
<h1 class="test">Server Test</h1>
</body>
</html>
and here's my css:
.test{
font: optional;
color: red;
}
the class test is not working, and I have no Idea why. if you have an answer, please help! :)
Bob
PS: sorry for the weird ass title.. The bot is just stupid
You add/import/link your css file as follows <link href="./file_name.css" rel="stylesheet" />
I am trying different selectors using CSS. I am confused. I want to change only the the links that is pointing to secure sites (https). I want to change the color of secured links. How can I do that?
Here the code containing first two https and the rest one http:
a {
color: #333;
font-size: 20px;
}
<!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" />
<title>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
</body>
</html>
Use [href^="https://"]. Selects all a tags whose href begins with https://.
a {
color: #333;
font-size: 20px;
}
a[href^="https://"] {
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" />
<title>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
</body>
</html>
More info about attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Unfortunately, some http links have port 443, which also forces HTTPS. It is not possible to style such links with CSS, but you might get some hope with JavaScript:
// Get all links with href attribute
const links = document.querySelectorAll('a[href]');
for (var i = 0; i < links.length; i++) {
const link = links[i];
const href = link.href;
const split = href.replace("http://", "");
const parts = split.split("/");
if (parts[0].endsWith(":443")) {
link.classList.add('red');
}
}
a {
color: #333;
font-size: 20px;
}
a[href^="https://"] {
color: red;
}
.red {
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" />
<title>Selectors</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="exercise.css" />
</head>
<body>
Google
Google
Google
Google
</body>
</html>
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">