Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.


CSS Tips For Basic Blogging

Are you new to blogging? Then CSS (Cascading Style Sheet) is something you should know about. Blogging is not just about having the right content and the right visual elements and the right layout. It’s also about presentation. With CSS you can make your page look any way you want whenever you want.

CSS Tips for Basic Blogging

Just what is CSS?

If you use HTML to build your website, it’s CSS that makes it prettier. CSS lets you manipulate elements like fonts, style and spacing, even margins and backgrounds, to make your website look more appealing to the eye. Here we’ll cover some basic CSS tips to get you going with styling your blog like a guru!

With CSS you can manipulate any element without affecting the others in the page, useful when you want to isolate just that one element and carry out a change. CSS require some coding knowledge but is generally easy to use, making it popular among professional web designers and those who just dabble in website design.

Here are some tips for basic blogging with CSS.

Use Shorthand CSS

Try using shorthand when writing your CSS codes, it will be easier to understand and takes up less command lines.

For example:

Can be shorthanded to:

Know the Difference between Class and Id

Beginners often confuse these two types of selectors. Here are their differences:

Class

– Represented by a dot (.) in CSS. In HTML, is denoted by element attribute: class=”{class_name}”.

– Can apply to multiple elements on the web page. 

ID

– Represented by a hash (#) in CSS. In HTML, is denoted by element attribute: id=”{id_name}”.

– Can only refer to only one element on the web page.

Looking at the command lines of the previous section of this article, you should be able to determine that “.header” was a class tag.

If you are still not sure when to use a class versus an id for an element, remember that you can only use a class tag if you want the style to be used in various areas throughout the HTML document. 

On the other hand, since the id tag can only targets a specific area, it can only be used once on the document. It should not be used again to avoid confusion or a bad command line. JavaScript attempting to select an element by id will fail if there are more than one elements with the same id.

Handy tip: make sure that you name your classes and ids correctly. CSS doesn’t accept class and id names to start with a number or any other non-alphabetical character.

Learn About Positioning Before Attempting to do Layouts in CSS

With CSS, setting the position of any element is not as simple as mashing on the arrows keys. You have to use coordinates to position an element with the x and y axis of the site, it’s the codes that make an element either static, float or absolute, etc.

Here are some positions and their corresponding command lines:

Static – When you want one element to be on top of another in the simplest layout possible, enter the following command lines for those elements.

Relative to One Side – This is when you want an element to favor the left side or the right side of the page. Let’s say you want an element to the left of the page:

Not that the values of 20 and 40 are just representative, you can input your own values.

Absolute – This is when you want the element removed from the document and placed where you want it. Let’s say you want it at the top right of the page:

For an excellent article on CSS positioning, see here.


Submit a Comment