Introduction to Basic CSS - Lesson 1

1
Introduction to Basic CSSLesson 1

• Publisher Attitude Academy

2
What is CSS
Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of
a document written in a markup language.
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 a
powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the
markup languages HTML
3
CSS VERSION
Versions Year
CSS1 1996
CSS2 1998
CSS3 2012
4
EDITOR SOFTWARE DO I NEED?
A browser and a simple text editor is all you
need. (Example Adobe Dreamweaver Notepad)
5
TYPE OF CSS
THERE ARE THREE TYPES OF CSS
INLINE CSS
APPLY STYLE FOR A SINGLE ELEMENT
INTERNAL CSS
ADD IN HEAD OF HTML DOCUMENT
EXTERNAL CSS
IN A SEPARATE FILE
6
Inline CSS
An inline style may be used to apply a unique
style for a single element. To use inline styles,
add the style attribute to the relevant element.
The style attribute can contain
any CSS property. Example Here
lth1 style"color yellow font-size18px
font-weight bold"gt Property show on
browserlt/h1gt
PROPERTY SHOW ON BROWSER
7
Internal CSS
This way you are simply placing the CSS code
within the ltheadgt lt/headgt tags of each HTML file
you want to style with the CSS. The format for
this is shown in the example below. Example
Here
ltheadgt ltstyle typetext/cssgt CSS Property
write there lt/stylegt lt/headgt
8
External CSS
An external CSS file can be created with any
text or HTML editor such as Notepad or
Dreamweaver. An external style sheet is a
separate text file with .CSS extension. You
define all the Style rules within this text file
and then you can include this file in any HTML
document on ltheadgt Section using ltlinkgt
element. Example Here
ltheadgt ltlink hrefPath To stylesheet.css
typetext/css relstylesheet/gt lt/headgt
9
By using an external style sheet, your
entire HTML files link to one CSS files in order
to style the pages. This means, that if you need
to alter the design of all your pages, you only
need to edit one .css file to make global changes
to your entire website. Here are a few reasons
this is better. (1) Easier Maintenance
(2) Reduced File Size (3) Reduced
Bandwidth (4) Improved
Flexibility
10
Click CSS Name
You will show page like this
11
External CSS file save name by style.css. Style
is universal name of css Saving file
12
Add External file on Your Html document (Note
Path Should be Right) Typetext/css Show
your written text in css Relstylesheet
Show your include file relation with stylesheet
13

• Visit Us Attitude Academy