Solved

Using style sheets

Posted on 2006-11-03
8
176 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
gif banner animation loads randomly in mobile 3 83
Centering a nested div 16 59
How can I do a Select All on this page? 8 36
Popup to change image and store url in database 2 31
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…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

867 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