Chapter 5 - What are Margins in CSS?

Do you really want to learn CSS?
Learn CSS is easy if you know the right path of the information provider about style sheet tutorial.

But with the technological evolution or breakthrough in blogging, it is not possible for everyone to search the absolute information on the net.

However +Google is continuously making lots of efforts to provide the best search result but the the search result is not as per the requirement of the searcher yet.

It will take a time to produce the 100% relevant search result about the topic.

So, we decided to create a blog with the in-depth information about learning CSS or style sheet.

Today's topic is CSS Margins.

CSS Margins are outer space between the two or more. In other words, a css margin it the space all around an element.

Margins are of 4 sides/types and it is a Clock wise direction in coding:-

1. Margin-Top
2. Margin-Right
3. Margin-Bottom
4. Margin-Left

By default are side has margin existed but with your CSS coding you can either remove or extend margin of 4 the sides.

The margin property can be set for the top, left, right and bottom of an element. (See below example)

 Syntax of 4 sided margin:-

 margin-top:Value;
 margin-right:Value;
 margin-bottom:Value;
 margin-left:Value;

/*NOTE:- A margin value could be in Pixel, Percentage or auto etc.*/ 

You can also declare a margin value in a single row as it is shown in below example:-

 For setting all 4 sided margin use TRBL  format. Example:-

 margin:T R B L; (Top, Right, Bottom, Left)
 margin: 10px 20px 30px 40px;


/*NOTE:- A margin value should read clock wise.*/ 

 If values of all sided margin is same then use the following syntax:-

 margin:10px; /*4 sides margin*/
 margin:-10px; /*negative margin of 4 sides*/
 margin:10px 20px; /*top, right margin*/
 margin:10px 20px 30px; /*top,right, bottom*/

/*This will set 10px margin for all 4 sides*/
/*You can also set a negative margin value*/
/*You can also set margin of two sides*/
/*You can also set margin of three sides*/

You can read 4 sided margin as TRBL (This term is first ever used by CSSBasicTips).

Read More →

Chapter 4 - What are CSS IDs?

CSS IDs are similar to CSS classes but starts with a hash (#) tag instead of dot (.). The basic functionality is same as class. You can either use a Class or an ID to format your website.

I use IDs that will be needed only once. However, you can use as may times as you want. There is not such any restriction for using multiple times.

For example, if I have to design a fixed header of my page, then I will use ID instead of Class because every page has only one header.

 #header
 {
   width:100%;
   height:60px;
   background-color:#ff2354;
   position:fixed;
   left:0;
   right:0;
   top:0;
 }

This is a very simple example of creating header with css ID.

If you have any query regarding CSS header, you can drop a comment below.

Read More →

Chapter 3 - What are CSS Classes?

Every selector in CSS is a class but you can create your classes as per your requirements in style sheet coding.

So we can say that there are two types of CSS classes:-

1. Pre-defined classes of CSS
2. User defined classes of CSS

Pre-Defined Class

The class selector allows you to style items within the same HTML element differently. Similar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an HTML file.

CSS Coding for Pre-Defined CSS Class

 h1
 {
   font-size:extra-large;
   background-color:yellow;
 }

HTML Coding

 <h1>H1 Tag with yellow background</h1>

Output
H1 Tag with yellow Background

 

User Defined Class

In user defined classes of css, you can use any name of your choice for your class.

CSS Coding for User-Defined CSS Class

 .mycssclass
 {
   font-size:extra-large;
   color:red;
   background-color:yellow;
 }

HTML Coding

 <h1 class="mycssclass">H1 Tag with User Defined Class in CSS</h1>

Output
H1 Tag with User Defined Class in CSS

 

Please note that the user defined class selector begins with the (.) period but predefined class selector begins with the predefined HTML Tag. This is the basic difference between.

I hope you understand the basics of Predefined and User Defined Classes in CSS.

Now you can share your thoughts in below comment box, if you like this post.

Read More →

Chapter 2 - What is the Syntax of CSS

The syntax of CSS is quite easy but different than that of HTML syntax. At first look, it seems to be a very tough and lengthy but once you take a look at the whole syntax of CSS, it consists of only 3 parts.

I have already describe the syntax of stylesheet in Chapter 1 and you might remember that style sheet is of 3 types.

1. Inline
2. Internal
3. External

Each CSS type consists of 3 parts:-

1. Selectors
2. Inheritance
3. Comments

CSS Selectors is the HTML element and selectors are of two types. 

1. Single Selector
2. Combined or Multiple Selectors

The property is the actual property title, and the value is the style you apply to that property.

Do you know that each selector can have multiple properties, and each property within that selector can have independent values.

The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are separated by commas, and if an individual value contains more than one word you surround it with quotation marks.

Example of Single CSS Selector:-

 selector
 {
   property:value;
 }

Now the question is what are selectors, properties and values?

So have a look to understand all these:-

• Every Tag of HTML is a selector
• Every Attribute of HTML tags are properties
• CSS value is the same thing as in HTML

 body
 {
   background-color:#ff2354;
   font-family:"Verdana, Arial, Serif";
 }

CSS Inheritance is just like a programming language where you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.

For example, if you declare a font in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

Example 1:-

 body
 {
   background-color:green;
   font-family:"Verdana, Arial, Serif";
 }

In example 1, it is clearly declared that if you set background color as green of body and font family as verdana then all your sub selectors of under body will inherit the same formatting and all text within the HTML file will be set to Verdana and background as green.

If you wanted to style some text with another font style or color, like a header or a paragraph then you can do as in example 2:-

Example 2:-

 p
 {
   background-color:yellow;
   font-family:Serif;
 }
 h1
 {
   font-family:Arial;
   background-color:orange;
 }

Now all <h1> tags within the file will be set to Arial with background color as orange and all <p> tags are set to Serif with background color as yellow, leaving text within other elements unchanged from the body declaration of Verdana with background color as green.

Combined Selectors are just like single selectors but uses commas after every single selector whose properties and values are same.

For Example:-

 h1,h2,h3,h4,h5,h6
 {
   background-color:yellow;
   font-family:Serif;
 }

Comments are very useful while designing a long or lengthy css code for your website and can be used to explain why you added certain selectors within your css file.

Comments help others who may see your file, or to help you remember why you used this particular code. You can add comments that will be ignored by browsers in the following manner:-

 /*This is a comment*/

I hope, you would understand the basic syntax of CSS coding along with all the three parts of style sheet coding.

If you have any query, leave you message in the comment box and we will get back to you soon.

Read More →

Chapter 1 : Introduction to CSS

CSS is an abbreviation for cascading style sheet. It is now widely being used by every website designer or developer.

Bloggers are also modifying the design or look of their online blog pages. This is also called the Style Sheet. You will learn in depth study about style sheet and its all 3 types with the uses. CSS Basic Tips is a blog to help other bloggers and it is a channel partner with BloggingFunda - A Community of Bloggers.

You can use style sheet with three different ways.

1. Inline Style Sheet
2. Internal or Embedded Style Sheet
3. External or Linked Style Sheet

You can use style sheet with three different ways.

• CSS stands for Cascading Style Sheets
• CSS defines how HTML elements are to be displayed
• Styles were added to HTML 4.0 to solve a problem
• CSS saves a lot of work
• External Style Sheets are stored in CSS files

While dealing with formatting your website, you have some choices of how to use the CSS, either internally or externally.

As discussed above, a style sheet has three syntax of writing.

Internal Stylesheet

First we will understand and learn the internal method of css. This way you are simply placing the CSS code between the open <head> and close </head> tags of each HTML file you want to style with the CSS. 

The format for this is shown in the example below:-

 <html>

 <head>

  <style type="text/css">

   p

   {

     background-color:#ff2354;

   }

  </style> 

 </head>

 <body>

  <p>This is with Internal Stylesheet.</p>

 </body>

 </html>

External Stylesheet

In this example, you have to write your style sheet in other file instead of writing between the <head></head> tags. 

And once you are done with your external css file, just call that file with the <link> tag as in below example.

 <html>

 <head>

  <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

  <p>This is with External Stylesheet.</p>

 </body>

 </html>

Inline Stylesheet

In this example, you have to write your style sheet in any of the HTML tag. This is intended to highlight of format the selected part of the text.

 <html>

  <body>

  <p style="background-color:#ff2354;">

    This is with External Stylesheet.

  </p>

 </body>

 </html>

I have easily explained all the types of stylesheet and now if you want to explore the amazing world of styles with the help of stylesheet then go through the other chapters written by cssbasictips blog.

NOTE:- To use these properties and relevant values of Position Attribute, read posts on each topic in the next section of this blog.

You can also check these example codes in the online editor by CSSBASICTIPS.

Read More →

Chapter 8 - What is Span Tag in CSS?

An element which can be used Inline is called Span Tag. No line break is created when a span tag is applied in between the text. Spans are similar to Divisions but the main difference is line break.

Example of CSS CODING

 /* Here I am using for CSS IDs to create a  colorful string with the help of Span Tag*/

 #redbg
 {
    Background-color:red;
 }
 #greenbg
 {
    background-color:green;
 }
 

Now have a look on the HTML coding to use Span Tag to format a string.

Example of HTML CODING

 /* Here I am using SPAN Tag of HTML to make a colorful string background*/

 This is a text with<span   id="redbg">RED</span> Background.

 This is a text with<span id="greenbg">GREEN</span> Background.N

The output of above code will be as follows:-

This is a text with RED Background.

This is a text with GREEN Background.

In other words, spanning is used to format anything by using an inline code of stylesheet with the help of Span Tag. 

I hope this will clear the working of SPAN tag and difference with DIV tag.

Read More →

Chapter 7 - What is Division in CSS?

The word "Division" derived from the word "Parts". This means that you can make as many parts as you want to show different elements on your website with the help of style sheet.

You can use almost every bit of your website page's space.

In my previous chapters, you have learnt about the syntax or properties of css.

Now it is time to learn about how to use in HTML coding. It starts with DIV tag in HTML and you can reserve space of a website page with as many DIV tag as you want with the help of style sheet.

To create above layout; use the coding as shown below:-

Example of CSS CODING

 /* Here I am using for CSS IDs to create Main Screen, Left, Center and Right Division*/

 #main
 {
    width:425px;
    height:261px;
    background-color:blue;
    border:20px solid brown;
 }
 #left
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid red;
    border-radius:20px 20px 0px 0px;  
    float:left;
    border-bottom:50px solid red;
 }
 #right
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid green;
    border-radius:20px 20px 0px 0px;  
    float:right;
    border-bottom:50px solid green;
 }
 #center
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid pink;
    border-radius:20px 20px 0px 0px;
    margin-left:10px;  
    float:left;
    border-bottom:50px solid pink;
 }

Now have a look on the HTML coding to make divisions.

Example of CSS CODING

 /* Here I am using DIV Tag of HTML to make Divisions on the page*/

 <div id="main">
   <div id="left"></div>
   <div id="center"></div>
   <div id="right"></div>
 </div>

Now I hope everything is clear to you with respect to Division in CSS.

For more examples on CSS based layout and the use of all CSS attributes and properties; see blog posts.

And share your feed back.

Read More →

Chapter 6 - What is Padding in CSS?

CSS Padding is an internal space around the content in the element.

Properties of Padding is quite same as Margin. Syntax is also same.

Padding is of 4 sides/types and it is a Clock wise direction while writing in coding:-

1. Padding-Top
2. Padding-Right
3. Padding-Bottom
4. Padding-Left

By default all sides have padding existed but with your CSS coding you can either remove or extend padding of 4 the sides.

The Padding property can be set for the top, right, bottom and left of an element. (See below example)

 Syntax of 4 sided padding:-

 padding-top:Value;
 padding-right:Value;
 padding-bottom:Value;
 padding-left:Value;

/*NOTE:- Padding value could be in Pixel, Percentage or em.*/ 

You can also declare a padding value in a single row as it is shown in below example:-

 For setting all 4 sided padding, use TRBL  format. Example:-

    padding:T R B L; (Top, Right, Bottom, Left)
 padding: 10px 20px 30px 40px;


/*NOTE:- Padding value should be read clock wise.*/ 

 If values of all sided padding is same then use the following syntax:-

    padding:10px; /*4 sides padding*/
 padding:-10px;/*negative padding of 4 sides*/

/*This will set 10px, -10px padding for all 4 sides*/
 
 padding:10px 20px; /*top, right padding*/

/*This will set 2 sided padding*/
 
 padding:10px 20px 30px; /*top,right, bottom*/


/*This will set 3 sided padding*/

You can read 4 sided padding as TRBL (this term is first ever used by CSSBASICTIPS.

Read More →