Solved

Using style sheets

Posted on 2006-11-03
8
175 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 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now