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.

Views: 218

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

Latest VIP Ning Tips!

Hover Links for Preview

» shhhh, Huge Ning Designer Secret - - Insert Simple HTML at Top of List Pages: Blogs, Events, Forums, Groups, Photos, and Videos.

» Make Home Page Photo Module Stand Out

» Professional Splash Page Template (Landing Page) - Pro Accounts

» Beautiful Coda Content Slider for Ning Networks

» Move Group Pages Module To Top

Blog Posts

Hi Everyone!

Posted by JenSocial on May 7, 2018 at 8:35pm 8 Comments

Message from Ning CEO - January 4, 2017

Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments

New Ning 3.0 Feature! Add Slideshow to Photo Module

Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments

Good Riddance Mode Media! Exciting News About Ning + Cyndx LLC

Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments

Ning RAISING RATES for Ning 2.0 sites

Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments

Members

Latest Ning Tip

Blogcentric Sites - Add "Read More" to Blog Titles - Ning 2.0

Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)

Troubleshooting Your Online Network – Tips and Advice

Discussion Forum

Mp3 player for Ning 3.0 - created by me

Started by Themes - Rosas Negras Mar 20, 2021. 0 Replies

Add Member Account Box Links/Notifications to NingBar and Hide Account Box - - Saving Space Above Fold (Collaborative Efforts: Jen and Elson)

Started by JenSocial. Last reply by Kos Dec 6, 2016. 64 Replies

Add Footer like Creators.ning.com (Great example of a JenSocial VIP Tip!)

Started by JenSocial. Last reply by JenSocial Jul 26, 2016. 41 Replies

Trending on JenSocial 

1 Chandrika & Ludwig sing Namastasyai Namo Namaha | Satsang excerpt

Chandrika & Ludwig sing Namastasyai Namo Namaha | Satsang excerpt

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips