Show Posts
391
Off Topic / Re: How to resize border in HTML/CSS and center images?
« on: November 22, 2013, 11:13:40 PM »yeah, i'm pretty new to it. also, the image just completely disappeared. i don't quite understand what a stylesheet is.Think of it this way. the .html file, the thing you're writing all the markup in, is a file that contains all the content you will see on the page, from paragraphs to images to links and so on. A Cascading Style Sheet, or .css file, is the file that changes the aesthetics of the page. Aesthetics include anything from the color of the text, to the border around a picture. Basically, anything that's not content.
The reason for writing things in a .css file as opposed to writing in a <style> tag is that if you have multiple pages that use the same CSS rules, you only have to change one .css file instead of multiple .html files because all the .html files link to the one .css file.
the image is still centered to the left.
Code: [Select]
<!DOCTYPE HTML>
<html>
<head>
<title>Toons Revolution</title>
<style media="screen" type="text/css">
body{background-color: lightskyblue;}
#intro{text-align: center;}
#header-image{display: block; margin: 0px auto;}
</style>
</head>
<body>
<img src="http://toontownrevolution.com/img/header.png" width="400" height="200" id="header-image"/>
<p id="intro">A fansite for the website <a href="toontownrevolution.com">Toontown Revolution</a></p>
</body>
</html>Instead of putting all your css inline, meaning in each individual html tag, put it in the style tag in <head>, that's what it's there for. What I did was I put all the css into one style tag, all nice and tidy, like I said, and demonstrated a key point in CSS: id's! (and classes, but that's for later.)
If you notice in the style tag, "intro" has a '#' before it. That means it's telling the css that that thing is an id. An id is an attribute you can add in any html tag that allows you to individualize something for the css. An example may be: you have 5 <p>'s, but you only want one of them to be colored red. If you tried to do
Code: [Select]
p{color:red;}it would color ALL the <p>'s red. So what you need to do is seperate one <p> from the rest. This is done by using id's. So, make that one <p> look like <p id="red">. Now, in the css, you can do this
Code: [Select]
#red{color:red;}also this would be so much better with <div> organisation, but like i said, you're a beginner, and that's for another time.
Er, I digress. so anyway, i recommend you watch some videos or something, cuz these are all questions that can be answered fairly easily after a day or so of studying html/css.
