Using CSS to Enter Content


Everybody know the wonders that CSS can do. You can make a single change of a one line and whoosh ! All the documents are updated. No need to go and change all thge 500+ lines of HTML you’ve written. Nor mess with anything else. Just one simple rule and one line of code to do it all. So, enough talking about CSS. Let’s get to what we have for today. Obviously you read the headline. And, you must be wondering that what rubish I’m talking ! How can somebody use CSS to enter content in a webpage. BLAH BLAH! But no. This one’s serious. So, enough jibber jabbering (I’m still doing it). Let’s get to it.

This thing is seriously simple. You just have to select the div on which you want to the content to appear. Then it’s all simple. Open your favourite text editor and enter the following code:

.class:before {
content: the content you want here before the di;
}

.class:after{
content: content you want after the div;
}

As you can see the confusingiest part here is that :before and :after. They are called sudo elements[post soon]. So, the :before is used for all the things to be applied before the element whereas :after is used to apply styles after the element.

Hope you learned something. I hope to do more these kind ofs- tutorials over here at webdesignerarsenal. Keep Tuned!

Enter your email address to follow this blog and receive notifications of new posts by email.

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s