Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Using style sheets

Posted on 2006-11-03
8
Medium Priority
?
184 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 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

722 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