My css class is not applying the style yet I have imported the css file. What might be the issue?
Here is the code:
.edubtn{
background-color: #862165;
border: 0;
padding: 2 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
<div class="edubtn" onclick="show()" >ORDER</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (#media screen) brackets
#media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
your code works fine,
the background color is dark purple which is = to saying background-color: #862165;
the text color is white which is = to saying color: rgba(255,255,255,0.7);
I run your code and I did a <h2> with the same style and it works
HTML Code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beep-Boop</title>
</head>
<body>
<h2 class="something"> Something..</h2>
<div class="edubtn" onclick="show()" >ORDER</div>
</body>
Style CSS :
.something{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.something:hover{
color: #fff;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
Related
Just curious, why when I do print preview the headings are still colored after I've set a class selector to black? If by putting .container within the media rule and setting the color too black, should every text including headings be set to black? I know I can easily add h1, h2... I'm just curious as to why I can not set a selector to a specific color and everything within that selector be set to that during print? Thanks for the feedback!
/* reset style */
html {
font-size: 12px;
}
/* body and page container */
.container {
max-width: 600px;
margin: 0 auto;
border: 3px red;
}
/* headings */
header {
text-align: center;
padding: .4em;
background-color: darkgrey;
}
h1 {
text-shadow:2px -4px 5px black;
color: #EADCDC;
font-size: 5em;
}
h2 {
color: brown;
font-size: 3em;
}
p {
font-size: 1.2em;
line-height: 1.4em;
}
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
background-color: #dee9f9;
}
h3 {
color: green;
font-size: 2em;
}
article {
background-color: gold;
padding: 3%;
}
.accent {
text-decoration: underline;
text-align: center;
line-height: .8em;
}
/* unordered list */
ul {
list-style: circle;
font-size: 1.2em;
line-height: 1.4em;
}
aside {
background-color: #EADCDC;
width: 45%;
padding: 2%;
margin: 2%;
box-shadow: 3px 3px 3px black;
border-radius: 30px;
float: right;
line-height:4em;
}
footer {
padding: 0.6em;
color: ivory;
background-color: darkgrey;
text-align: center;
}
/// This is what I am referring to
#media print {
body, .container, aside, article {
color: black;
background-color: white;
box-shadow: none;
}
}
#page {
margin: 1in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Super Battle</h1>
</header>
<aside>
<h2 class="accent"> ARE YOU READY?</h2>
<h3>DATE</h3>
<p>10/31/2022</p>
<p>12AM - 12pm</p>
<h3>LOCATION</h3>
<p>LAS VEGAS</p>
<p>NEVADA</p>
<p>MGM GRAND CASINO</p>
</aside>
<article>
<h3>PRICES</h3>
<p>$200General</p>
<p>$400 VIP</p>
<p>$1000 ALL ACCESS</p>
<h3>SPONSORS</h3>
<ul>
<li>ELON MUSK</li>
<li>DONALD TRUMP</li>
<li>TEKASHI 69</li>
<li>BARACK OBAMAS X WIFE</li>
</ul>
</article>
<footer>
<p> www.LASVEGASBATTLE.us</p>
</footer>
</div>
</body>
</html>
body {
background-color: rgb(30, 21, 120);
}
p {
color: white;
font-size: 20px;
}
.package {
border: 4px solid white;
border-radius: 70px;
margin: 60px 0px 60px 0px;
background-color: rgb(37, 110, 194);
}
p.package {
color: white;
font-size: 25px;
padding-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="package">
<div nowrap>
<p>Recommended Package</p>
<button value="Purchase">Purchase</button>
</div>
</div>
</body>
</html>
I am trying to make a box that text in it and I am trying to put a button to the right of the text. However, whenever I make the button float to the right or nest divs, the button ends up being under the text, or the entire box breaks. I also used display: inline on divs (which broke the box). I want the button to look like this:
However, it looks like this:
Add display: inline; to the <p>. The default is block, which means that the <p> will extend across the whole width of the screen. Setting it to inline will mean that it just takes up how much space it needs.
body {
background-color: rgb(30, 21, 120);
}
p {
color: white;
font-size: 20px;
display: inline;
}
.package {
border: 4px solid white;
border-radius: 70px;
margin: 60px 0px 60px 0px;
background-color: rgb(37, 110, 194);
}
p.package {
color: white;
font-size: 25px;
padding-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="package">
<div nowrap>
<p>Recommended Package</p>
<button value="Purchase">Purchase</button>
</div>
</div>
</body>
</html>
add display: inline-block and vertical-align:middle to p tag
I would like to print this HTML table with the elements displayed with rounded borders, but as soon as I print the page the CSS class seems not to be displayed anymore. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.hashtag {
display: inline-block;
color: white;
font-size: 20px;
background-color: rgba(46, 200, 40, 0.5);
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 0.0em 0.5em;
border-radius: 1em;
text-indent: 0;
text-align: center;
}
</style>
</head>
<body>
<tr>
<td>
<p class="hashtag" align="center">CSS</p>
<p class="hashtag" align="center">WON'T</p>
<p class="hashtag" align="center">PRINT</p>
</td>
</tr>
</body>
</html>
You are using white text on a dark background. But most browsers don't print background images or background colors by default, which will result in white text on no/white background in your case, i.e. it will remain invisible.
It is possible to print background colors, but that's a browser preference/setting that can only be set/changed by the user, not via CSS or any other code in the website.
You are trying to print white text on a colored background, but most browsers will not print backgrounds by default (or if they do, then it is because the user has changed a setting to enable it).
You can prepare for this using a #media print { ... } addition to your stylesheet, which changes the applied style so it will print more nicely. For an example see the snippet below:
.hashtag {
display: inline-block;
color: white;
font-size: 20px;
background-color: rgba(46, 200, 40, 0.5);
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 0.0em 0.5em;
border-radius: 1em;
text-indent: 0;
text-align: center;
}
#media print {
.hashtag {
color: black;
background-color: white;
border: 1px solid black;
}
#btnPrint {
display: none
}
}
<p class="hashtag" align="center">CSS</p>
<p class="hashtag" align="center">WILL</p>
<p class="hashtag" align="center">PRINT (B/W)</p>
<button id="btnPrint" onclick="window.print()">Print</button>
How can I apply css properties on more then two html elements when it hover in any of the box and the properties of both elements can change.
.tab-sec:hover{
background-color:#1b9927;
border: 1px solid #4e4e4e;
color: #000;
h5{
color: #fff;
}
}
I have tried this way but it is not working.
You can only nest styles with CSS preprocessors like LESS and SASS.
I think to get what you are after you just need to write your style like this:
.tab-sec:hover{
background-color:#1b9927;
border: 1px solid #4e4e4e;
color: #000;
}
.tab-sec:hover h5{
color: #fff;
}
Try like this,
<!DOCTYPE html>
<html>
<head>
<style>
.over_class:hover {
border-style: solid;
border-color:#1b9927;
color: hotpink;
}
</style>
</head>
<body>
<input type="text" class="over_class" /><br/></br/>
<input type="text" class="over_class" /></br/></br/>
<input type="button" class="over_class" value="Submit" />
</body>
</html>
Try this one. This code is for .scss
.tab-sec{
background-color:#1b9927;
border: 1px solid #4e4e4e;
color: #000;
&:hover {
/* for tab sec*/
background-color: #ff000;
/*for child elements*/
h5{
color: #fff;
}
}
}
As you can see, the nav element has a bit too much top padding. The links' outlines are in the right spot though, there's just that extra annoying space. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>'''+title+'''</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<style>
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
html, body {
margin: 0;
background: #333333;
height: 100%;
position: relative;
font-family: "merriweather";
overflow-y: hidden;
}
h1 {
font: bold 40pt roboto, arial, sans-serif;
margin: 0;
background: yellow;
padding: 30px;
}
nav {
display: inline-block;
}
nav a {
cursor: pointer;
font: bold 18px roboto;
display: inline-block;
transition-duration: 0.2s;
padding: 15px 30px;
background: linear-gradient(
#FF9900, #FF9900 50%, #333333 50%, #333333
/*outline: none;*/
);
background-size: 100% 200%;
color: black;
}
nav a:hover {
background-position: 100% 100%;
color: yellow;
}
nav a:focus {
outline:none;
}
#content-white-bkg {
background: white;
padding: 30px;
margin: 15px;
box-sizing: border-box;
overflow-y: scroll;
}
*:not(nav) > a:link {
cursor: pointer;
color: #FF9900;
transition-duration: 0.35s;
/*border-bottom: 1px solid #FF9900;*/
}
*:not(nav) > a:visited {
color: #FF6600;
cursor: pointer;
transition-duration: 0.35s;
}
*:not(nav) > a:hover, *:not(nav) > a:focus {
color: black;
outline: none;
}
a {
text-decoration: none;
color: black;
}
nav > a.selected {
background: #333333;
color: yellow;
text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
transition-duration: 0.5s;
}
nav > a.selected:hover {
color: #333333;
}
::selection {
background: #FF7700;
}
::-webkit-selection {
background: #FF7700;
}
::-moz-selection {
background: #FF7700;
}
h3 {
font: bold 18px nunito;
margin-top: 0;
}
</style>
</head>
<body>
<h1 title='MUCAS: Multi-User Chat Application Server'>
<span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
<nav>Home/chatLog inSign upAbout MUCASContact me</nav>
</h1>
<div id="content-white-bkg">
'''+body+'''
<script>
var cwb = document.getElementById("content-white-bkg");
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
window.onresize = function() {
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
}
var path = window.location.pathname;
document.getElementById("nav-"+path).className = "selected";
</script>
</div>
</body>
</html>
Can anybody help me with this? Is it a layout issue, or something else?
Try this:
nav a {
vertical-align: top;
}
check the developer tools in your browser. Select the nav element and view the CSS panel associated with that element. Look at the inherited styles and the computed style. Is the margin or padding on the nav inheriting? Maybe it is a parent or child element of it is computed to zero. This could be the links, list, list items, or parent. If you can use flexbox I highly recommend it for aligning components and layout.
You can try
nav {
vertical-align: super;
}
"vertical-align: super" will treat your "nav" as a superscript. I tried putting it in your code and found it works. You can try if you think it can solve your problem. Thanks.
This should do the trick:
nav a {
float: left;
}
I should also change the h1 to a div element for semantics. h1 is used for example a page title and not to wrap a navigation bar and an logo in..
You are doing several things wrong here.
You are placing a navigation item and image inside of an header element. You are not using float for the elements you want to float.
Use a around it instead.
I made a jsfiddle illustrating the float, without correcting the semantics.
Consider doing something like this instead:
<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>