I was a painter in my childhood and love to draw and cleared some exams for it as well when I was about 6-13 years old. Now after so many years without painting and not drawing single elements on the page when I met with CSS/CSS3 I went crazy and wanted to learn it more and more to become awesome CSS designer.
You should be familiar with three types of which CSS comes in:
- Inline (write CSS with style attribute inside HTML tags)
- On Page (adding CSS with style tag inside head tag on each page which will be applicable to that page only)
- External (create separate CSS file with .css extension and load it inside head tag of html page)
what we all do while writing CSS as Beginner but shouldn’t –
we love to just go with flow and put whatever we like just to get ahead in our development and it is very big mistake i must tell you. This thing will not impact much in start but when application will go on and you find your own not working as excepetced because you designed it on perticual tag and now you need to redo everything.
if you go on with it and do multiple patches you will face one big issue at the end which can result in client frustration and result in a miserable condition for you only from your employer.
Why External Approach –
I will always recommend this approach because there is something which no one will tell you but you will face issues while doing another two approach and get stuck with it.
In External CSS you create a single file for it and use it everywhere which will give great power to change single file and code in it and will help you design the whole site with it.
Here you will write styles for header tags, body, anchor tag, p tag etc. and it will apply everywhere. You will be able to write CSS for inner tags by using different CSS selectors. Also, this can be done in On Page CSS but external will allow for whole application from one page.
Small but tricky benefits of External Approach –
I come from asp.net MVC background and let me tell when I was looking at some colleagues’ CSS when they do it On-Page/internal they stuck on one issue and which is really SHOUTING you to use external CSS.
When you use inline CSS or On Page, you will need some time to create @media for your CSS and here comes the issue. @ Sign is used for razor context and it was making my friend to scratch their hair.
Then you go for finding out solution end up doing some messy patches and stuff and spend days fixing it will make your bad impression when your code will be checked by seniors.
And I have seen many places that @ Sign is used by server side language in HTML pages and I think it will create an issue for you in future. So, why not go with solid structure.
Upgrade CSS –
Here one more point is that I must mention about the update. When the client will come for theme update or massive design change then you will now be stuck for days or months if you had written inline or On Page CSS.
This point is a really solid point for you to write better CSS as Beginner.
One upgrade I must mention about CSS Preprocessors. You must have heard about some Preprocessors of CSS example SASS, LESS, STYLUS etc. so when you go advance and learn and write CSS in Preprocessors it will be so easy for you to upgrade current CSS files if its external.
you can find some good books on amazon as well.
for amazon USA
for amazon India
There are so many other tricks and understanding about CSS as Beginner will cover that in another blog later. Keep on learning and never lose hope you will be awesome. 🙂
one last thing I want to inform you about online awesome editors for HTML, CSS, and JS: jsfiddle and codepen
embed example of jsfiddle below
Always be happy and make the crazy effort for what you do in life.
Jay Ambe, Namaste (greeting we Hindu people follow same like “bye” in English)