Scribd
Upload
110 views

WT 2

This document provides an overview of Cascading Style Sheets (CSS) including: - CSS is used to describe how HTML elements are displayed on screen, paper, or other media. It controls layout, fonts, colors, and other visual aspects without affecting content. - CSS allows separation of visual design from HTML content, enabling faster downloads, streamlined site maintenance, and global control of design across pages. - CSS syntax uses selectors to point to HTML elements and declaration blocks containing properties and values to style elements. - Styles can be included inline within elements, embedded within <style> tags in the head, or linked via external .css files. Linked styles allow controlling a whole site

Uploaded by

vss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
110 views

WT 2

This document provides an overview of Cascading Style Sheets (CSS) including: - CSS is used to describe how HTML elements are displayed on screen, paper, or other media. It controls layout, fonts, colors, and other visual aspects without affecting content. - CSS allows separation of visual design from HTML content, enabling faster downloads, streamlined site maintenance, and global control of design across pages. - CSS syntax uses selectors to point to HTML elements and declaration blocks containing properties and values to style elements. - Styles can be included inline within elements, embedded within <style> tags in the head, or linked via external .css files. Linked styles allow controlling a whole site

Uploaded by

vss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 47

Cascading Style Sheets

CSS

1
What is CSS?
• CSS stands for Cascading Style Sheets
• 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 all at once
• External stylesheets are stored in CSS files. with extension .css
• A simple mechanism for controlling the style of a Web document
without compromising its structure.

• It allows you to separate visual design elements (layout, fonts, colors,


margins, and so on) from the contents of a Web page.

• Allows for faster downloads, streamlined site maintenance, and global


control of design attributes across multiple pages.

2
CSS vs. just HTML
• What can we do with CSS that we can’t do
with HTML?
– Control of backgrounds.
– Set font size to the exact height you want.
– Highlight words, entire paragraphs, headings
or even individual letters with background
colors.
– Overlap words and make logo-type headers
without making images.
– Precise positioning.
– Linked style sheets to control the look of a
whole website from one single location.
– And more.

3
CSS Syntax

4
• A CSS rule-set consists of a selector and a
declaration block:
• 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.
5
style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value

6
How to write CSS?

• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)

7
The CSS element Selector
• The element selector selects HTML
elements based on the element name.
• Example
• Here, all <p> elements on the page will
be center-aligned, with a red text color: 
• p{
  text-align: center;
  color: red;
}
8
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is 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.
• Example
• The CSS rule below will be applied to the HTML element with
id="para1": 

#para1 {
  text-align: center;
  color: red;
}

9
Simple Program
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p{
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>

• <p>Every paragraph will be affected by the style.</p>


• <p id="para1">Me too!</p>
• <p>And me!</p>

• </body>
• </html>
10
Output
Every paragraph will be affected by the
style.
Me too!
And me!

11
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #para1 {
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>

• <p id="para1">Hello World!</p>


• <p>
• This paragraph is not affected by the style.</p>

• </body>
• </html>

12
Hello World!
This paragraph is not affected by the
style.

13
How to write CSS:

• The basic syntax of a CSS rule:


selector {property 1: value 1; property 2: value 2}

Example:
p {font-size: 8pt; color: red}

Notice the { } around the rule and the : before each value!

14
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 is placed inside the <style> element, and starts with /*
and ends with */:
• Example
• /* This is a single-line comment */
p{
  color: red;
}

15
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• /* This is a single-line comment */
• p{
• color: red;
• }
• </style>
• </head>
• <body>

• <p>Hello World!</p>
• <p>This paragraph is styled with CSS.</p>
• <p>CSS comments are not shown in the output.</p>

• </body>
• </html>

16
OUTPUT
Hello World!
This paragraph is styled with CSS.
CSS comments are not shown in the
output.

17
<!DOCTYPE html>
<html>
<head>
<style>
/* This is
a multi-line
comment */

p{
color: red;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
18
Three ways to include CSS:
1. Local (Inline)
2. Global (Embedded, or Internal)
3. Linked (External)

19
1. Local
• Inline style sheet.
• Placed inside tags.
• Specific to a single instance of an html
tag on a page.
• Must be used instead of <font> tags to
specify font size, color, and typeface
and to define margins, etc.
• Use to override an external or
embedded style specification.
20
Local (inline)
• Example
<p style="font-size: 10pt; color: red; font-weight:
bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>

On the browser:

21
2. Global
• Embedded or internal style sheet
• Applicable to an entire document
• Styles are defined within the <style>
</style> tag, which is placed in the
header of the html file (i.e., within
<head> and </head>).

22
Global (Internal)
• Example:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>

23
3. Linked
• External style sheet
• Styles are saved in a separate file, with
the extension .css
• This single stylesheet can be used to
define the look of multiple pages.

24
Linked (External)
• Example
Save this text
In TextPad,Notepad, etc.…
file as
p {font-family: verdana, sans- whatever.css
serif; font-size: 12pt; color: red}

h1 {font-family: serif; font-size:


14pt; color: green}

h2 {font-family: serif; font-size:


11pt; color: blue}

25
Linked (External)
• Example (continued)

To apply the stylesheet “whatever.css“ to


an HTML document, call it in from the
header:
<head>
<link rel="stylesheet"
href=“whatever.css" type="text/css">
</head>

26
Cascading
The way styles will be used when there is more than one
style specified for an HTML element:

1. Browser default
2. External Style Sheet (Linked) (in an external .css file)
3. Internal Style Sheet (Global, or embedded) (inside the <head>
tag)
4. Inline Style (Local) (inside HTML element)

• An inline style (inside an HTML element) has the highest


priority, which means that it will override every style declared
inside the <head> tag, in an external style sheet, and in the
browser (default value).

27
Let’s try this now!

<h1 style=“text-align: center; font-


weight:bold; color: blue”> Styling with CSS!
</h1>

<p style="font-size: 10pt; color: red; font-


weight: bold; font-family: Arial, Helvetica,
sans-serif“ >
Write whatever you want here </p>

28
CSS [attribute] Selector
• The [attribute] selector is used to select
elements with a specified attribute.
• The following example selects all <a>
elements with a target attribute:
• Example
• a[target] {
  background-color: yellow;
}

29
Attribute selector
Program Output

30
CSS [attribute="value"]
Selector

31
CSS [attribute~="value"]
Selector
• The [attribute~="value"] selector is used
to select elements with an attribute value containing a
specified word.
• The following example selects all elements with a title attribute
that contains a space-separated list of words, one of which is
"flower":
• Example
• [title~="flower"] {
  border: 5px solid yellow;
}
• The example above will match elements with title="flower",
title="summer flower", and title="flower new", but not title="my-
flower" or title="flowers".

32
Simple program
Program OUTPUT

33
Pseudo-classes
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {
  property: value;
}

34
35
CSS Pseudo-elements
• A CSS pseudo-element is used to style specified parts of an element.
• For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

• Syntax
• The syntax of pseudo-elements:
• selector::pseudo-element {
  property: value;
}

36
Simple program

37
Grouping properties
• Separate properties with a semi-colon
– Example:
p {text-align:center;color:red; font-
family:Arial; font-style:italic}

38
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a
paragraph tag will be red)
39
The class Selector
• With a class selector you can define different
styles for the same type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-
aligned, italic, and red. </p>
<p class=“blue"> This paragraph will be center-
aligned and blue. </p>
40
The class Selector
• You can also omit the tag name in the
selector to define a style that will be used by
all HTML elements that have this class.

• Example:
.poem {text-align: center; font-style:italic}

Any HTML element with class=“poem" will be


center-aligned and italic.

41
The class Selector
• Example (continued)
Both elements below will follow the
rules in the ".poem“ class:  

<h1 class=“poem"> This heading will be


center-aligned and italic </h1>

<p class=“poem"> This paragraph will also


be center-aligned and italic. </p>

42
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>

The tags and classes can then be used in combination:

<h1 class=“boldred">This is rendered as 30-point red serif bold


text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif
bold text.</p>

43
Applying styles to portions of
a document:
• <div>
– A division tag: to “package” a block of
document into one unit. It defines a block
element.
– Causes a line break, like <br> and <p>.
• <span>
– “Wraps” a portion of text into a unit, but
doesn't cause a line break. Allows styles to
be applied to an 'elemental' region (such
as a portion of a paragraph).
44
Example

<p><span class="foo">This text is rendered


as foo-style</span> and this is not. </p>

<div class="foo">
<p>The "foo" style will be applied to this text,
and to <a href="page.html">this text</a> as
well.
</div>

45
Inheritance: which style prevails
when several are present?
• Inline (local) overrides internal (global)
• Internal (global) overrides external (linked).

46
Inheritan
ce
Inheritance is a process of
receiving values of properties by a
child element from its parent
element.
This is a simple example of
inheritance:
Source code of CSS-
h1 {
color: maroon;
}
In the external css file, we have set
color for H1 element as maroon.
Now look at the html source code,
we have an i element, located
within H1 element, to make the
word inheritance italic. Because of
inheritance, word inheritance has
also become maroon since it is a
child element of H1.

47

You might also like