Short version, why am I seeing green and blue, H2s and not red and blue?
Longer version
This is probably easier if you just look at the code, but I'll explain anyway.
I have a default H1,H2,H3 text color, blue. I have a media query that detects a browser size of more than 768 pixels (the desktop version of the site).
In the media query I set the color of the H1,H2,H3 to red. There is a class called "bar" that also has h1,h2,h3 color style, this time green.
There is a div with the class "foo". There is no div with the class "bar".
If I add a "foo" class (of yellow) inside the media query, it works as expected, if I remove the bar class, again, all good. But how is an H2 assigned to a class affecting a div that does not have the class name associated with it? Especially when default h2 is set inside the media query. I would expect to see red and blue, not green and blue.
Can anyone explain to me why I'm seeing this behavior?
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hi</title>
<meta name="description" content="this">
<style>
h1,h2,h3{
color:blue;
}
/*Desktop layout*/
#media (min-width: 768px) {
h1,h2,h3{
color:red;
}
.bar h1,h2,h3{
color:green;
}
}
</style>
</head>
<body>
<div class="foo">
<h2>me foo</h2>
<p>you bar </p>
</div>
</body>
</html>
Your problem lies in your .bar selector:
.bar h1,h2,h3{
color:green;
}
With this selector you are targeting all <h1> tags inside an element with .bar class but also all the <h2> and <h3> tags in the HTML document.
Instead you should change it to:
.bar h1,
.bar h2,
.bar h3 {
color:green;
}
This will target only children from the .bar class.
Find out more about Combinators and Selector Lists here.
You're currently only overriding the h1 and not the h2, h3.
Change your code to:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hi</title>
<meta name="description" content="this">
<style>
h1,h2,h3{
color:blue;
}
/*Desktop layout*/
#media (min-width: 768px) {
h1,h2,h3{
color:red;
}
.bar h1,.bar h2, .bar h3{
color:green;
}
}
</style>
</head>
<body>
<div class="foo">
<h2>me foo</h2>
<p>you bar </p>
</div>
</body>
</html>
Related
This is the question about Google chrome dev tools and CSS. As following codes, though I input "#media (max-width:1000px)" on style sheet of VSCODE, the tools change to Responsive Web Design at 750px(75%). I don't zoom, and write "viewport" on html. Also the scale is 1.0. Please tell me the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
div {
width: max(400px, 50%);
height: 400px;
background-color: coral;
}
#media (max-width: 1000px){
div {
background-color: blue;
}
}
As of my comment, the cause was the zoom of page. By putting back the zoom, I could solve the question.
I am trying the code in the link shown below for responsive layout design.
1) As it it, if the CSS code is included in the html code displays perfectly as expected
2) But if I move the exact CSS code as a different file and link to it from the html code, visually the boxes layout don't work so well. The result seems similar in different browsers.
Would someone know the reason for that? I was expecting to get more similar visual results
Also would it be good in general for a website html code to include the css in the html code as in (1) or as a different file as in (2)
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
Here is the code I used to link to css file
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
here is the top code of the CSS sheet
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
And here is a screenshot of the result
edit
reviewed css sheet code after Lunex answer (top part)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
Create a css file. Let's say you name it "style.css".
In this file you put all the content which is in the < style > tag.
In your html file inside the head tag you add:
<link rel="stylesheet" href="style.css">
This should be working, considering you've done everything right.
Edit for your edit:
You don't need html tags in your css file.
The content of the html file should be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
The content of your css file should be:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
I want to use the meta tag and set the css, the font-size is 30px, but when I typing more code in tag p, the font-size became 38.317px in Chrome browser; please tell me why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<title>Document</title>
<style>
p{
word-break: break-all;
font-size: 30px;
}
</style>
</head>
<body>
<p>ssssssss</p>
</body>
</html>
I tried your code and both Chrome and Firefox don't change the font-size.
In my main CSS file, I have my a:link selector set to display links in White.
a:link{
color: white;
}
However, I want links in another DIV (.menuItem) to be black.
I am trying
.menuItem a:link{
color: black;
}
can't seem to get it to work, so it's probably wrong..
Can anyone lend a hand on this one?
.menuItem a:link{
color: black !important;
}
With respect to Chacha102, I don't think the solution is ideal. !important is a kludge, and a better way to handle this would be to make use of the document structure to add some specificity. Assuming your .menuItem elements have a common parent, perhaps a div with an id of menu, you could revise your menu-specific link style as follows:
#menu a:link {
color: black;
}
The extra specificity should cause the more specific rule to take effect for those menu items.
Working on a sample code now. But Is your div tag having an Id of menuItem or a class of menuItem? This is my guess.
Edited : Okay, now I see. If you separate the css to another file and use a link tag to import it in, then it should be fine without using the !important command, see this :
body {background-color : green;}
a:link{ color : white;}
.menuItem a:link
{
color : black;
}
And this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
This is a link
</div>
<div class="menuItem">
This is a link in div menuItem
</div>
</body>
</html>
Hope this helps:)
Still, if I embed the css snippet into the html, then it doesn't work... Wondering why?
How to set float right for every element inside div?
I want to give float to inside elements only not to parent DIV?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
div {border:2px solid red;height:50px}
a {border:2px solid blue;margin:10px}
</style>
</head>
<body>
<div>
<a>Hello from JS Bin</a>
<a>from JS Bin</a>
</div>
</body>
</html>
You can target all children of an element using the * selector, so in your example, you could add:
div * { float: right; }
Note that this would float all children and their children, so if you had nested content it's probably not what you want, in this case you probably want:
div > * { float: right; }
However, the > direct descendant selector isn't supported in older versions of IE (and possibly other browsers?).
Following on from Alconja below is a good way of getting round the descendant selector issue:
div *{ float: right; }
div * *{ float: none; }
This will float everything right, then the children of everything will be reset to none.