Course Title:-

Web Development II
Topic 1:-
Introduction to CSS

Course Teacher:-
Eng. Abdullahi M.
Amir 1
2
Hints

 Whereas HTML defines your content’s

meaning and gives your Web pages their

basic structure.

 CSS (Cascading Style Sheets) defines

and modifies the appearance.

3
Introduction to CSS
 A style sheet is simply a text file that
contains one or more rules that determine—
through properties and values—how certain
elements in your Web page should be
displayed.

 Cascading Style Sheets, fondly referred to as

 CSS is the language we use to style an HTML

5
Why Use CSS?
 CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices and
screen sizes.
 There are CSS properties for controlling basic
formatting such as font size and color, layout
properties such as positioning, and print
controls such as deciding where page breaks
should appear when visitors print a page. 6
Advantages of CSS
CSS is a MUST for students and working
professionals to become a great Software
Engineer specially when they are working in
Web Development Domain. I will list down
some of the key advantages of learning CSS:
 Create Stunning Web site
 Become a web designer
 Control web
 Learn other languages 7
Create Stunning Web site
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, layout designs, variations in display for
different devices and screen sizes as well as a
variety of other effects. 8
Become a web designer
If you want to start a carrier as a professional
web designer, HTML and CSS designing is a
must skill.
Today's web designer balances clear, concise
design skills alongside a strong foundational
background in the technology of the web.

9
Control web
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 HTML.

10
Learn other languages
Once you understands the basic of HTML and
CSS then other related technologies like
JAVASCRIPT, PHP, or ASP.NET are become
easier to understand.

11
Applications of CSS
As mentioned before, CSS is one of the most
widely used style language over the web. I'm
going to list few of them here:
 CSS saves 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.

12
Continued…
 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
it to all the occurrences of that tag. So less
code means faster download times.
 Easy maintenance - To make a global
change, simply change the style, and all
elements in all the web pages will be updated
automatically. 13
Continued…
 Superior styles to HTML - CSS has a much
wider array of attributes than HTML, so you
can give a far 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. By using the same HTML
document, different versions of a website can
be presented for handheld devices such 14as
Continued…
 Global web standards - Now HTML attributes
are being deprecated and it is being
recommended to use CSS. So its a good idea
to start using CSS in all the HTML pages to
make them compatible to future browsers.

15
Who Creates and Maintains CSS?
 CSS is created and maintained through a
group of people within the W3C called the CSS
Working Group.
 The CSS Working Group creates documents
called specifications. When a specification has
been discussed and officially ratified by the
W3C members, it becomes a
recommendation.

16
Continued…
 These ratified specifications are called
recommendations because the W3C has no
control over the actual implementation of the
language. Independent companies and
organizations create that software.
 NOTE − The World Wide Web Consortium, or
W3C is a group that makes recommendations
about how the Internet works and how it should
evolve. 17
CSS Syntax
 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 −
 Selector − A selector is an HTML tag at which
a style will be applied. This could be any tag
like <h1> or <table> etc.

18
Continued…
 Property − A property is a type of attribute of
HTML tag. but simply, all the HTML attributes
are converted into CSS properties. They could
be color, border etc.
 Value − Values are assigned to properties. For
example, color property can have value
either red or #F1F1F1 etc.

19
20
Continued…
 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.
 Multiple CSS declarations are separated with
semicolons, and declaration blocks are
surrounded by curly braces. 21
CSS Types
 we want to address the 3 kinds of styles you
can add to a document.
1. Inline Styles
2. Embedded or Internal Styles
3. External Styles

22
1:Inline styles

23
2: Embedded or Internal Styles

24
3: External styles

25
CSS Comments
 Many times, you may need to put additional
comments in your style sheet blocks. So, it is
very easy to comment any part in style sheet.
You can simple put your comments inside
/*.....this is a comment in style sheet.....*/.
 You can use /* ....*/ to comment multi-line
blocks in similar way you do in C and C++
programming languages.
26
Example Using CSS Comments

27
THANKS…

28
• gyujj

29