I have some code samples which I want to publish in an HTML document. I'm wrapping them with <code>, tags but I'd like them to be styled such that line breaks are preserved. I can do this by also enclosing them with <pre> tags, but I'd prefer to use CSS.
I've tried the following in IE7 (which according to this reference should work), but with no joy (line breaks are stripped):
code {
white-space: pre;
}
Is this possible?
Are you sure you're not doing something wrong? This code works for me on IE7:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
code { white-space: pre; }
</style>
</head>
<body>
<code>
function() {
alert('yay');
}
</code>
</body>
</html>
Check your doctype is valid and on the first line. Maybe it's slipping into quirks mode?
Related
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
I'm trying to create a presentation using Slidy, and I want to increase the default font-size.
Slidy presentations have default styling set in this CSS file, which includes the line font-size: 14pt; in the body element.
Here's a minimalist Slidy presentation where I override this font size in a style block in the page head:
<?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" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
body {
font-size: 128pt;
}
</style>
</head>
<body>
<div class="slide">
<p>Some text that ought to be bigger.</p>
</div>
</body>
</html>
In Internet Explorer, the text is large, as I expected. Firefox and Chrome display small text however. They definitely notice the style block in the page (I can change font-family, or other CSS properties here); they just doesn't seem to want to change the font size.
How should I specify that I want a large default font size?
#f.n174's answer is probably the correct way to fix things for a general xhtml page. Slidy seems to be doing something odd with CSS evaluation, so we need to expoit a trick to change the default font size for all types.
The contents of a slide are contained in an item of class slide, so we can change the font-size for all text tags at once using:
.slide {
font-size: 128pt;
}
This works in Firefox, Chrome and Internet Explorer.
add style="font-size:128px" in your body element as an attribute if this not worked add the code in your <p> element
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
You can save the code below and try it out.
In firefox,it's full browser grey,but in IE(IE7 to be exact),it's not working.
<!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>
<style text="text/css">
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">
<div class="overlay"></div>
</body>
</html>
IE doesn't recognize the CSS color name grey. Try using a hex color, e.g., #ccc, and it will work. Alternatively, using gray (with an 'a', not an 'e') also works.
Note that this is standards-compliant, because W3C doesn't say anything about supporting alternate spellings of gray, and gray is indeed the color name according to the spec for CSS3.
Try adding this to your style defs:
html, body {
height: 100%;
}
On IE, body doesn't extend the full height of the viewport by default, and your overlay's container is body, so...
Edit Just tried it, and yours worked without the above, must be because body is statically positioned. Anyway, John Feminella figured it out; see his answer.
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;
}