This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course

992 points
7570b13b6d94f30f10f9d9350131dafe?s=140&d=retro
Submitted by
pgjones
about 3 years ago

General HTML5/CSS3 Question: How to link them together

It is easy to see how these two aspects of page development work here, but I am having trouble making them work together anywhere else. The main issue seems to be the from the HTML doc to the CSS doc. Let's presume that both docs are in the same folder on my desktop and the file names are right.
I am also using a crappy work computer that won't let me update or install any browsers.
I have also tried linking two docs together on scratchpad.io. A really neat site for practicing HTML, but I'm also supposed to be able to use CSS there. Do you see what I mean? At first, I thought I had to put both CSS and HTML in the same doc, but no dice.
Any help would be greatly appreciated,
Yours in learning,
Peter


10 votes

permalink

HTML5 is just HTML with some new elements to help create more semantic documents. HTML tags when structured correctly give a document meaning. This has always been the case with HTML (see 'document outline'), only now we have better tools to work with. Advise don't try to learn HTML5 all on its own. Study and learn ALL of HTML, and it will be easy enough to see where HTML5 fits into the bigger picture.

CSS3 is just CSS with some new properties to give designers more options and possibilities in their presentation. Previous to CSS3, we had to rely on JavaScript (in particular, jQuery, MooTools, etc.) for any special effects such as transitions and opacity, and we had to rely on SVG for color gradients, among other things. CSS3 packs a lot of these things into the browser now, so scripts don't need to be employed just for the purpose of presentation. Again, don't try to learn just CSS3, but learn all of CSS and you will soon see where CSS3 fits into the big picture.

There are three basic ways to introduce CSS in an HTML document:

External style sheet (using a <link> tag in the <head>):

<link rel="stylesheet" href="stylesheet.css">

Embedded style sheet (using a <style> element in the <head>):

<style>
/* CSS selector rules go here */
</style>

Inline styles (using the style="" attribute in the tag):

<p style="color: red">Some red text</p>

The above are listed in order of preference. External is most preferred and recommended since it can apply to countless documents. Embedded follows a distant second, and inline a far distant third (as in least preferred and not recommended in production work).

In-page style rules apply only to that page, and no others. To share the rules across several documents (without an external style sheet) would mean having to write all the style rules into every document. On a growing site, this will quickly lead to problems with consistency, typographical errors, and too much customization that will eventually go awry. All the style rules in one place makes for a more consistent experience for the user, a more consistent presentation site wide, and a whole lot easier revision cycle when that time comes.

7821 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

3 Comments

7570b13b6d94f30f10f9d9350131dafe?s=140&d=retro pgjones about 3 years ago

Thanks Roy! I know I still have a lot to learn, but at least now I can play around a bit. This information helped a lot. Cheers.

060597faf80648acf9c3ddfa9f688c27?s=140&d=retro Krishan Patel over 2 years ago

Another Thanks to Roy you helped a lot :)

A86f7a545bb298e9d17b1b0ba5ae2a31?s=140&d=retro Sergeant Shift over 2 years ago

nice way to put it. :) :) :)
(without giving the answer).


3 votes

permalink

For the record, I have taken my next step in HTML5 and CSS3 by purchasing my first Dummies book :)

992 points
7570b13b6d94f30f10f9d9350131dafe?s=140&d=retro
Submitted by
pgjones
about 3 years ago

1 Comment

4f7cba80eec2b50003003ef2_731989818 Abram almost 3 years ago

okay, this is the first comment on codecademy that i actually find hilarious.