Unit -3
Getting Started With CSS
Learning objectives:
After the Completion of this unit you should be able to know
What a style sheet is and how it actually styles a web page
The importance of CSS.
How to create a style sheet and link an html document to the style sheet.
The basic building blocks of any style sheet: rules, selectors, properties
and values.
How External Style Sheets are stored in CSS files
Three ways of inserting a style sheet
Different selectors using CSS
Define background properties ,Background colour & images handling
Font family, Style and Size using CSS
Designing Tables using CSS
Structure
3.1 Introduction of CSS
3.1.1 Definition
3.1.2 Advantages
3.1.3 Parts of CSS
3.2 CSS Syntax
3.2.1 Rules / Principle of CSS
3.2.2 Parts of style sheet
3.3 CSS Selectors
3.3.1 The element selectors
3.2.2 The ID selectors
3.2.3 The Class selectors
3.3.4 Universal Selector
3.3.5 Attribute Selector
3.4 Ways to Insert CSS
3.4.1 External style sheet
3.4.2 Internal style sheet
3.4.3 Inline style
3.5 Background image handling
3.5.1 Repeat the Background Image
3.5.2 Set the background image position
3.6 Background colour management using CSS
3.6.1 CSS color hex code
3.6.2 CSS color -short hex code
3.6.3 CSS color RGB value
3.7 Text management using CSS
3.7.1 Set the text color
3.1 Introduction of CSS
CSS stands for Cascading Style Sheets. It is a simple design language
intended to simplify the process of making web pages presentable. CSS handles
the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized
and laid out, what background images or colors are used, as well as a variety of
other effects.
CSS works with HTML and other Markup Languages (such as XHTML and
XML) to control the way the content is presented. Cascading Style Sheets is a
means to separate the appearance of a webpage from the content of a webpage.
3.1.1 Definition
Cascading Style Sheets (CSS) is a simple mechanism used to format the
layout of Web Pages and adding style (e.g., fonts, colors, spacing...) to web
documents that previously could only be defined in a page's HTML.
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media. It can control the layout of multiple web pages all at once.
3.1.2 Advantages
The advantages of CSS are:
CSS saves time - You can write CSS once and then reuse the same sheet
in multiple HTML pages.
Pages load faster – Increases Download Speed
Easy maintenance - To make a global change, all the elements in all the
web pages will be updated automatically.
Superior styles to HTML – It is better look to your HTML page in
comparison to HTML attributes.
Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device.
Global web standards - Now HTML attributes are being deprecated and
it is being recommended to use CSS
3.1.3 What is the “Cascade” part of CSS?
The cascade part of CSS means that more than one style sheet can be
attached to a document, and all of them can influence the presentation. For
example, a designer can have a global style sheet for the whole site, but a local
one for say, controlling the link color and background of a specific page. Or, a
user can use own style sheet if s/he has problems seeing the page, or if s/he just
prefers a certain look.
Odisha State Open University Page 1
3.2 CSS Syntax
A CSS style rule is made of three parts:
1. Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could be
color, border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.
The format or syntax of CSS is:
Selector {property:
value}
Example:You can define a heading as follows:
h1 {color: red; font-size :15px}
Selector Property Value Property Value
Here h1 is a selector , color and font-size are properties and the
given value red, and 15px are the value of that property.
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
3.2.1 Rules/ Principle of CSS
1. Every statement must have a selector and a declaration. The declaration
comes immediately after the selector and is contained in a pair of curly
braces.
2. The declaration is one or more properties separated by semicolons.
3. Each property has a property name followed by a colon and then the value
for that property. There are many different types of values, but any given
property can only take certain values as set down in the specification.
4. Sometimes a property can take a number of values, as in the font-family.
The values in the list should be separated by a comma and a space.
5. Sometimes a value will have a unit as well as the actual value, as in the
1.3em. You must not put a space between the value and its unit.
6. As with HTML, white space can be used to make your style sheet easier to
read and write.
Odisha State Open University Page 2
3.2.2Parts of style sheet
A style sheet consists of one or more rules that describe how
document elements should be displayed. A rule in CSS has two parts: the
selector and the declaration. The declaration also has two parts, the
property and the value. Let's take a look at a rule for a heading 1 style: h1
{ font-family: verdana, "sans serif"; font-size: 1.3em } This expression is a
rule that says every h1 tag will be verdana or other sans-serif font and the
fontsize will be 1.3em. Let's take a look at the different parts of this rule.
Selector
{
property1: some value;
property2: some value;
}
The declaration contains the property and value for the selector. The property is
the attribute you wish to change and each property can take a value. The property
and value are separated by a colon and surrounded by curly braces:
body { background-color: black}
If the value of a property is more than one word, put quotes around that value:
body { font-family: "sans serif"; } If you wish to specify more than one property,
you must use a semi-colon to separate each property. This rule defines a
paragraph that will have blue text that is centered.
p { text-align: center; color: blue }
You can group selectors. Separate each selector with a comma. The example
below groups headers 1, 2, and 3 and makes them all yellow. h1, h2, h3 {
color: yellow}
Check your progress 1
Q1. Write the abbreviation of CSS?
Answer:__________________________________________________________
_________________________________________________________________
Q2. Write the three parts of CSS syntax?
Answer:__________________________________________________________
_________________________________________________________________
Odisha State Open University Page 3
