This is my super simple code and the background color isn't changing for some reason. I know that the external CSS is linked correctly because the text color of h1 is changing.
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<link rel="stylesheet" href="randomnezs style.css">
<style>
body{
background-color: black !important;
}
h1 {
color: red;
}
<style>
</head>
</html>
Because your body height is 0, you can set some height for it.
body{
background-color: black !important;
height: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<link rel="stylesheet" href="randomnezs style.css">
<style>
body{
background-color: black !important;
height: 10px;
}
h1 {
color: red;
}
<style>
</head>
</html>
Related
I want to show / hide a variable on hover with help of CSS only. Here's my html:
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<p>Hover here to see magic</div>
<div>Hello World</div>
</body>
</html>
Here's my css:
:root {
--show-state: none;
--p-color: black;
}
body {
padding: 2rem;
}
body > div {
color: var(--p-color);
display: var(--show-state);
}
body > p {
border: 2px solid var(--p-color);
cursor: pointer;
padding: 1rem;
color: var(--p-color);
}
body > p:hover {
--p-color: blue;
--show-state: block;
}
When I hover to the element, the paragraph color changes however since --show-state sets to block I should be able to see the div but it still remains invisible:
I have also attached code sandbox to try it on: https://codesandbox.io/s/html-code-editor-forked-hv5teh?file=/style.css:0-251
Can someone tell me what am I doing wrong or if this won't be possible at all only via CSS?
You are changing the variables for the p element, not for the whole body (or :root) so the div isnt affected.
However, since the div comes after the p element and is its immediate sibling you can use the + combinator to affect the settings of the CSS variables for that div.
:root {
--show-state: none;
--p-color: black;
}
body {
padding: 2rem;
}
body>div {
color: var(--p-color);
display: var(--show-state);
}
body>p {
border: 2px solid var(--p-color);
cursor: pointer;
padding: 1rem;
color: var(--p-color);
}
body>p:hover+div {
--p-color: blue;
--show-state: block;
}
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<p>Hover here to see magic</div>
<div>Hello World</div>
</body>
</html>
"this is my external css file of name style.css"
body{
background-color: red;
}
h3{
color: #66BFBF;
}
hr{
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 3px;
width: 5%;
}
"And this is my html file of name index.html .in which the style.css linked correctly because hr selector working ,but not others."
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chandan's personal site</title>
<link rel = "stylesheet" href ="CSS\style.css">
</head>
<body>
<h1>This is me!<h1>
<hr>
<h3>Books & Learning</h3>
</body>
</html>
It worked when i delete the line out - <lang 'en'>
Is it possible to shape the outline that appears when a CSS button is clicked? When clicking a rounded button the outline just looks a bit off.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.button {
border-radius: 80%;
padding: 16px 32px;
}
</style>
</head>
<body>
<button class="button">BUTTON</button>
</body>
</html>
You can change the width of the existing border when the button comes into focus (or is active) - and you also have the option of changing its color or style (ridge etc) as you wish.
.button:focus, .button:active {
outline-style:none;
border-width: 5px;
border-color: black;
border-style: solid;
}
.button {
border-radius: 80%;
padding: 16px 32px;
}
<button class="button">BUTTON</button>
override outline behavior on the focus of the button.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.button {
border-radius: 80%;
padding: 16px 32px;
}
.button:focus {
outline: none;
box-shadow: 0px 4px 7px 0px #888888;
}
</style>
</head>
<body>
<button class="button">BUTTON</button>
</body>
</html>
I have no idea about "shaping" but i am sure you can diable the outline with outline: none; you can just use this property on active, focus and hover to see if this works or not.
Aiming for: a vertical gap between paragraph and 'link-button'.
I seems I can change my margin for my link button to any number, but it seems to have no effect whatsoever. (I can surprisingly work around this by adding a margin-bottom in my 'paragraph' styling, yet it still bothers me that I don't know why I don't understand why code below is not working.)
Does anyone know what I am missing here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px; <!-- Why does this have no effect?-->
}
</style>
</head>
<body>
<p>
This is a paragraph text.
</p>
<a class="link" href="google.com">Google</a>
</body>
Try this
CSS:
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px;
display:inline-block;
}
Please add display:inline-block in .link css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px;
display:inline-block;
}
</style>
</head>
<body>
<p>
This is a paragraph text.
</p>
<a class="link" href="google.com">Google</a>
</body>
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>