CSS For Beginners – How To Use CSS
CSS gives you the ability to fine-tune the look of your website.
It’s simple enough to pick up, and in this post I’ll give you the basics to get you on your way.
I also share the resources I turn to, when I need help with a line of code.
This is CSS for beginners.
I’ve broken this guide into 4 digestible chunks:
1. What Is A Web Page?
2. What Is CSS?
3. How Do You Use CSS?
4. CSS Design
CSS For Beginners:
What Is A Web Page?
To understand CSS, you’ll need to understand what a web page is.
A web page is created from programming code, usually HTML. It is text in a file that is rendered by your computer.
It becomes a web page, because the file is sent over the internet, to your computer, where it is downloaded and decoded.
Once rendered in your browser, it will be formatted in the same way, as is defined by the HTML (or your browser).
This page, that you’re reading, was created using HTML.
The font for the line above is set as IMPACT, and font-size is set to: 22pt.
But it’s not appearing in your browser that way.
This is what I see:
The reason why you’re not seeing that, is because there’s another text file providing instructions.
That file is the CSS file.
What Is CSS?
CSS stands for Cascading Style Sheets.
It’s a computer language that can style a ‘style sheet’, or web-page.
It can modify the appearance of a page that has already been created.
The key point of CSS is that it’s all about how a document is displayed. That’s it.
CSS is also really useful for reformatting a web page in response to the device it is loaded on.
So, a web page that might not naturally fit onto a phone screen, could be adjusted to fit with CSS.
CSS For Bloggers:
How Do You Use CSS?
Your platform (e.g WordPress, Blogger etc) will have a place for you to input CSS code.
In WordPress.org it’s normally located: /Dashboard /Appearance /Customise /AdvanceOptions /AdditionalCSS
In Blogger it’s: /Theme /Customise /Advance /AddCSS
Once you have the right box, you can add your code.
Make sure you back-up your site before adding CSS, just in case.
It’s a good idea to check your website each time you apply CSS, to make sure it’s doing what you want.
When I first got into website design, I purchased a HTML/CSS book. Nowadays I rarely refer to it. Mainly because of a website called W3Schools.com
If I need a little CSS help, that’s where I turn to.
Here are a few key lines of CSS code applied to this page:
The line of CSS code shown here, 54: img.ImageD,
gives instructions to add a dropped shadow around an image.
All I need to do now is input ImageD into the image class box of any image I want to apply it to, and then it looks like this:
CSS is really important for website design and is well worth learning.
If you have a question, feel free to ask in the comments below.
Share A Link
Or pin a pin
GET THE COMPLETE BUDGETING BUNDLE
Check out my 'Squirrel Away' themed pack at Etsy.
It's available in A4, A5, Letter, Half Letter, and is hole-puncher ready.
Printable on A4, A5, Letter and Half Letter - Click the image to visit my Etsy store