General Question

bonus's avatar

What is the difference/relationship between HTML and CSS?

Asked by bonus (538points) June 2nd, 2009

Trying to tweak tumblr.com site with custom design. I am not sure what of the existent code needs to stay or can be removed. When I paste it into notepad++ I can see, when I save it as an HTML file, that some of it is colored but the bulk is plain. I am assuming the colored text is HTML and the rest is CSS.

Observing members: 0 Composing members: 0

10 Answers

jrpowell's avatar

HTML is the structure of the document.

So the HTML would look like.

<H1>Hello World</H1>

And the CSS could be. CSS defines the look.

H1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-size: thin;
border-style: dotted;
background-color: red;
width: 400px;
}

Take a peek here..

http://www.pillowpersuasion.com/dance/blank.html

Look at the source.

dynamicduo's avatar

It’s easy to consider HTML as the content and CSS as what controls the style and position of the content.

Most CSS is contained in seperate files known as stylesheets. These are files that end in .css but are just regular text files. CSS has a totally different markup system than HTML, although it should be noted you can style an HTML element using CSS directly in the element itself (that is, inside the HTML, not in an external sheet).

Once the style is declared and defined, it can be applied. CSS is applied to an attribute either by linking it using a class or an ID, or via the CSS taking control over every default item and styling it as you declare.

Here’s a quick example. Let’s say I wanted to make all of my non clicked links bright green. I would, inside the CSS file, make a statement to override every unclicked link and change it to green via this line:

a {
color:green;
}

But if I wanted to only make links inside a certain DIV green, I have to specify. Let’s say the div I want my links to be green inside of is called “ecosystem”. I would use this CSS code:

#ecosystem a {
color:green;
}

This means that only the DIV that is given the ID (not class, class is represented with a dot instead of a #, classes can be used multiple times, ids only once) of “ecosystem” will have all unclicked links be green. I could make the clicked links a darker green by adding:

#ecosystem a:visited {
color:#336600;
}

Sorry, getting a bit off track with an explanation of CSS there.
With regards to your specific question, the bulk of the CSS is likely in an independent file (it should be, this is good practice). The only CSS bits that should be in the HTML are the import statement for the CSS file and then the ID and Class calls inside the attributes.

With regards to the specific colors in Notepad++, your assumption is incorrect. N++ colors different portions of HTML in different ways. A quick test here shows that plaintext is black, HTML tags are blue, tag attributes are red with their values being purple. CSS is styled as green (and comic sans, urg) in my installation.

wenn's avatar

CSS can be added directly into an HTML file between the <head></head> tags like so…

<head>
<title></title>

<style type=“text/css”>
#div {
margin:0;
}
</style>

</head>

anything between those <style> tags is CSS.

otherwise you can write a CSS file (styles.css), and link it into you HTML page, to do that instead of using those style tags like above you write this…

<link rel=“stylesheet” type=“text/css” href=“styles.css” media=“screen” />

MrItty's avatar

You can also add CSS to individual tags, like:

<h1 style=“color:red”>Danger, Will Robinson</h1>

wenn's avatar

@Mrltty you can add to individual tags, but inline styles are a bad practice, though.

jumpo7's avatar

HTML is Hyper-Text Mark-up Language. It is used as the page building language for everything on the web. Web browser software composes and will display html. By necessity this means there are default formats, colors and styles for the elements on the page. There is also the ability to use attributes to change the formatting and style. It is really simple to learn as it is not a true programming language, but a collection of tags that you generally enclose around content. This is the way the web started.

CSS is Cascading Style Sheets. Today everyone (or most everyone) uses CSS to style the html. This allows the application of styles from a global to local level and all the advantages that it allows to make changes to format across any number of pages. As many of the fine examples in other comments show, you can make a style in the style sheet section and then apply that to one or more html tags. Using inline styles (local) is considered bad, but sometimes can not be avoided.

An excellent book on html and css is elizabeth castro’s Visual Quick Start Guide to HTML, XHTML and CSS
Amazon:
http://www.amazon.com/XHTML-Sixth-Visual-Quickstart-Guide/dp/0321430840

There are many excellent online resources as well some included in the other comments above. My favorite site for CSS is the css zen garden.
http://www.csszengarden.com

MrItty's avatar

@wenn I never said you should, only that you could, since I’d seen the other two methods of doing it already mentioned…

wenn's avatar

@MrItty and i agreed that yes you can do that, and then added you shouldn’t.

bonus's avatar

Hey, everybody. Was up all night reading about this stuff and just woke up again @ 1pm.

Thanks all of you. This gives me a lot to chew on. I will try to do so a little later today.

SecondGlance's avatar

jumpo7 answered it best. HTML is a language, and CSS is formatting information.

For a site that has only one page, there’s no need for a css, just code everything you need on the page in HTML. But for sites with many pages, and/or sites where you might add or change content regularly, you’d want to use a css so you don’t have to type formatting info into every page.

A css can save lots of time (and space) because instead of defining a font, or background image, or a hundred other things on every single page, you just create one css file with that info, then refer to the css from each page on your site. Then each page will have exactly the same font, background image, etc.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther