Incorporate CSS into (X)HTML

Discuss how to write good code, break bad code, your current pet projects, or the best way to approach novel problems

Incorporate CSS into (X)HTML

Post by Blackening17 on Sat Jan 14, 2012 8:23 am
([msg=63679]see Incorporate CSS into (X)HTML[/msg])

Hello HTS members, and thank you in advance for all the help you may give to me.

I made this post because I have a doubt how to incorporate CSS into HTML. My knownledge of HTML is not very extensive although i know i can create a decent web page on my own. Recently i've been noticing that programmers instead of using the HTML codes to "style" their pages, they're starting to use CSS(or maybe they already used it when i learnt HTML and i didn't notice it)... After some pointless research i though i could get some help in here. What i ask for you to do is to post an example of a website written mainly in HTML code with CSS styling, that way i can figure it out on my own (that's what i like to do :)).

I apologize for my English, and if any of the terms i used are wrong (pls feel free to evidenciate them so I an learn from my own mistakes).

And again, Thank You...
Blackening17
New User
New User
 
Posts: 2
Joined: Tue Jan 10, 2012 5:28 pm
Blog: View Blog (0)


Re: Incorporate CSS into (X)HTML

Post by DegreesKelvin on Sat Jan 14, 2012 12:00 pm
([msg=63683]see Re: Incorporate CSS into (X)HTML[/msg])

I think about everyone has been using CSS for quite some time now, to tell the browser to use a specific CSS file you use "<link rel="stylesheet" type="text/css" href="mystyle.css" />" or the tag "<style> /* stuff */ </style>" to write it directly into the file.
[14:33:02] <FlutterBurp> Dear princess celestia, i finally found out what Alt + F4 Does, i lost a important document thanks to you. Yours pissed off Twilight sparkle.
User avatar
DegreesKelvin
New User
New User
 
Posts: 32
Joined: Wed Jan 04, 2012 6:36 pm
Blog: View Blog (0)


Re: Incorporate CSS into (X)HTML

Post by Blackening17 on Sat Jan 14, 2012 2:23 pm
([msg=63684]see Re: Incorporate CSS into (X)HTML[/msg])

I seem to be able to figure out to "style" with CSS everything except a image. could i get an help on this pls...
how to center a image using CSS (i'm used to using <center></center> tags xD)...

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Glider.svg/140px-Glider.svg.png"/>
Blackening17
New User
New User
 
Posts: 2
Joined: Tue Jan 10, 2012 5:28 pm
Blog: View Blog (0)


Re: Incorporate CSS into (X)HTML

Post by conscience on Sat Jan 14, 2012 3:04 pm
([msg=63685]see Re: Incorporate CSS into (X)HTML[/msg])

Check out the good old and often flamed http://www.w3schools.com ;)
Let him who has understanding recount the number of the beast, for it is a human number: His number is 0x029A.
conscience
Poster
Poster
 
Posts: 250
Joined: Thu Jan 08, 2009 9:05 pm
Location: 127.0.0.1
Blog: View Blog (0)


Re: Incorporate CSS into (X)HTML

Post by blue_hat on Fri Jan 20, 2012 12:00 am
([msg=63777]see Re: Incorporate CSS into (X)HTML[/msg])

You can apply styles to an image in three ways:
1. Directly in the image tag e.g <img src="img_url" alt="alternative text" style="width: 100px; height: 100px... [virtually all other applicable css parameters here]" />
I rarely ever use this as it tends to take up a lot of space in the code of the page.

2. In the head of the page <head><style="text/css" />img {width: 100px; height: 100px; [any other applicable css parameters here]} The thing about this is, it applies those styles to all the img tags on the web page (except those with styling determined by 1 above). This can be both good and bad, it keeps the images uniform and changes are made in one place. This applies the same strict set of styles to all the images on the page but is limited to only the page it is on (not many cases where you would want that).

3. In an external stylesheet (my default option). This is easier to use as far as I am concerned. This can be achieved by linking the stylesheet to the page in the head by typing: <link rel="stylesheet" href="stylesheet_location" type="text/css" media="screen" charset="utf-8" />. That one sheet will determine the layout of all the pages in the website that have this stylesheet attached to it. Good if you want to maintain site-wide uniformity in design and layout and you can also carry out sitewide modifications from this one file. You can also go further by determining "divs" (this can also be done in 2 above) that are just "containers" on the page with specific styling determined in the stylesheet or in the div itself:
e.g. #divName {width: 800px; margin: 0px auto; (this centers the container [other attributes here] }. This is a div id and ".divName" is a class - classes can be used more than once on the page while ids are used only once (CSS rules). The can be achieved in the div on the page itself by: <div style="width: 800px; margin: 0px auto; (this centers the container [other attributes here]". In the page the style is applied only to that page and in stylesheet it is applied to all the pages with that div.

CSS attributes can be applied to almost any (X)HTML tag by <[html_tag_name] style="CSS attributes here"></[html_tag_name]>.

Hope I was helpful in outlining the principle to you. I'd be happy to help further with HTML and CSS. You can always send me a message or IM me.
User avatar
blue_hat
New User
New User
 
Posts: 8
Joined: Thu Jul 03, 2008 1:47 pm
Location: Ja
Blog: View Blog (0)



Return to Programming

Who is online

Users browsing this forum: No registered users and 0 guests