CSS

CSS

An Introduction to basic css

 

[one_half][frame_right src=”http://codeomitted.com/wp-content/uploads/2014/05/IMG_1314.jpg” href=”http://codeomitted.com/wp-content/uploads/2014/05/IMG_1314.jpg”]An Introduction to basic css[/frame_right]
[/one_half]
[one_half_last]Overview

Cascading Style Sheets (CSS) is a language used for enrich the HTML document. All we need to do is to apply the css rule with it’s attributes.

Example:

h1 {
 font-family : arial, sans-serif;
 color : yellow;
 font-weight: normal;
 margin : 5px;
}

[/one_half_last]

[one_half]Selector

Each rule in CSS  means by a selector. Selector defined the patterns that used to select the element you’d like to apply styles. Refer to the above example, I defined the h1 rule, therefore the h1 html element will be style by this rule.[/one_half]

[one_half_last]Property & Value

CSS rules describe in a set of properties and values with english keyword within the curly brackets after the selector. Example, to apply color to a font, the syntax is color : yellow.  and the property is color, value is yellow.[/one_half_last]

 

Different type of stylesheets

Cascading stylesheet can be load from 3 main resources.

  1. First, it load from the browser stylesheet which is provided by browser vendor.
  2. Second, modern browser allow users to set their own user’s stylesheet within their browser .These style sheets will override the browsers style sheets for that individual user only.
  3. Third author stylesheet, the web content author provided the stylesheet together serve with their HTML content.

[one_third]IMG_1315
Default stylesheet provided by browser vendor.
[/one_third]

[one_third]IMG_1316
User’s stylesheet. A customised copy stylesheet to override the default browser stylesheet.
[/one_third]

[one_third_last]IMG_1317
Provided by the web author.
[/one_third_last]

 

Different ways to style by author

 

[one_half]Load from external resources

External css resource can be loaded into HTML document within the head section. There is another way to load external css by using @import syntax. In term of performance wise, some recommend to used link tag instead of @import. To understand more different between the usage you can find out more from here.
[/one_half]
[one_half_last]IMG_1318[/one_half_last]

<html>
    <head>
	 <meta charset="UTF-8">
	 <title>CSS tutorial</title>
	 <link rel="stylesheet" href="/tutorial/style.css">

	 <!--[if lt IE 9]>
	       <link rel="stylesheet" href="css/ie.css" href="/css/ie.css">
	 <![endif]-->
   </head>

 </head>
</html>

 

[one_half]IMG_1319[/one_half]
[one_half_last] In page declaration

The in page declaration is define the css rules inside <style> tag, usually within the <head> section.
[/one_half_last]

<!DOCTYPE html>
<html>
   <head>
      <style>
          h1 {color:red;}
          h2 {color:blue;}
            p {color:green;}
      </style>
</head>

<body>
    // codeomitted 
</body>
</html>

 

[one_half]Inline CSS

Inline css is directly define the css attributes into HTML element. Example, to style the entire paragraph with red color.

<p style="color:red">Test </p>

[/one_half]
[one_half_last]IMG_1320[/one_half_last]
Next topic I’m going to talk about how to calculate CSS specificity

Write a Reply or Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.