Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML class 2: Compatibility, text styling and background colors!
New Posts  All Forums:Forum Nav:

HTML class 2: Compatibility, text styling and background colors!

post #1 of 9
Thread Starter 
HTML class 2 :: Compatibility, Background color and font styling.


This is the second part in my string of HTML tutorials. This is meant for complete novices who have no coding experience.

If you missed the first guide please follow it first, here: clicky

HTML class 2 :: Compatibility, Background color and font styling.

As with any type of development, compatibility is key. This is no different with HTML and CSS, with different browsers supporting different features. You should try to test all your HTML & CSS across all of the main browsers. I test with: Chrome, FireFox, Opera, IE and Safari.

It used to be said that; if HTML5 doesn't work it's IE. This has changed with the release of IE9 though, and the browser support is pretty much the same across board. However there are still some niggles and bugs that lie in some browsers, so test we must!

HTML class 2 :: background color

The code that we used in HTML class 1 made a simple page with some text in the top left. Now, we are going to add some color to it. To do this we must use CSS3 background-color:, property. This is up to date and meets the current standards.

So we take the code in version 0.1 and add the background-color: property to it.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Title </title>
<style type="text/css">
/*CSS GOES HERE*/
body
{
background-color: #EEEEEE;
}
</style>
</head>

<body>
Content goes here!!
</body>
</html>
[/style]

We will focus on the new code,:
Code:
body
{
background-color: #EEEEEE;
}

The word "body" lets the browser know that we want to change an attribute about the body of the page; where the content is. "{" opens the CSS code for editing the body. "background-color:" tells the browser that we are going to change the background color of the page. To finish changing attributes about the page we simply close the bracket like so: }. This MUST be inside the "style" element, or it won't work. Now, color. The color is the 6 leter hexidecimal code. This is the make up of red, blue and green. There are exactly 16,777,216 colors; an unimaginable number. Try it out. Change the numbers. Experiment. Be creative. And finally we end with a ";" which tells the browser we are done adding CSS, or we are going to change another thing about the body. This is essential as you will find out in future tutorials.

HTML class 2 :: Styling text

Now we will move on to the text. The text in ver 1.0 was boring. It was small, black, and probably a horrible font like Times New Roman or Serif (PS never ever use Serif on a Website!)

We are going to change this. But, with CSS you cannot just select to edit "text." It has to be in tags e.g.
Code:
<p> </p>

This is the code for a paragraph. Use of these keeps your work neet and also enables CSS to be used. So, we will go ahead and wrap the text in the body with paragraph tags.
Code:
<p> Content goes here!! </p>

Now we can edit the CSS for it to change color, size, font type, decoration and lots more!

Again this needs to be inside of the style command.
Code:
<style type="text/css">
/*CSS GOES HERE*/
body
{
background-color: #EEEEEE;
}
p
{
font-size: 22px;
font-family:  'courier new', 'monospace', 'times new roman', 'serif';
color: #C3D9FF;
}
</style>

The "p" tells the browser that we are targeting ALL paragraphs. This will be the same for everything in paragraph tags. Then we open the CSS again. Font-size is obviously the font size, font-family is the font. Now, notice how I have four fonts? Well, the browser will try and use font number 1 ie courier new. If the system doesn't have it installed or for whatever reason it fails the browser will attempt to use the next selection ie monospace and so on. If it still fails and can't use anything, then the browser defaults to the standard built in font. You want to try and make sure that this never happens. And the color is obvious. We have now got a nice silver page with some Gmail blue text!

NOTE: the text size is measured in pixels (px). It can also be measured in points(pt).

Notice that after every line is a semi colon. Remember I said they are essential? Take one away and try it.

About colours; usually if you want a colour e.g. look up "blue hexidecimal" and you will find the 6 pin code.

Next week we will cover more text styles, text align, DIV's, and other background styles.

Any questions? Post here or PM me!

Thanks.

Josh

Whole code:
Code:
<html>
<head>
<title> Title </title>
<style type="text/css">
/*CSS GOES HERE*/
body
{
background-color: #EEEEEE;
}
p
{
font-size: 22px;
font-family:  'courier new', 'monospace', 'times new roman', 'serif';
color: #C3D9FF;
}
</style>
</head>

<body>
<p>Content goes here!!</p>
</body>
</html>

Edited by joshd - 3/26/12 at 10:48am
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #2 of 9
Hi there!

Good work man. I really appreciate the effort (and I hope others do to). *Maybe it's time for me to revive my HTML knowledge?* redface.gif:D

I hope you like the first sticky ever in the Web Coding section. biggrin.gif

I suppose it would be nice if you could make a new thread so that you can have a quick description of the tutorials and links to these threads all in one place - sort of like " The Programming Challenge Master Thread". Or if you want, I can do it for you.

Cheers. smile.gif
MacBook Pro 13"
(6 items)
 
 
Desktop
(13 items)
 
CPUGraphicsRAMHard Drive
Intel i5 3210 @ 2.5 GHz Intel HD4000 4 GB DDR3 @ 1600 MHz 500 GB @ 5400 RPM 
OSMonitor
OSX Mountain Lion 13.3" @ 1280 x 800 
CPUGraphicsRAMHard Drive
Intel i5 480m@2.67GHz AMD Radeon Mobility 5650 4GB DDR3 500GB 
OSMonitor
Windows 7 64bit HP 15.6" 1366x768 
CPUMotherboardGraphicsRAM
E7500 Intel...:( MSI GTS250 1GB 2GB 
Hard DriveOSMonitorPower
250GB Windows XP 17" LG CRT 1280x768@85hz 400W 
  hide details  
Reply
MacBook Pro 13"
(6 items)
 
 
Desktop
(13 items)
 
CPUGraphicsRAMHard Drive
Intel i5 3210 @ 2.5 GHz Intel HD4000 4 GB DDR3 @ 1600 MHz 500 GB @ 5400 RPM 
OSMonitor
OSX Mountain Lion 13.3" @ 1280 x 800 
CPUGraphicsRAMHard Drive
Intel i5 480m@2.67GHz AMD Radeon Mobility 5650 4GB DDR3 500GB 
OSMonitor
Windows 7 64bit HP 15.6" 1366x768 
CPUMotherboardGraphicsRAM
E7500 Intel...:( MSI GTS250 1GB 2GB 
Hard DriveOSMonitorPower
250GB Windows XP 17" LG CRT 1280x768@85hz 400W 
  hide details  
Reply
post #3 of 9
Thread Starter 
Quote:
Originally Posted by {Unregistered} View Post

Hi there!
Good work man. I really appreciate the effort (and I hope others do to). *Maybe it's time for me to revive my HTML knowledge?* redface.gif:D
I hope you like the first sticky ever in the Web Coding section. biggrin.gif
I suppose it would be nice if you could make a new thread so that you can have a quick description of the tutorials and links to these threads all in one place - sort of like " The Programming Challenge Master Thread". Or if you want, I can do it for you.
Cheers. smile.gif

Thanks so much unregistered biggrin.gif. I will make the thread some time today, and work on a new tutorial for next week biggrin.gif

Thanks!
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #4 of 9
nice job Josh, i will certainly keep my eye out for next weeks tute thumb.gif
Going to be chaep
(16 items)
 
Wife's Rig
(12 items)
 
 
CPUMotherboardGraphicsRAM
i7-3770k Gigabyte GA-Z77X-UP5 TH MSI GTX460 G.Skill TridentX 2400 2 x 4GB 
Hard DriveHard DriveOptical DriveCooling
Plextor M5p 128GB 2 x WD 500GB Blues LG Prolimatech Megahalems Rev C 
CoolingOSMonitorPower
Arctic F12 CO PWM x 2 Push/Pull Windows 7 64 bit Ultimate LG IPS235V Corsair AX850 
Case
Coolermaster HAF 912 advanced (Asia version) 
CPUMotherboardGraphicsRAM
I5-3570K Gigabyte Z68X-UD3H-B3 Inno3D Ichill GTX660 8GB G.Skill RipjawsX 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 128GB WD black 500GB Liteon Coolermaster Hyper 212+ EVO 
OSMonitorPowerCase
Win 7 ultimate Samsung Syncmaster 932gwe+ OCZ ZT series 550W Coolermaster 410 
CPUMotherboardRAMHard Drive
1.67Ghz Atom stock 1GB DDR2 2 x 500GB Western Digital Cavier Blacks [RAID 1] 
CoolingOSPowerCase
stock DSM3.2 [built on linux] stock stock 
OtherOther
Synology DX510 Expansion unit 5 x 1TB WD Cavier Blacks in a RAID 6 
  hide details  
Reply
Going to be chaep
(16 items)
 
Wife's Rig
(12 items)
 
 
CPUMotherboardGraphicsRAM
i7-3770k Gigabyte GA-Z77X-UP5 TH MSI GTX460 G.Skill TridentX 2400 2 x 4GB 
Hard DriveHard DriveOptical DriveCooling
Plextor M5p 128GB 2 x WD 500GB Blues LG Prolimatech Megahalems Rev C 
CoolingOSMonitorPower
Arctic F12 CO PWM x 2 Push/Pull Windows 7 64 bit Ultimate LG IPS235V Corsair AX850 
Case
Coolermaster HAF 912 advanced (Asia version) 
CPUMotherboardGraphicsRAM
I5-3570K Gigabyte Z68X-UD3H-B3 Inno3D Ichill GTX660 8GB G.Skill RipjawsX 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 128GB WD black 500GB Liteon Coolermaster Hyper 212+ EVO 
OSMonitorPowerCase
Win 7 ultimate Samsung Syncmaster 932gwe+ OCZ ZT series 550W Coolermaster 410 
CPUMotherboardRAMHard Drive
1.67Ghz Atom stock 1GB DDR2 2 x 500GB Western Digital Cavier Blacks [RAID 1] 
CoolingOSPowerCase
stock DSM3.2 [built on linux] stock stock 
OtherOther
Synology DX510 Expansion unit 5 x 1TB WD Cavier Blacks in a RAID 6 
  hide details  
Reply
post #5 of 9
Thread Starter 
Quote:
Originally Posted by stubass View Post

nice job Josh, i will certainly keep my eye out for next weeks tute thumb.gif

Thanks Stu biggrin.gif

Can always rely on you for some nice comments tongue.gif
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #6 of 9
any particular reason to not stay specific to what is accelerated by ms,because a lot of font arent accelerated!sure would like to know why use a font that wont be accelerated by microsoft ,apple (would say linux but i aint sure if they accelerate )ty for info!

arent we supposed to make web page faster?sticking as much as possible to accelerated solution?
post #7 of 9
Thread Starter 
Quote:
Originally Posted by drbaltazar View Post

any particular reason to not stay specific to what is accelerated by ms,because a lot of font arent accelerated!sure would like to know why use a font that wont be accelerated by microsoft ,apple (would say linux but i aint sure if they accelerate )ty for info!
arent we supposed to make web page faster?sticking as much as possible to accelerated solution?

I'm not entirely sure what you mean by that post. Please explain more. I use Linux if that helps.

Thanks for viewing
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #8 of 9
Perhaps drbaltazar is referring to referencing generic font families as a fall back to specific font family names, to insure some measure of compatibility across operating systems?

For example, instead of using:
Code:
font-family: 'courier new', 'times new roman';

you might use:
Code:
font-family:  'courier new', 'monospace', 'times new roman', 'serif';

It also might not hurt to discuss the order of preference for the font-family tag. (Using your example, talk about how if a system doesn't have "courier new" installed, it will attempt to use "times new roman", and if that fails, it will resort to the browser default).
post #9 of 9
Thread Starter 
Quote:
Originally Posted by Warfarin88 View Post

Perhaps drbaltazar is referring to referencing generic font families as a fall back to specific font family names, to insure some measure of compatibility across operating systems?
For example, instead of using:
Code:
font-family: 'courier new', 'times new roman';
you might use:
Code:
font-family:  'courier new', 'monospace', 'times new roman', 'serif';
It also might not hurt to discuss the order of preference for the font-family tag. (Using your example, talk about how if a system doesn't have "courier new" installed, it will attempt to use "times new roman", and if that fails, it will resort to the browser default).

Thanks for the replies. I understand now. Will update the code later, thanks.
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML class 2: Compatibility, text styling and background colors!