JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Basic CSS Styling Lesson - any website.

Basic CSS Styling Lesson

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 website - - here's what you could do to save time:

Add the following line of code to your CSS File, or in the head of your HTML page. You only need to use one method, depending on your needs.
We are creating a class called mybluebox.
CSS File Method:
.mybluebox { background-color:#99D0E7; border: 5px solid #003366; padding:10px; }
Top of HTML Method - - between start and ending HEAD tag <head>add between here.</head>:
<style type="text/css"> .mybluebox { background-color:#99D0E7; border: 5px solid #003366; padding:10px; } </style>
Add your newly created class to a paragraph or DIV, or just about any HTML tag. You can add anywhere on your site, where you can add HTML.

<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.

0 members favorited this