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 →