Thursday, January 9, 2014

CSS Basics part 1

External CSS provides the flexibility to change the style of the complete website/web pages without having to change the html logic of the website. External CSS files should go in the head section of the hmtl page.

Method 1
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>
<body>

Method 2
<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css)</style>
</head>
<body>

CSS syntax:
CCS consists of 3 parts viz. selector, property and value.
selector { property: value }

  1. Selector is html element to be styled i.e. body, p, h etc
  2. property of the html element like colour, background etc
  3. Value of the property like black for color property etc.

A selector can have multiple properties and they are separated by semi colon. See the below example
A property can have multiple values and they are separated by comma. See the below example.

h1 {font-family: Georgia, sans-serif;
color: #009900;}

Multiple selectors can also be combined in CSS as shown below. In the below example all the headers share the same style.

h1, h2, h3, h4, h5, h6 {
  color: #009900;
  font-family: Georgia, sans-serif;
}






No comments:

Post a Comment