Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Using style sheets

Posted on 2006-11-03
8
Medium Priority
?
187 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
  • 4
  • 3
8 Comments
 
LVL 33

Accepted Solution

by:
hongjun earned 1000 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 1000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

783 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