Basic CSS Styling Lesson

Basic CSS Styling Lesson - - inspired by Elson's Notification Feature Tip:

 

Let's say you wanted to add special content to a special box, that has a thick dark blue border with a light blue background, to several paragraphs across your site - - here's what you could do to save time:

  • Add the following line of code to your Advanced CSS - - we are creating a class called mybluebox.
  • .mybluebox { background-color:#99D0E7; border: 5px solid #003366; padding:10px; }
  • I will add the class to my Advanced CSS right now, so I can show you the live example below.
  • Add your newly created class to a paragraph or DIV, or just about any HTML tag. You could add to a text box, a new page, a Group Text Box, etc...:

<div class="mybluebox">This is my first basic CSS style. It's a class. I named it mybluebox. I must add a period before the name in my CSS. I must use class="mybluebox" when I apply this style to a paragraph, a DIV, or other HTML tags.</div>


Example Below:
This is my first basic CSS style. It's a class. I named it mybluebox. I must add a period before the name in my CSS. I must use class="mybluebox" when I apply this style to a paragraph, a DIV, or other HTML tags.

Tags: basic css, css 101, css tip, css tutorial, getting started in css

Views: 109

Replies to This Discussion

Permalink Reply by Predestined by God on July 7, 2011 at 5:40am
Simple terms that I sure need to learn; like "class" etc.  It actually broken down this simple really gives me a better understanding when I'm reading more intricate instructions. Thank you.
Permalink Reply by GirlRiders on July 7, 2011 at 6:56am
Excellent!
Permalink Reply by Broom Riders on July 7, 2011 at 9:44am
Great addition...thanx Jen!
Permalink Reply by JenSocial on July 7, 2011 at 11:18am

Glad it helped.

=)

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips