Lesson 1 Introduction To CSS

CASCADING STYLE SHEETS
CSS is a simply designed language intended to

simplify the process of making web pages
presentable.
CSS allows you to control the layout of your HTML

document.
CSS is a simple way to add style such as font,

colors or spacing, etc. to a webpage.
HTML CSS
Markup Language Stylesheet Language
Create the actual content Responsible for the design or style
Used to build the structure of the Used to make the web page more
web page presentable
HTML codes can never be found in CSS codes can be found in HTML
CSS files files.
Uses angle brackets < > Uses curly braces { }

H
C
T
S
M
S
L
CSS vs HTML
Web Development
HTML – for skeleton

CSS – for beauty
JavaScript – for interactivity
WHY CSS?
CSS saves time.
Easy maintenance.
Search engines.
Superior styles to HTML.
Links can be styled in different ways.

WHY CSS?
CSS solved a big problem
HTML was NEVER intended to contain tags for formatting a

webpage
HTML was created to describe the content, like;

<h1>This is a heading </h1>
<p> This is a paragraph </p>
WHY CSS?
When tags like <font> and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web
developers. Development of large websites, where fonts and color
information were added to every single page, became a long and
expensive process.
To solved the problem, the World Wide Web Consortium (W3C)

created CSS. Style formatting was removed from HTML page.
CSS styles example
HTML SYNTAX
HTML Element
<p align=“left”> Welcome </p>

Attribute Content End Tag
Start Tag Value
CSS SYNTAX
A CSS structure consist of a selector and a declaration block.
Selector Declaration
p { color: green; }
property value curly brace
curly brace colon semi-colon
CSS SYNTAX
A CSS structure consist of a selector and a declaration block.
Selector Declaration Declaration
p { color: green; font-size: 12px; }

p { color: green; }
CSS SYNTAX
The selector is an HTML tag in which a style will
Selector be applied. This could be any tag like, <h1>.
<p>, <table>, <img>, etc.
A property is a type of attribute of HTML. All the

Property HTML attributes are converted into CSS
properties. They could be color, border, font, etc.
Values are assigned to properties. For example,

Value color property can have a value of either red or
#F1F1F1, etc.
HOW TO ADD CSS
When a browser reads a style
sheet, it will format the HTML
document according to the
information in the style sheet.
THREE WAYS TO INSERT CSS
➢ Inline Style Sheet
➢ Internal Style Sheet (Embedded
Style Sheet)
➢ External Style Sheet
INLINE CSS
Inline CSS contains the CSS property in the body
section attached with element.
This kind of style is specified within an HTML tag

using the style attribute.
EXAMPLE OF INLINE CSS
Inline styles are defined within the “style” attribute of the relevant element.
INTERNAL / EMBEDDED CSS
It is generally used to style a single page.
The internal style is defined inside the <style>

element, inside the head section.
EXAMPLE OF
INTERNAL CSS
We can write internal CSS

inside a <style> tag within the
HTML pages.
EXTERNAL CSS
With external CSS, you can change the look of an
entire website by changing just one file.
We can write external CSS in a separate .css file. Each

HTML page must include a reference to the external
CSS file inside the <link> tag, inside the head> tag.
EXAMPLE OF EXTERNAL CSS
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<link rel=“stylesheet” type=“text/css” href=“folder/mystyle.css”>
If the css file is inside the

folder, indicate the name
of the folder
External styles are defined within the <link> element, inside the <head> section of an HTML page.
➢ An external style sheet can be
written in any text editor and
must be saved with a .css
extension.
➢ The external .css file should not
contain any HTML tags.
➢ Here is how the “mystle.css” file
Save as "mystyle.css"
looks like:
PROPERTIES OF CSS
Inline CSS has the highest priority, then comes
Internal/Embedded followed by the External CSS
which has the least priority.
Multiple style sheets can be defined on one page.

If for an HTML tag, styles are defined in multiple style sheets
then the below order will be followed.
➢ As inline has the highest priority, any styles that are defined
in the internal and external style sheets are overridden by
inline styles.
➢ Internal or embedded stands second in the priority list and
overrides the styles in the external style sheet.
➢ External style sheets have the least priority. If there are no
styles defined either in inline or internal style sheet, then
external style sheet rules are applied for the HTML tags.
Difference between the 3 types of CSS Styles
Activity 1.1
Activity 1.2
Activity 1.3

Lesson 1 Introduction To CSS

Uploaded by

Copyright:

Available Formats

Lesson 1 Introduction To CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 1 Introduction To CSS

Uploaded by

Copyright:

Available Formats

CASCADING STYLE SHEETS

CSS is a simply designed language intended to

CSS allows you to control the layout of your HTML

CSS is a simple way to add style such as font,

Create the actual content Responsible for the design or style

Uses angle brackets < > Uses curly braces { }

HTML – for skeleton

Superior styles to HTML.

Links can be styled in different ways.

HTML was NEVER intended to contain tags for formatting a

HTML was created to describe the content, like;

To solved the problem, the World Wide Web Consortium (W3C)

<p align=“left”> Welcome </p>

Selector Declaration Declaration

p { color: green; font-size: 12px; }

A property is a type of attribute of HTML. All the

Values are assigned to properties. For example,

This kind of style is specified within an HTML tag

The internal style is defined inside the <style>

We can write internal CSS

We can write external CSS in a separate .css file. Each

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

<link rel=“stylesheet” type=“text/css” href=“folder/mystyle.css”>

If the css file is inside the

Multiple style sheets can be defined on one page.

You might also like