The website says it's supported however the following style does not render.
<style type="text/css">
a[href="#"]{outline:#f00 dotted 2px !important}
</style>
however, the following will render
<style type="text/css">
a[href="#"]{border:#f00 dotted 2px !important}
</style>
Here is my document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link type="text/css" rel="stylesheet" href="../content/style.css" />
</head>
<body>...</body>
</html>
Check whether IE8 is rendering in a compliant mode. If you have something like the following in the your header, then outline will not work:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
IE8 will also default to quirks mode if your doctype tag is incorrect, so verify this as well. Also, if you're using IIS, it's possible that the server is forcing IE7 compatibility mode.
Maybe because the link does not appear in the browser as # but as yourpage.html#
Try using ends-with instead:
<style type="text/css">
a[href$="#"]{outline:#f00 dotted 2px !important}
</style>
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 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.
http://foundation.zurb.com/docs/components/buttons.html
From the doc it is possible to get Custom Color using Mixin. I don't know much about SCSS and trying to get by without using it.
I want Black color buttons instead of the default Blue. It is possible to create some CSS class .black { ... } which will make the button black?
Yes. You can override the css by your own class if you do not know SCSS, though it is recommended to change the SCSS variable value in _variables.scss.
The way for css override is:
create a new css file for example. mystyle.css
And then call the css in the html head after
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/mystyle.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
.small black colour button
<body>
Then your css will override the foundation.css class.
add your css class into the button element in html file.
Please see in the above code.
I think that your error might be that it is being overridden and one of the only ways of doing it even though it is frowned upon is to use !important so you would need to use:
.black {
background-color: #000 !important;
}
Also as you have used !important just for the regular one you also need to add it to your hover method so like this:
.black:hover {
background-color: #ccc !important;
}
Edit
Just found out that you don't even need important though if it starts to misbehave then that is what to do
Here is a fiddle:
http://jsfiddle.net/Hive7/p868s/
I'm trying to use conditional comments to hack IE7 into behaving like a real browser.
But the last few days, IE7 is ignoring conditionals referencing it, and responding only to conditionals targeting IE8.
My header has:
<!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="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
The conditionals are:
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Which is NOT recognized in either IE7 or 8. But if it's
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Then the stylesheet is rendered in both IE7 and IE8.
Any ideas? I'm stumped.
I've had problems with IE8 not reading the IE stylesheet, so now I prefer to add a class for IE on my main stylesheet. It is easier to maintain code with one stylesheet anyway. Paul Irish explains it better but basically you put this:
<!--[if IE]> <html class="ie"> <![endif]-->
where your conditional stylesheet link was and then in your css you add the ie class for every IE-specific change you need. So let's say your padding is normally 6px but for IE you need it to be 4px, your css for that div would look like:
.someClass {padding: 6px;}
.ie .someClass {padding: 4px;}
You could also use a CSS hack to target IE7 only from within your main stylesheet:
*:first-child+html { /* Apply IE7-only CSS here */ }
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;
}