Prologue
Blogger is a great tool. You are here because you want to style your blog with CSS. In page CSS, separate CSS, in-tag CSS... Where should I put my CSS?Examining the available tools
I will be talking about which solution are used and the one I used. Let's talk about some ways you can include your CSS in your HTML.- The STYLE tag This is the first thing I learned at school, the style tag:
- In-tag STYLE attribute It is possible to style an element in its tag by attribute.
- Seperate *.css file This is the solution used in this website. I have a seperate stylesheet that I link to this blog using:
- *.css in a *css file with @IMPORT (CSS-ception) You can use this to include *.css in another *.css. It goes like this:
<head> ... <style> /*insert CSS here*/ </style> ... </head>
Why/Why not?
In my opinion, this is the most simple way to start TESTING. Philosophicly, you shouldn't mix in the display and content. and it is easier for others to 'see' your CSS (if you do mind that detail). And the fact you are storing the CSS in Blogger, you are obliged to edit it using the plateforme. Many use this method because they don't know where to store their Stylesheet.<div style="display:block;"> FooBar </div>
Why/Why not?
This is also good in testing. I highly don't recommend using this kind of styling, because you can easily lose track of your your settings. Plus, you mix display and structure. I only use this method as a last resort. If you want to apply a style on one unique element, give it an id, if you feel it's too much then maybe you have to think your design over.<head> ... <link href='myStyleSheet.css' rel='stylesheet' type='text/css'/> ... </head>
Why/Why not?
This for me the cleanest way to style a page. No HTML, no bloating, and a bliss to manage. I will talk later on why it is so important to not bloat your HTML code with CSS. The only tricky part is... the storage. Where did I store the *.css file? This will be uncovered later in this article...@import "newstyles.css";
Why/Why not?
I never used it because I never knew this existed up until now. If you are really keen on segmenting and optimizing your code, you can use this as if you are coding a header like if you are coding C.My example with Dropbox
The third solution is the one I used. I could've used it with the @import solution like I said, but I think this project (this website) isn't large enough for that much structure, maybe one day... What I did with Dropbox is easy to guess. I dropped my *.css file in my Public folder where Blogger can fetch it. The Public folder is a default folder, so you don't need to configure anything. Once your file is uploaded link it to your blogger template using the link given by Dropbox by right-clicking then "Copy link(...)". You now know how to make your code more readable!Why should you go through all this?
If you want to keep your blog going on, why not design it properly? Imagine yourself in the future, would your future self remember everything? Well, maintaining a badly structured code is nerve wrecking. You don't think you will be able to manage a really bloated HTML code?What's convenient with my setup s that I don't Blogger's platform to edit the display of my website! I have Dropbox installed in my computer (you don't NEED too but it's really convenient). All I do is open the stylesheet and edit it with Notepad++. Refresh. Voilà! Instant results. Also it doesn't have to be only Cascading Style Sheets, you could store images, etc.
No comments:
Post a Comment