Cascading Style Sheets (CSS) - A Brief Note

Welcome to the World of CSS. The CSS stands for Cascading Style Sheets. This is a technology recommended by World Wide Consortium (W3C) in 1996. Basically, CSS is a way of formatting web pages layout, text, margins, lines, heights, widths, images a nd many more. You can position anything exactly where you want on the web page. Single external CSS file can control the layout of all the pages of your website.

That means that your life is easier with the use of CSS. HTML is used to structure the content where CSS is used to format the already structured html content. CSS allows you to separate presentation from content when building a website. You can put your CSS Style rules in entirely separate file and HTML web page in another file. You only have to include a link specifying the location of the independent CSS file.

Important Advice: only used lowercase letters for coding html, css and other code. This is very important and will be big time saver as you advance your knowledge in HTML, CSS and XHTML1.0.

CSS Style can be put in 3 places:
  1. In external files (with .css extension);
  2. In the HTML file within the header section inside a <style> element;
  3. Even inside an HTML element, using the “style=attribute”.
How to create a CSS file:
1. Open Notepad in Windows

2. Type for example:

P {

Color:blue;

Text-align:right;

Font-family:courier;

}

3. Save the file as sample.css

How to link the sample.css to your HTML file:

Insert the below syntax in between header tag ( <head>..........</head> in your HTML file.
Syntax:<link type=”text/css” rel=”stylesheet” href=”sample.css” />

Example: Find the exact placement of CSS style link in the example below
<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”sample.css” />
</head>
<body>
<h1>Header type 1 text goes here</h1>
<p> This is the Sample paragraph. The style of this paragraph can be controlled from the external CSS style file we just created. </p> </body>
</html>

Basic Concepts:

CSS has special words for familiar HTML concepts such as tag and attribute. CSS Style Rule is divided into 3 parts: Selector, Property and Value. It can better be explained with an example. So here it is:
p { color:brown; } where p is Selector, color is Property and brown is Value.

1. It is possible in CSS to group multiple selector or property for a single style. This concept is explained with an example below:
- Example-1 for selector grouping: h1, h2,h3,h4 { font-family:arial; }
- Example-2 for property grouping: p {color:brown; text-align:left; font-family:courier;}

2. Understanding Class: Let me consider a situation to explain you what is class in CSS. For example, you want most of the paragraph of your web page in black but want to emphasize few paragraphs by displaying in some other color, for example, like Red. So what do you do for that? Here is the solution called “class”. You can do that by adding “class” definition to a selector as explained below in example.
Example:
CSS Style: p·bodytext { color:black; }
p·alert { color:red; }
Implementation in HTML file: <p class=”bodytext”> This is the Sample Black Paragraph. Paragraph class bodytext is implemented in this paragraph. </p>
<p class=”alert”> The color of this paragraph text is red. </p>

3. Generic class and all-purpose classes:
Syntax: ·highlight { color:blue: } - This is the generic class which you can use with selector.
For example: <html>
<head>
<link type=”text/css” rel=”stylesheet” href=”sample.css” />
</head>
<body>
<p class=”highlight”> The color of this paragraph will be blue because of the generic class highlight used with p selector</p>
<h1 class=”highlight”> This Header 1 will be blue too because same generic highlight class is also used with header selector to demonstrate you the use of generic class. </p>
</body>
</html>

4. Comment:
Syntax: / * your comment goes here. This is not interpreted. / *

5. Span: Span is used instead of <font> tag as <font> tag is deprecated by w3c. If you want to make only part of a paragraph blue, use <span> tag for this.
Example: <p>I want to use span here to <span class=”highlight”> demonstrate </span> the use of span.</p>

6. ID selector: ID Selectors are similar to generic class but they are independent of specific document elements. But ID differs from a class in that an ID is supposed to work only once on given web page, only a single element is supposed to be affected. Hash “#” is used to create a CSS ID rule.

Example:
<html>
<head>
<style>
# highlight { color:yellow; font-style:italic; }
<style>
<head>
<body>
<p> This is a Sample Paragraph without use of ID selector. </p>
<p id=”highlight”> This paragraph shows the use of ID selector being used.</p>
</body>
</html>

7. Combining Multiple Classes:
Example: <p class=”framed pink”>, where framed and pink are two different classes being used together.

8. Precedence: Precedence comes into picture, when you have applied CSS Style Rule in your html document at various places like external, internal and inside an HTML element. In that scenario, browser has to decide which to follow. That is called precedence. The browser will follow this rule:
  • The first precedence will be given to the Inline Style.
  • The second precedence will be given to the Embedded Style Sheet.
  • The third precedence will be given to External Style Sheet.
  • The last precedence will be given to Browser’s Default Styles.

9. Inheritance: Inheritance means that a child object inherits properties or abilities from its parent objects. This is well explained with an example.

<html>
<head>
<style type=”text/css”>
p { background:green; }
</head>
<body>
<p> This is the sample text to explain <strong>inheritance</strong> </p>
</body>
</html>
In the example, the strong text “inheritance” is boldface but also inherits the green background of its parent element.

10. Universal Selectors: It affects everything in a website. * is used for that.
For example: Simple CSS Style: body, p, table, h1, h2, h3 { font-weight: bold; } Universal css style: * {font-weight: bold; }

11. !Important: This Overrides the embedded styles with your external styles in the CSS file.

12. Positioning Contents:
  • Relative Positioning: This means that an element is located in terms of another element.
  • Absolute Positioning: This specifies a particular number (pixels, points, inches etc) by which the element should be positioned. Absolute position is described by two numbers: the top and left. Technically called Co-ordinate.
CSS provides two important positioning tools: Floating and Positioning.

To modify the position property in css selector:

Static: This is similar to default. Co-ordinate (top & left) can’t be given.

Relative: This is like Static but top and left properties can be modified to adjust default flow location relative to other objects.
  • Absolute:
  • Fixed:
  • Inherit:

Example:
<html>
<head>
<style>
·absol {position:absolute; top:0px; left:0px }
</style>
</head>
<body>
<h1>This is Header 1</h1>
<p>This is Sample Paragraph</p>
<img class=””absol” src=”sample.jpg”>
</body>
</html>

No comments:

Post a Comment

Commonly Used Abbreviations Used Daily

Although, we tend to use short form of long words in daily life but there are many abbreviations which we don't remember. Below is the l...