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;
}
Related
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
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?
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?
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>