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 →