Solved

Using style sheets

Posted on 2006-11-03
8
180 Views
Last Modified: 2010-04-09
Hi,

I am new to HTML and would like to specify what font to use for h1, h2, etc.

Is this something I should do in the style.css file?  Where do I find that sheet?

How do I use this line?

  <link href="style.css" rel="stylesheet" type="text/css" />
Thanks.
0
Comment
Question by:ba272
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 33

Accepted Solution

by:
hongjun earned 250 total points
ID: 17872183
Create a new css file and name it style.css
Place it in the same folder as your html file.

To specify h1, h2, etc..
Type this in your css file


h1 {
    font-weight: bold;
    font-size:20px;
    font-family: Verdana;
    color: #BC8F8F;
}

h2 {
    font-weight: bold;
    font-size:30px;
    font-family: Verdana;
    color: #BC8F8F;
}


So next time you use <h1> or <h2>, it will follow the css.
0
 
LVL 33

Expert Comment

by:hongjun
ID: 17872186
For more information,
    http://www.w3schools.com/css
0
 
LVL 30

Assisted Solution

by:callrs
callrs earned 250 total points
ID: 17872198
<style type="text/css">
h1, h2 {
font-family: Georgia, Veranda;
color: blue;
}
h3 {
color: red;
text-decoration: underline;
}
</style>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

------
Basic tutorial here:
http://www.cssbasics.com/chapter_10_css_font.html     CSS Font Properties

There's Internal, External, and Inline CSS:
http://www.cssbasics.com/chapter_1_introduction_to_css.html 
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:callrs
ID: 17872225
You can also place external css file in a different folder. e.g.
 <link href="../style.css" rel="stylesheet" type="text/css" />  (relative path, up one folder)
 <link href="/css/style.css" rel="stylesheet" type="text/css" /> (absolute path, from root)

http://www.ibdhost.com/help/path/       Absolute vs. Relative Paths


0
 
LVL 30

Expert Comment

by:callrs
ID: 17872233
Can also @import a sheet:
http://www.htmlhelp.com/reference/css/style-html.html  Linking Style Sheets to HTML
0
 

Author Comment

by:ba272
ID: 17878863
okay, I have that indent feature working.  But I still wonder where the <h1> and <h2> are defined.

My new style.css file has one element defined: <p>

That naturally overrides the default behavior of <p>

But I wonder where the CSS file defines the header definitions.  Any ideas?

Bob
0
 
LVL 30

Expert Comment

by:callrs
ID: 17879694
It's up to you to define them, using one of three methods:
Inline <h1 style="...">
Internal style sheet: as in my demo above.
External style sheet: place the code that's between the <style>...</style> tags into a css file.

You can add as many styles internally or externally as needed.
0
 
LVL 33

Expert Comment

by:hongjun
ID: 17880806
have you tried mine?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question