Introducing

Cascading
Style
Sheet
Mr. Roilan Bunyi
CITEC
TOPICS TO BE COVERED:
Overview
What is CSS?
Why to use CSS?
CSS for Skinning
your Website
Structure
CSS Syntax
Introduction
Three places CSS can be defined
CSS Syntax Specifics
Cascading Inheritance
Applied
 CSS INTRODUCTION

• Cascading Style Sheets, fondly referred to as CSS, 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 is easy to learn and understand but it
provides powerful control over the presentation of
an HTML document.
• Most commonly, CSS is combined with the markup
languages HTML or XHTML.
 CSS INTRODUCTION
(Advantages of CSS)
1.CSS SAVE TIME
 You can write CSS once and then reuse same sheet in
multiple HTML pages.
 You can define a style for each HTML element and apply
it to as many Web pages as you want.
2.PAGES LOAD FASTER
 If you are using CSS, you do not need to write HTML tag
attributes every time.
 Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster
download times.
3. EASY MAINTENANCE
 To make a global change, simply change the style, and all
elements in all the web pages will be updated
automatically.
CSS SYNTAX – SELECTORS
A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document.
A style rule is made of three parts:
1. SELECTOR:
- A selector is an HTML tag at which style will be
applied. This could be any tag like <h1> 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 or border etc.
3. VALUE:
- Values are assigned to properties. For example color
property can have value either red or #F1F1F1 etc.
• CSS SYNTAX – SELECTORS (Syntax)
- You can put CSS Style Rule Syntax as follows:
selector {
property:
value
}
Example: You can define a table border as
follows:
table { border :1px solid #C00; }
• The selector points to the HTML element you want to
style.
• The declaration block contains one or more declarations
separated by semicolons.
•
Each declaration includes a CSS property name and
a value, separated by a colon.
• A CSS declaration always ends with a semicolon,
and declaration blocks are surrounded by curly
braces.
 Three Ways to Insert CSS
Styling can be added to HTML elements in 3 ways:
1.Inline - using a style attribute in HTML elements
2.Internal - using a section
3.External - using one or more external CSS files.

The most common way to add styling, is to keep the

styles in separate CSS files.
BASIC CSS CODES
AND EXAMPLES
CSS Background Color
 CSS background-color

The background-color property specifies the

background color of an element.
CSS background-image
The background-image property specifies an image to use
as the background of an element.
By default, the image is repeated so it covers the entire
element.
CSS Border Style
 CSS Margins
• The CSS margin properties are used to create space
around elements, outside of any defined borders.
• With CSS, you have full control over the margins. There
are properties for setting the margin for each side of an
element (top, right, bottom, and left).
 Text Color
The color property is used to set the color of the
text.
 Text
Alignment
The text-align property is used to set the
horizontal alignment of a text.
 Styling Links

• Links can be styled with any CSS property

(e.g. color, font-family, background, etc.).
CSS Website Layout
HEADER
NAVIGATION BAR
For more references and examples of CSS visit
the link below:

https://www.w3schools.com/css/default.asp