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.

Views: 195

Replies to This Discussion

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.
Excellent!
Great addition...thanx Jen!

Glad it helped.

=)

RSS

Members

© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips