Forum Moderators: not2easy
This is my first time trying to write my own stylesheet so if I say anything bizarre please forgive me. I decided to write my own stylesheet for my blog, since it's starting to get a little cluttered there. My blog is on Blogger and I never really thought about writing my own sheet since I wasn't aware I could link to one from there.
Now that I know I can I am somewhat puzzled on how to write it. I know a stylesheet is ONLY for CSS elements, so one of my questions is this ... on my blog I have a related posts code in between the <head> tags and the code contains a style and a script - would I put the style in my stylesheet and leave the script part in my blog code? Also, if I put the style in the stylesheet would I then delete the style portion of it from the code in my blog?
That's just one question. I have many more, but let's start with that one first.
Thank you. I look forward to reading your replies.
The problem is that customizing the output of a CMS is about the hardest thing there is in CSS country. It would be easier to gain some experience with a normal site first and only them move to this.
Still to answer your question:
The javascript: hard to tell unless you know what it does.
The CSS code can go
- in a separate file <link>ed from the <head> of the html
- inside the <head> in <style> tags
- inline in the code with style="" attributes on the html elements
I'd go for the separate file, linked from the <head>. The reason is that the CSS that way can be cached and doesn't need to be sent on every html hit (speeding up things).
Ultimately, you will want an external 'master' stylesheet that all (or most) of the pages on the site would use. For learning and fixing mistakes in (X)HTML and CSS much faster, I always recommend embedding the styles in the head. Much faster to move back and forth from rendered page to all code involved. Tweak the CSS, scroll down and tweak the HTML - all right there on one page. Save, refresh the rendered page, and see what you've done. After perfecting the page, simply strip out the CSS, move it to an external stylesheet and link to it. It can be called for every page on your site.
Even now, if I am coding from zero - not reusing established designs or layouts, I will do the initial coding this way. Even with multiple, high-res monitors, it's just easier for me to do ground-up layout by starting with embedded CSS. It's just a temporary convenience that works for me.
When making your 'master' stylesheet, keep in mind that it is likely to be the basis 'template' of the entire site. (You may use multiple external stylesheets for varying purposes, but that is beyond the scope of 'starting to learn'.)
I keep an eye on two very different aspects of 'global' declarations.
1) * * * Be very reluctant to making declarations for elements that do not use id or class. For example, if you use -
p {
color: red; font: 600 1.1em/1.4em Verdana, Arial, san-serif; border: .1em solid #000; margin: 2em 10%; padding: .5em;
}
- you are in deep trouble, because <p> is global and every paragraph on every page will consider this to be the default rendering that you want.
It is much safer to nearly never make a declaration to a naked element. Make that p.block-one instead. This leaves the default rendering of <p> untainted and will save you much misery.
2) * * * Though I want to avoid global styles that will haunt me forevermore, I want to create global styles that I can use again and again.
Example 1:
.center {
text-align: center;
}
.dark-red {
color: #900;
}
I consider these to be 'global' declarations. Although, by themselves, they do nothing - you will encounter a need for certain minor styles over and over. Declare these as standalone classes and they will always be handy.
Example 2: I almost never declare a background to any container anymore. I want the flexibility of reusing that same container, but without anyone really noticing. If it is a straightforward container that may serve several purposes, I may break out the margin as a separate class option also.
.container {
font-size: 1.2em; border: .1em double #faebd7; padding: .5em;
}
In the HTML however, I will call:
<div class="container bg-c margin-c">Text</div>
I have my 'template container, but from my option of backgrounds, I am asking for bg-c. If the background was declared in .container, I am probably going to create a new container declaration or hack at adding !important or some such just to change the background. I am asking also asking for the class margin-c, which may be {margin: 2em 10%;} - whatever.
The example above calls three classes. The 'base' container that I expect to use over and over, but with two 'global' declarations that do nothing by themselves, but add a lot of power and flexibility to .container when called upon. A few backgrounds, margins, borders, or what-have-you takes up very little space in the stylesheet, offers tremendous flexibility in manipulating presentation, and can ultimately reduce the size of the stylesheet because you are not creating new containers one after the other (which may have very few differences but still add a lot of code).
