Hello all,
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 dont know how to make the font bold, can anyone help me?
Thanks in advance!
You'd use font-weight: bold.
Do you want to make the entire document bold? Or just parts of it?
You can use the CSS rule font-weight: bold;
I would advise you to read the CSS beginner guide at http://htmldog.com/guides/cssbeginner/ .
<!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>
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" und "name" attribute. Have fun!