/    Sign up×
Community /Pin to ProfileBookmark

Hi all
Im new to all this, which is the best way to use CSS with HTML ie applying a style sheet !!!

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@FangMar 25.2007 — External style sheet:

html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="StyleSheet" href="mystyles.css" type="text/css">
</head>
<body>
<h1>My site</h1>
<p id="firstparagraph">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Nam liber tempor *** soluta nobis eleifend <span class="important">option</span> congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</body>
</html>
CSS mystyles.css:body {
font:0.7em/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000;
background:#fff;
}
h1 {
margin:1em;
padding:0;
color:#9cf;
background: url(banner.jpg) center no-repeat;
font-size:300%;
text-align:center;
border:1px solid #666;
}
#firstparagraph {
font-size:120%;
}
.important {
font-weight:bold;
color:#f00;
background:#cff;
}
Copy linkTweet thisAlerts:
@CreativeCozzaMar 25.2007 — There are different ways to use CSS. These are Inline, Internal and External.

Start with External.

Open up a new document and create the following [B]AS IT IS[/B]. You don't need to use the HTML tags. Save it as mystyle.css :

[CODE]
h1 {font-family: Arial; color: green; font-weight: bold}
p {font-family: Courier; color: red}
[/CODE]


Create a dummy website (you can change it to anything) like this. In the Header section, you have to insert a link to the CSS file. Save it as first.html

[CODE]
<HTML>
<HEAD>
<TITLE> CreativeCozza's Cool CSS </TITLE>
[COLOR="Red"]<LINK REL="stylesheet" HREF="mystyle.css" type="text/css">[/COLOR]
</HEAD>
<BODY>
<H1> Hello World!!! </H1>
<P> How are you? You there? </P>
</BODY>
</HTML>
[/CODE]
Copy linkTweet thisAlerts:
@ray326Mar 25.2007 — c/Internal/Embedded/

And in general you want to think:

External - applies to entire site, linked in every page

Embedded - applies to something special on one page

Inline - applies to something special related to a single element on one page
Copy linkTweet thisAlerts:
@felgallMar 25.2007 — While using embedded and inline styles makes it easier to test the effect of those styles while developing the stylesheet, they are best moved externally once you finish the page.
Copy linkTweet thisAlerts:
@CreativeCozzaMar 25.2007 — While using embedded and inline styles makes it easier to test the effect of those styles while developing the stylesheet, they are best moved externally once you finish the page.[/QUOTE]

I have never used the other versions of CSS they are too awquard to edit.
Copy linkTweet thisAlerts:
@WebJoelMar 25.2007 — I have never used the other versions of CSS they are too awkward to edit.[/QUOTE] Yeah, -seems that way if you only have a one, two or maybe five-page document with a fairly small amount of styling (a dozen or so lines?).

But when you have a 20, 30 or 50-page web site and the client decides to change a branding logo, change a font used throughout, augment a border or padding used on every page, -then [I]external[/I] CSS is the lifesaver. -Make just that change or those requested changes to [I]one file[/I] (the external CSS), and if your HTML 'bare bone template' is the same for all pages (and it should be, -there should be a seperation of html from css), -then the changes to the style sheet 'cascade down' though [I]all[/I] the html-pages.

-It is really awesome, -makes you the code appear to have 'changed' all 20 or 50-whatever pages asap in just a minute or two of 're-coding'. ?
Copy linkTweet thisAlerts:
@disgracianMar 26.2007 — External CSS is really the entire point of having CSS in the first place, otherwise you're left with the same unbearable situation we were trying to escape from in the days of the [b]<font>[/b] tag: manually carrying out changes on potentially hundreds of files instead of one.

Cheers,

D.
Copy linkTweet thisAlerts:
@felgallMar 26.2007 — Your page is cleaner for the search engines to figure out what it is about once you remove all the stylesheet info into a separate file.
×

Success!

Help @austinGBR spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...