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 15 - What is Background in CSS?

Like other elements, you can format background of any element with the help of style sheet. CSS has enhanced features than HTML to set background of an element.

You can set background of an element in 3 different ways of your choice or page requirement.

An element can have following three attributes:-

1. Background Color
2. Background Image 
3. Background Color + Image (both)

When you use 2nd and 3rd attribute, further these have 3 common attributes to set background position, attachment, and background repeat:-

1. Background Attachment
2. Background Position
3. Background Repeat

How to set Background property with css coding?

Now let us discuss all the attributes of Background with an example of each:-

Background-Color

If you want to set color for your HTML page or any other element created on the page, you can use this attribute to set the color.

Example for setting Background Color:-

 /*Syntax of Background Color in CSS*/

 height:200px;
 width:200px;
 background-color:red;
 

Above example will create a square box of 200px height and 200px width with Background color as RED.

Background color has 4 values:-

1. Color Name  (red, green blue etc)
   
2. Hexadecimal Number  (#ff33ea, #123456,...etc)
   
3. RGB color code - rgb(123,0,255)
4. Transparent

Background-Image

If you want to set an image for your HTML page or any other element created on the page, you can use this attribute to set the image. 

The css code is quite similar to the background color attribute but the attribute and values are different.

Example for setting Background Image:-

 /*Syntax of Background Image in CSS*/

 height:200px;
 width:200px;
 background-image:url('myimage.jpg');
 

Above example will create a square box of 200px height and 200px width with Background image.

Background Image has 2 values:-

1. url - (Path where your image is stored)
2. none

Background Color + Image

Sometime it happens that your image load time increased and it shows an empty image area. This is not good for a website or blog.

To handle this situation, we suggest you to use this property of background image with color.

Example, setting Background Image with color:-

 /*Syntax of Background Image with color in CSS*/

 height:200px;
 width:200px;
 background:#ff2354 url('myimage.jpg');
 

Above example will create a square box of 200px height and 200px width with Background image.

But if your image is not loading then it will show you the color you set with the url of your image.

Background Attachment

You can control the attachment of background image in style sheet. This is quite easy and a good practice to handle an image.

This property has 2 values to use with the image. If you want to scroll the image with the page or if you want to fix the image to some point on the page.

1. Fixed - It will fix the image and will not allow image to scroll with the page.
2. Scroll - It will scroll the image with page scroll

Example for setting Background Attachment:-

 /*Syntax of Background Attachment in CSS*/

 background-attachment:value;
 

Background Position

You can control the background position of your HTML element with the help of CSS (stylesheet). If you want to position an element, then you can do this by using background-position property of style sheet.

It has following 11 values to use for setting up the background position of an element.

1. top left 
2. top center
3. top right
4. center left
5. center center
6. center right
7. bottom left
8. bottom center
9. bottom right
10. x-% y-% 
11. x-pos y-pos

Example for setting Background Position:-

 /*Syntax of Background Position in CSS*/

 background-position:value;
  

Background Repeat 

You can set an to repeat itself or not within your HTML page. It has 4 values to set.

1. Repeat
2. No Repeat 
3. Repeat X
4. Repeat Y

Example for setting Background Repeat:-

 /*Syntax of Background Repeat in CSS*/

 background-repeat:value;
  

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

Read More →

Chapter 14 - What is Positioning in CSS?

After creating an element in style sheet, you can position that element at any location on your page. Usually, you create elements with the DIV tag and to position your DIV element, we use the attribute Position.

In other words, the position property changes how your div elements are positioned on the web page. It has different values and one can use as per the requirement of their website or blog page.

The Position attribute has 4 values:-

1. Static
2. Fixed
3. Relative
4. Absolute

What is the best value of position attribute?

Well, this question has very controversial answer and let's not discuss here as it is beyond the topic of this post.

We are just giving some details about each value so that you can be familiar with all the 4 types of values of position attribute.

Static

This is the default value of an element of any HTML page. the static value element will appear in the normal flow.

I suggest not to use static value; let the element appear on the position it is unless of until you don't use any other value to position on a specific area of page. Leave it.

Example for Static Value:-

 /*Syntax of Static Value of Position Attribute in CSS*/

  position:static;

 

Fixed

In simple language, an element with fixed value will not scroll with the other element of the page. It will just fix itself to the location where you will set the position of top, right, bottom or left.

Example for Fixed Value:-

 /*Syntax of Fixed Value of Position Attribute in CSS*/

  position:fixed;

 

Relative

To position an element relatively places the element in normal flow. When uses, it overlaps the first element on the page.

Example for Relative Value:-

 /*Syntax of Relative Value of Position Attribute in CSS*/

  position:relative;

 

Absolute

You can set the absolute position of an element with the Absolute value. It removes an element from the normal flow.

Example for Absolute Value:-

 /*Syntax of Absolute Value of Position Attribute in CSS*/

  position:absolute;

 

I have explained all the 4 values of Position attribute. If you still have any doubt in understanding any value, you can give comment in below comment section.
 
NOTE:- To use these properties and relevant values of Position Attribute, read posts on each topic in the next section of this blog.

Read More →

Chapter 11 - What is Height in CSS?

To specify the height of the content area or any other element which is either created by you with the help of css class; you can use the height property of css. The content area is inside the padding, border, and margin of the element.

Height

The height of an element is in your control if you are controlling with style sheet. Height property has 3 values to apply

1. Auto
2. Pixel
3. Percentage

There are 2 further divisions of height property:-

1. Max Height 

• (none, pixel, percentage)

2. Min Height 

• (pixel, percentage)

Example for Height Properties:-

 /* Syntax of Height Properties in CSS*/

 height:value;
 max-height:value;
 min-height:value;
 

Also you can control the height of a line. It has 4 values to set the line height property:-

1. Normal
2. Number
3. Pixel
4. Percentage

Example for Line Height Property:-

 /* Syntax of Line Height Property in CSS*/

 line-height:value;
 

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

Read More →

Chapter 10 - What are Lists in CSS?

There are two types of lists in HTML coding but you can control its appearance with the help of CSS Style Sheet. You can do this in one declaration with css. Actually you can control the style of ordered and un-ordered list with style sheet.

2 Types of Lists

1. Ordered List
2. Un-Ordered List

Examples of ordered list are as follows:-

1,2,3,4,5,6,7...and so on

a,b,c,d,e...and so on

i, ii, iii, iv, v...and so on

I, II, III, IV, V...and so on

A, B, C, D, E...and so on

Above 5 are examples of ordered list and can be modified with the help of style sheet coding.

Examples of ordered list are as follows:-

o, >, *,#... and so on are the examples of un-ordered list. You can control the list style and set to none if not required with the element of list.

List Style

There are 3 values to control the list style:-

1. Image
2. Position
3. Type

You can control list style individually as showing in below syntax:- 

Example for List Style:-

 /* Syntax of List Style in CSS*/

 list-style:value;
 

List Type

Did you know that you can use an image for the bullet of unordered lists with the list-style property?

Example for List Style Type:-

 /* Syntax of List Type in CSS*/


 list-style-image:url(myimage.jpg);

List Style Position

The control of list position is in your hands. If you are using List Style Position in style sheet coding.

There are 2 values of list style position:-

1. Inside
2. Outside
   

Example for List Style Position:-

 /* Syntax of List Position in CSS*/

 list-style-position:value;

List Style Type

The control of ordered and unordered list can be controlled with the help of list-style-type in css coding.

There are 9 values of list style type:-

1. None
2. Disc
3. Circle
4. Square
5. Decimal
6. Lower Roman
7. Upper Roman
8. Lower Alpha
9. Upper Alpha
   

Example for List Style Type:-

 /* Syntax of List Style Type in CSS*/

 list-style-type:value;

NOTE:- For proper use of List Style Type Properties, read posts on each topic in the next section of this blog.

Read More →