Support Forums

Full Version: How would I integrate CSS with a theme I made?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Sorry if the title sounds a little confusing.

Alright, say that I just made a theme (or template) in Photoshop for a website. In what way would I begin to code this theme? I'm completely ignorant on CSS and I'm trying to learn.

And I've heard some things about Adobe Dreamweaver. Should I use it?
First YES use Dreamweaver. Its a great tool.
To integrate CSS into your webpage is quite simple really.
All you need to do is to edit your index page.
Adding something like below to your header and editing to suit your location and name of your .css file.
<link href="/style.css" rel="stylesheet" type="text/css" />

Next you would need to create the file in question and put all your CSS in there.
Really though. If you are serious about creating a nice webpage then you really should use CSS and something like Dreamweaver.
Now here is a really good start point for learning CSS. http://www.cssbasics.com/
IT may appear quite difficult but once you get used to it, its really not that hard.
Dreamweaver is the same. Difficult at first, but becomes quite simple to use.
I LOVE DREAMWEAVER. I really do.
You just need to refrence it from your page you want it to be used one.
I don't use Dreamweaver because I hate it. I prefer Notepad++ but if you are a beginner then definitely use Dreamweaver.
Notepad++ is good but Dreamweaver is better if you're wanting to code HTML, CSS etc.. Because you can see how it looks as you go along..
/agreed the 'design' or 'split' view is outstanding. However using these programs without HTML and CSS knowledge means you'll not understand the coding behind it all.
Thanks a lot guys.

Also, what resolution should I make the theme. Most people say 1024x768, but isn't that rather small?
I suggest you learn CSS instead of using Dreamweaver...
And use Dreamweaver when you have a little knowledge of the language you are coding in it! Smile
What I did was I sliced the seperate images and integrated them using CSS.
For example, With a background image
Code:
body
{
background-image:url('http://wwwurltobackground.png');
background-repeat:repeat x,y;

Then just use
Code:
position:absolute;
left: ;
top: ;
  width: ;
  height: ;
For alignment purposes.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
Width is explanatory, as is height.

now for the HTML.
Code:
<div id="insert section name">Content</div>
The <div></div> tags define the part of the website you are going to call in the CSS.

For example
Code:
#insert section name{
background-image:url('http://www.contentimage.com/contentbackground.png');
position:absolute;
left: 350;
top: 130;
  width: 676;
  height: 458;
What we did was call the section using #name of div. And then aligned it using the Left, Top, Width, and Height attributes. You can find a list and examples of attributes
Here

Now, combining.
index.html (Click to View)
What we did here was use CSS to align the content box, and to make the text italicized. We also called a background using CSS.