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?
Related
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>
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
This is my HTML:
<!DOCTYPE html>
<html>
<style>span {text-decoration: none}</style>
<body>
underscored text <span>without underscore</span>
</body></html>
The <span> remains underscored. What is a possible workaround (without JavaScript and without changing the HTML)?
Try this
<!DOCTYPE html>
<html>
<style>span {text-decoration: none;display: inline-block;}</style>
<body>
underscored text <span>without underscore</span>
</body></html>
Link to original answer : https://stackoverflow.com/a/10478962/662250
Working fiddle
Set it up so that the anchor tag has no underline, but the span DOES have an underline
<span>underscored text</span> without underscore
a{
text-decoration:none;
}
a span{
text-decoration:underline;
}
I don't think there is a way so here is a dirty hack:
<html>
<style>
span {border-bottom:1px solid white;}
a {text-decoration: none;border-bottom:1px solid blue;}
</style>
<body>
underscored text <span>without underscore</span>
</body></html>
... only because you mentioned you can't change the HTML.
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.
I'm very new to HTML and CSS and I was just wondering how I could make my font bold using CSS.
I have a plain HTML page that imports a CSS file, and I can change the font in the CSS. But I don't know how to make the font bold, can anyone help me?
You can use the CSS declaration font-weight: bold;.
I would advise you to read the CSS beginner guide at http://htmldog.com/guides/cssbeginner/ .
You can use the strong element in html, which is great semantically (also good for screen readers etc.), which typically renders as bold text:
See here, some <strong>emphasized text</strong>.
Or you can use the font-weight css property to style any element's text as bold:
span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
You'd use font-weight: bold.
Do you want to make the entire document bold? Or just parts of it?
Sine you are new to html here are three ready to use examples on how to use CSS together with html. You can simply put them into a file, save it and open it up with the browser of your choice:
This one directly embeds your CSS style into your tags/elements. Generally this is not a very nice approach, because you should always separate the content/html from design.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
</head>
<body>
<p style="font-weight:bold;">Hi, I'm very bold!</p>
</body>
</html>
The next one is a more general approach and works on all "p" (stands for paragraph) tags in your document and additionaly makes them HUGE. Btw. Google uses this approach on his search:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<style type="text/css">
p {
font-weight:bold;
font-size:26px;
}
</style>
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
You probably will take a couple of days playing around with the first examples, however here is the last one. In this you finally fully seperate design (css) and content (html) from each other in two different files. stackoverflow takes this approach.
In one file you put all the CSS (call it 'hello_world.css'):
p {
font-weight:bold;
font-size:26px;
}
In another file you should put the html (call it 'hello_world.html'):
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" />
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Hope this helps a little. To address specific elements in your document and not all tags you should make yourself familiar with the class, id and name attributes. Have fun!
Use the CSS font-weight property
Selector name{
font-weight:bold;
}
Suppose you want to make bold for p element
p{
font-weight:bold;
}
You can use other alternative value instead of bold like
p{
font-weight:bolder;
font-weight:600;
}
font-weight: bold
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
body
{
font-weight: bold;
}
</STYLE>
</HEAD>
<BODY>
Body text is now bold.
</BODY>
</HTML>
font-weight: bold;
You could use a couple approaches. First would be to use the strong tag
Here is an <strong>example of that tag</strong>.
Another approach would be to use the font-weight property. You can achieve inline, or via a class or id. Let's say you're using a class.
.className {
font-weight: bold;
}
Alternatively, you can also use a hard value for font-weight and most fonts support a value between 300 and 700, incremented by 100. For example, the following would be bold:
.className {
font-weight: 700;
}