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.

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

Views: 70

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips