Skip to main content

Fundamentals of CSS


CASCADING STYLE SHEET (CSS)

Introduction

Style sheets are powerful mechanism for adding different types of styles to any web document or web page. It allows web designer to improve and change the appearance of the web page in very efficient manner. It makes standard and uniformity throughout a web site. It enables us to control rendering of styles such as fonts, color, typeface, size, spacing, margins, and other aspects of document style. It is a style sheet language which specifies how to incorporate style information in a style sheet. These sheets are said to be cascade when they combine to specify the appearance of a web page, which indicate that several style sheet can be blended to a document. To embed style to a document <style>…. </style> tags are used.

ADVANTAGES

·        Its main advantage is its ability to make global change to all documents from a single location.
·        The primary intention of CSS is to separate document presentation from document content written in markup language.
·        This mechanism allows the user to give a different look to the same document, without significant effort.
·        The same style sheet can also be used on different documents.
·        It reduces the development time significantly.

                       Content + Style = Document
  






ADDING CSS

There are four different ways to indicate style information in a document:
·        External Style Sheets- In this, style information is written in a separate file and is referenced from an HTML document. It is useful when same style is applied on different document.

For e.g.-
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

·        Embedded Style Sheets- In this, style information is placed under the style tag in the head part of the HTML page.
For e.g.-
<style>
    P {
         color: green;
        }
</style> 

·        Imported Style Sheets-. In this, style information is embedded using @import statement. Its working is same as linking. It allows importing a style sheet from another style sheet.
For e.g.-
<style>
      @import URL (“style.css”)
</style>

·        Inline style Sheets- In this, style information is directly incorporated into the HTML tags. This is the least flexible styling method.
For e.g.-
<p style=”color: red”> Hello World </p>






CASCADING RULE

·        Specificity rule- more specific rules get preference over less        specific rules.
             P b {color: blue}
             b {color: black}
The formal makes text under the tag <b>,which is descendant of tag p, blue. The latter makes text under the <b> tag black.

·        Order rule- For conflicting rule, latter rules get preference over the earlier rule    
The order is from highest importance to lowest importance.


Inline Style
Internal style
External style
Imported style
Browser default style

Style attributes

There are mainly 6 style attributes.
1.    Font attributes
·        Font size
·        Font style
·        Font family
·        Font weight

2.  Color attributes
3.  background attribute
·        background color
·        background image
·        background repeat
4.  Text attribute
·        text alignment
·        text index
·        text transformation
·        text decoration
5.  Border attribute
·        border style
·        border width
·        Border color
6.  Margin attribute
·        Margin width


 













Labels:

Comments

Post a Comment

Popular posts from this blog

Advantages and Disadvantages of EIS Advantages of EIS Easy for upper-level executives to use, extensive computer experience is not required in operations Provides timely delivery of company summary information Information that is provided is better understood Filters data for management Improves to tracking information Offers efficiency to decision makers Disadvantages of EIS System dependent Limited functionality, by design Information overload for some managers Benefits hard to quantify High implementation costs System may become slow, large, and hard to manage Need good internal processes for data management May lead to less reliable and less secure data
1 comment
Read more

Inter-Organizational Value Chain

The value chain of   a company is part of over all value chain. The over all competitive advantage of an organization is not just dependent on the quality and efficiency of the company and quality of products but also upon the that of its suppliers and wholesalers and retailers it may use. The analysis of overall supply chain is called the value system. Different parts of the value chain 1.  Supplier     2.  Firm       3.   Channel 4 .   Buyer
Post a Comment
Read more

Big-M Method and Two-Phase Method

Big-M Method The Big-M method of handling instances with artificial  variables is the “commonsense approach”. Essentially, the notion is to make the artificial variables, through their coefficients in the objective function, so costly or unprofitable that any feasible solution to the real problem would be preferred, unless the original instance possessed no feasible solutions at all. But this means that we need to assign, in the objective function, coefficients to the artificial variables that are either very small (maximization problem) or very large (minimization problem); whatever this value,let us call it Big M . In fact, this notion is an old trick in optimization in general; we  simply associate a penalty value with variables that we do not want to be part of an ultimate solution(unless such an outcome is unavoidable). Indeed, the penalty is so costly that unless any of the  respective variables' inclusion is warranted algorithmically, such variables will ...
Post a Comment
Read more