CSS: Comments

All comments begin with a forward slash and asterisk (/*), and end with the
asterisk followed by the forward slash (*/). This is a very simple and easy to remember method
that you may prefer to use in more complicated or important styles.


Example:

/* Default styling for paragraphs */
p {
color: #F00;
font-size: 12px;
}
/* Make all top-level headings gray and 16px high */
h1 {
color: #333;
font-size: 16px;
}

Another method preferred by many designers further highlights the rule by adding a dashed line
with the comment a great way of carving up the style sheet and making it more visually
manageable.

Example:

/* Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}

CSS: Defining a Style

CSS syntax is made up of the following entities:

1. Selector (the element or tag you wish to control)
2. Property
3. Value

Example:
Below I am going to show an example in order to illustrate the style better.

body{
padding: 10px;
}

body - Selector
padding - Property
10px - Value

Always place a semicolon at the end of a property.

Hope you have got a better idea of the entities involved in CSS style.

 

Book: Beginning CSS Web Development

Few days ago I came accross this nice book on CSS which I found very much useful and I have learned a lot from it. Although I am a software devleoper myself but I am not a designer but I always feel lack of good designing capabilities and abilities in me. Although I tried a lot to learn how to design a website but I was not able to do so. The main reason is that I have not found any useful resource which will help me right from the beginning to advance level. But this book helped me a lot and now feel I have better understanding of CSS then before.

I want to share the basic topics which are covered in this book. Table of contents section is shown below. Hope you will got a better idea of what the book covers and if you want to read this book then you can pick it up.

Table of Contents:

PART 1 ■ ■ ■ Get to Know CSS
■CHAPTER 1 Getting Started . . . . . . . . . . .  . . . . . . . . . . . . . . . . . 3
■CHAPTER 2 Core Concepts of CSS . . . . . . . . .. . . . . . . . . . . . . . . . . 17
■CHAPTER 3 CSS Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . 39
■CHAPTER 4 Text . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . 55
■CHAPTER 5 Color, Backgrounds, and Images . . . .. . . . . . . . . . . . . . . . . 79
■CHAPTER 6 Lists . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . 103
■CHAPTER 7 Links . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . 129
■CHAPTER 8 Tables and Definition Lists . . . . .  . . . . . . . . . . . . . . . . 145
■CHAPTER 9 Forms . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . 167

PART 2 ■ ■ ■ Logical Layouts
■CHAPTER 10 Layout Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
■CHAPTER 11 Classic Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
■CHAPTER 12 Layout Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . 275
■CHAPTER 13 The Journey from Layout to Template . . . . . . . . . . . . . . . . . 291
■CHAPTER 14 Usability and Accessibility Enhancements .  . . . . . . . . . . . . . 315
■CHAPTER 15 Tips, Tricks, and Troubles . . . . . . . . .. . . . . . . . . . . . . 329
■CHAPTER 16 Case Study: The Dead Goods . . . . . . . . .. . . . . . . . . . . . . 347
■APPENDIX CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 387

CSS: Types of CSS Styles

There are 3 types of CSS Styles which have been used in Web pages which are listed below:

1. Inline Styles
2. Embedded Styles
3. External Styles

Now I am going to explain each one of them one by one.
Inline Styles:
Inline styles make use of the style attribute applied to specific tags within the document,
where the actual style value is declared using the form name:value, or property:value, if you
want to use the correct terminology.

Example:
Replace this:

With:

.

This very simple declaration will ensure that the paragraph text will be red.

Embedded Styles:
Embedded styles still have you working exclusively within the (X)HTML template, but this time
all styles are grouped together in the head of the document, as part of one element.

Example:
Within the head section of the html page place below line:
.
This results in text contained within paragraphs on the web page to be red.

External Styles:
External Styles have been placed in a separate external style sheet and it contains are the styles which are required for the full site even if it contains thousands of pages.

Example:
Place below line within the head section of the web page:


Create an external.css style sheet file and place the below line inside it.
p {color: #F00;}

The result of this will be that all the web pages which contains link inside the head section written above paragraphs text becomes red.

If you want to read about the benefits of External Styles then follow the below link:
Benefits of External Styles

CSS: Benefits of External CSS Styles

What are External CSS Styles?
External Styles are the css styles which are placed in a separate file with css extension. Most of the sites over the internet use External Styles since it has many benefits. I just want to discuss what are the benefits.

Below is a list of benefits of External Styles:

1. One external style sheet only, and not the markup.
2. Sitewide style changes are one-sheet.
3. Once the browser accesses the style sheet, it is cached and need not be downloaded.
4. Pages gets rendered faster due to style sheet caching.
5. Saving on bandwidth due to style sheet caching.
6. One CSS file replacing the same or similar code that would be needed in each and every (X)HTML page if working with embedded CSS.
7. Markup can be devoid of any presentational information, keeping it lean and content-only.

Hope you have got a better idea of External style sheets.


 

CSS: Margin

CSS Margin:
Margin is the distance from neighboring elements. Padding and Margin are nearly the same. Padding is for a single element and related to element itself while margin is related to other elements or controls around another control.
Example:
I am creating a div having a border and then put up an paragraph inside it and apply margin on it. This example will make you understand the margin concept very well.

The code that I have used along with setting margin on Left button is given below:

Hope you have got the idea of margin well. Your suggestions for improvements will be highly appreciated.