Inline style for DIV allows border, but not CSS - html

There's obviously something fundamental I don't understand about styling so please help me out.
Let's take the following simple HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?

Your CSS file mustn't be getting loaded somehow or you have an older version cached in your browser.
Your code works fine. Here it is working in a jsFiddle.
Try performing a hard refresh (generally CTRL+F5 on Windows, CMD+SHIFT+R on Mac) and ensuring your CSS file is located in the same directory as the HTML file you're trying to open.

Did you put the css file in a sub folder?
If so, you'll need to point to it:
<link rel="stylesheet" href="subfoldername/test.css" />

Related

Parent of <textarea> is taller than <textarea> when the document has <!DOCTYPE html> in Chrome

Try pasting this HTML into a file and opening it in Chrome:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea></textarea>
</div>
</body>
</html>
The parent is a bit bigger than the textarea:
This is only the case on Chrome (not Firefox).
I noticed that if I removed the doctype, it behaves normally - the parent is the correct size. My first thought is that it's just different default useragent styles. Here's a diff between the the user agent styles with and without the doctype:
So I tried matching the padding and the box-sizing like so:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea style="box-sizing: border-box; padding: 2px 0px 0px 2px;"></textarea>
</div>
</body>
</html>
But the problem doesn't go away. Any idea what's causing this?
(Sorry for the over-sized images - I'm not aware of any markdown tricks to make them a more reasonable size.)
Yes, it is a chromium bug.
The best workaround is to set it to block type box.
textarea {
display: block;
}

How to select <html> tag in CSS when the source HTML has multiple nested <html> tags?

I'm working on making a dark mode for the Kaplan website tests so I don't blind myself studying.
The following HTML code is representative of the structure of the source, and the tag with id="stylish-23" is what's added by a chrome extension to change the page's CSS styling:
<html> // html 1
<html> // html 2
<html> // html 3
<html> // html 4
<div id="divQuestions"> </div> //actual tag I want to change
</html> // html 4
</html> // html 3
</html> // html 2
<style id="stylish-23" type="text/css">...</style>
</html> // html 1
I put div#divQuestions in the style tag's CSS and it does not appear to have any effect at all. Due to the nature and limitation of the extension, I'm only able to add CSS to the style tag, and the CSS appears to not be able to select HTML tags (or at least when I do, nothing happens). I've noticed that dragging the style tag into html #4 in developer console will properly apply the CSS.
The element in question's CSS from inspect:
My CSS in the style tag:
div#divQuestions {
background: black;
}
Thanks for the help!
#divQuestions selector works for me if I fix the div's closing tag (or even if I don't, as it turns out):
<html>
<html>
<html>
<html>
<div id="divQuestions"> </div>
</html>
</html>
</html>
<style id="stylish-23" type="text/css">
#divQuestions {
padding: 48px;
background: aliceblue;
border: 4px solid blue;
}
</style>
</html>
nth-of-type is a selector that matches the nth element of their "type".
So, you can do this:
html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...
Or, you can do this since you said "multiple nested tags":
html
html > html
html > html > html
...

Elements not showing up and :hover not working on a .svg [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 4 years ago.
I'm trying to make certain paths of an svg change color on hover, but something seems to be really buggy about my code. When I try to add, for example, an inline .svg circle, it doesn't even appear, although text does. Hover doesn't work at all, I've tried a few different ways of doing it.
Here's my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<img style"width: 60%" src="world.svg" />
</div>
</body>
</html>
My CSS:
#map {
background:#3B475C;
position: relative;
width: 75%;
top: 15%;
left: 12.5%;
display: block;
}
.dot:hover {
fill: #000 !important;
}
And a link to my .svg, since it's large: scratchpad.io/anxious-frogs-1845
Here's the general logic behind the code right now:
world.svg is the image in the div. I don't want countries to change color, just pins that I'm putting on top of the map (although even when I try to apply :hover to just the whole thing, nothing happens). I'm trying to apply the "dot" class to all the pins, then in CSS, have all the dots have a hover function. I'm really confused as to why whole sections of code aren't doing anything, especially because they work fine when I've tried putting them in other test programs. If there's a way to maybe put the pins in another, overlaid SVG I could do that, but I'm not sure how to (it doesn't show up if I add a second svg and link it into the HTML) and that still doesn't explain why hover won't work and circles, etc don't show up when I add them to the html.
I'd really appreciate any help, I'm new to html and css (I've only used Java and Python before) and am pretty stuck on this problem.
Short answer: You can't style a SVG via the img tag. You need to put the SVG code inline.
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<svg ...>
<!-- svg content -->
</svg>
</div>
</body>
</html>
Explanation: The img tag renders the SVG as a bitmap, so the SVG elements are not in the DOM and can't be selected through CSS.

I cant put a background in my code in CSS

I want to put a background in my web im just staring with a tutorial my code is like this
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<title>PARIS DROP OUT</title>
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header1">
<h1>THE DROP OUTS</h1>
</div>
<div id="#container_div">
<img id="drop" src="img/SHOCK.jpg" />
<background-image: src="img/background" />
<p class="red">ESTA PAGINA ES DE LOS LOCOS</p>
<p> Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own web site you're going to need to learn HTML and CSS. Fortunately, we can help. </p>
</div>
</body>
MY CSS LOOKS LIKE THIS:
<code> #container_div {
width:1800px;
height: :1800px;
background:red;
I try putting an image it doesn't work either
I have the exact same code that its on the tutorial and I don't see a background no matter what I change
Your div should be <div id="container_div"> (note: without the #)
The CSS selector #container_div means "any element with the id="container_div"
Enjoy!
css code to change background color
Background-color:red;
css code to change background image
Background-image:url();
your css class:
#container_div {
width:1800px;
height:1800px;
Background-color:red;
}

How do I add a border to an image in HTML?

How can I add a border to an image using HTML?
Two ways:
<img src="..." border="1" />
or
<img style='border:1px solid #000000' src="..." />
Here is some HTML and CSS code that would solve your issue:
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />
You can also add padding for a nice effect.
<img src="image.png" style="padding:1px;border:thin solid black;">
I also prefer CSS over HTML; HTML is about content, CSS about presentation.
With CSS you have three options.
Inline CSS (like in Trevor's and Diodeus' solutions). Hard to maintain, and doesn't guarantee consistency: you'll have to check yourself that every image has the same border-width and border-color.
Internal stylesheet. Solves the consistency issue for all images on the page having class="hasBorder", but you'll have to include a stylesheet for each page, and again make sure "hasBorder" is defined the same each time.
External stylesheet. If you include a link to the external CSS file on each page all images with class="hasBorder" on all pages will have the same border.
Example using internal stylesheet:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>
<style type="text/css">
img.hasBorder { border:15px solid #66CC33; }
</style>
</head>
<body>
<img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>
If you want an external stylesheet, replace the <style>...</style> block with
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
CSS
img{border:2px solid black;}
border="1" ON IMAGE tag or using css border:1px solid #000;
Jack,
You can learn a great deal about borders, and how to use them at http://www.w3schools.com/css/css_border.asp. That being said, there are a couple different ways you could accomplish this.
Below is how I generally do it, but reading the documentation on w3schools you may come upon your own desired method.
.addBorder {
/* Thickness, Style, and Color */
border: 1px solid #000000;
}
<img src="mypicture.jpg" alt="My Picture" class="addBorder" />
Edit:
I noticed the original question was not "How to add a border to an image," but instead it was "how to add in a box around an image using html?" The question was re-written by others, so I'm not 100% sure you wanted a border on your image.
If you just wanted a box around your images, you could use a DIV, with it's own styles:
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>
The correct way depends on whether you only want a specific image in your content to have a border or there is a pattern in your code where certain images need to have a border. In the first case, go with the style attribute on the img element, otherwise give it a meaningful class name and define that border in your stylesheet.
as said above simple line of code will fix your problems
border: 1px solid #000;
There is another option to add border to your image and that with photoshop you can see how it's done with this tutorial below:
http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/
The answers above are very good I'm sure. But for dim-wits, like me, I recommend Snagit 10. You can give an image a border in any width, style, and color before inserting it into your webpage. They do a full working program on 30 day trial.