Web Development - Lecture 5

Web Programming
SYED SHAHZAIB SOHAIL

Lecture 5
Introduction to CSS

Contents
• What is CSS?
• Why use CSS?
• Ways to use CSS
• Big Problem
• CSS Syntax
• CSS Selectors and its types
• Grouping Selectors
• CSS Comments

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS defines the presentation ofWeb Pages
• CSS describes how HTML elements are to be displayed on screen, paper or
in other media
• CSS saves a lot of work. It can control the layout of multiple web pages at
once

Why use CSS?
• CSS is used to defines styles of your web pages, including the design, layout
and variations in display for different devices and screen sizes.

Ways to use CSS
• CSS can be used in 3 different ways.
• Inline CSS
• Internal CSS
• External CSS

Continued…
• Inline CSS
• Inline CSS allows you to apply a unique style to one HTML element at a time.
• You assign CSS to a specific HTML tag by using style attribute with any CSS properties
defined within it.
• Inline CSS style will always override style properties determined in internal or external
files.
This is a paragraph
This is a paragraph

Continued…
• Internal CSS
• The internal style sheet is used to add a unique style for a single document.
• It is defined in <head> section of the HTML page inside the <style> tag.

Continued…
• External CSS
• The external style sheet is generally used when you want to make changes on multiple pages.
• It is ideal for this condition because it facilitates you to change the look of the entire website by
changing just one file.
• It used the <link> tag on every pages and the <link> tag should be put inside the head section.
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
• The external style sheet may be written in text editor but must be saved with a .css extension.This
file should not contain HTML elements

•What style will be used when there is more than one
style specified for an HTML element?

Continued…
• If there are multiple style sheets the priority level is defined as following:
1. Inline style sheet
2. Internal style sheet
3. External style sheet

Big Problem
• HTML was never intended to contain tags for formatting a web page
• HTML was created to describe the content of the web page
• When tags like 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 solve this problem, theWorld Wide Web Consortium (W3C) created CSS that
removed the style formatting from the HTML page

CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:
H1 {color:blue; font-size:12px;}
Selector Declaration Declaration
Property Value Property Value

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
semicolon
• A CSS declaration always ends with a semicolon and declaration blocks are
surrounded by curly braces

CSS Selectors
• CSS selectors are used to “find” (or select) HTML elements based on their
element name, id, class, attribute and more

Types of CSS Selectors
• There are 3 types of CSS selectors
• Element Selector
• Id Selector
• Class Selector
• Child Selector
• Attribute Selector

Continued…
• Element Selector
• The element selector selects elements based on the element name.
• Id Selector
• The id selector used the id attribute of an HTML element to select a specific element.
• The id of an element should be unique within a page, so the id selector is used to select
one unique element.
• To select an element with a specific id, write a hash character, followed by the id of the
element.

Continued…
• Class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period character, followed by the name of
the class.
.center {text-align: center; color: red;}
• You can also specify that only specific HTML elements should be affected by a class.
p. center {text-align: center; color: red;}
• HTML elements can also refer to more than one class.
This paragraph refers to two classes

Continued…
• Child Selector
body > p {color: #000000;}
• Attribute Selector
• You can also apply styles to HTML elements with particular attributes
• input[type=“text”] {color: #000000;}

Grouping Selectors
• If you have elements with the same style definitions, like
• h1 {text-align: center; color: red;}
• h2 {text-align: center; color: red;}
• p {text-align: center; color: red;}
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• h1, h2, p {text-align: center; color: red;}

CSS Comments
• Comments are used to explain the code, and may help when you edit the
source code at a later date
• Comments are ignored by browsers
• A CSS comment starts with /* and ends with */
• Single Line and Multiline Comments

Web Development - Lecture 5

Recommended

More Related Content

What's hot (20)

Similar to Web Development - Lecture 5 (20)

Recently uploaded (20)

Web Development - Lecture 5