Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
48 views

CSE1041 Web 1: Week 4 Cascading Style Sheets - CSS

This document discusses Cascading Style Sheets (CSS) which are used to style and lay out web pages. It covers the different types of CSS styles including inline styles, internal styles within the <head> tag, and external styles linked via a <link> tag. It also discusses how multiple styles can apply to elements and the precedence order from highest to lowest of inline, internal, then external styles. Selectors like ID and class selectors are introduced to target specific elements with styles.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

CSE1041 Web 1: Week 4 Cascading Style Sheets - CSS

This document discusses Cascading Style Sheets (CSS) which are used to style and lay out web pages. It covers the different types of CSS styles including inline styles, internal styles within the <head> tag, and external styles linked via a <link> tag. It also discusses how multiple styles can apply to elements and the precedence order from highest to lowest of inline, internal, then external styles. Selectors like ID and class selectors are introduced to target specific elements with styles.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

CSE1041 Web 1

Week 4
Cascading Style Sheets - CSS

1
Agenda
• What is a Style Sheet?
• How to specify a style using Style Sheets
• Types of styles:
– Inline style
– Internal style
– External style
• Multiple style sheets
– Precedence of style sheets
• Id and Class Selectors

2
Introduction
• A web document contains both structural and
presentation (or stylistic) information

• Need to separate them:


§ Structure – using HTML tags
§ Presentation – using CSS (Cascading Style Sheet)

• Use Style Sheets to control the style and layout of multiple


web pages at once

• To make a global change, simply change the style, and all


elements in the web pages are updated automatically

3
Structure v/s Style (1)
• HTML:
– Structure: divisions, paragraphs, tables, etc…
– Presentation: fonts, color, indentation, spacing, etc…

• In the style sheet approach, the structural information is


separated from the presentation information

• Presentation info is found in a style sheet

4
Structure v/s Style (2)

Structure
+

5
Presentation Formatted Web page
Cascading Style Sheets (CSS)
• CSS evolved from the need to globally control the
look of elements in a web page or multiple web
pages

• Example:
– If your company decides to use Arial font for standard
text on all its web pages, what to do?
– Painful solution: edit all pages individually and change
<font face=”…”> tag
– Easy solution: modify a style sheet which is
referenced by all web pages in your site

6
CSS Syntax
• The CSS syntax is made up of three parts:
1. Selector
2. Property
3. Value

• Example:
p {text-align: center;}

Selector Property Value

• Specifying more than 1 property:


– p{text-align:center; color:red;}
7
Types of Style Sheets
• There are three main types of CSS styles:

1. Inline style (inside an HTML element)


2. Internal style (inside the <head> tag)
3. External style (External file)

• Note: An inline style (inside an HTML element)


has the highest priority
8
Inline Style (1)
• An inline style loses many of the advantages of
style sheets by mixing content with presentation

• Use this method rarely, such as when a style is to


be applied to a single occurrence of an element

• To use inline styles you use the <style> attribute


in the relevant tag

9
Inline Style (2)
• Inline styles:
– Attributes of an element.
– Entered as attribute = value in element tag

• Example:

<p style="color: red; text-align: right">


This is a paragraph
</p>
10
Internal Style (1)
• An internal style sheet should be used when a
single document has a unique style

• You define internal styles in the <head>


section by using the <style> tag

• The browser will read the style definitions,


and format the document according to it
11
Internal Style (2)
• Style tags embedded in the <head> section of
a document
• Example:

12
Internal Style (3)
• In this example, all <input> <style>
and <textarea> tags will be input
{
formatted according to the text-transform:uppercase;
styles defined. color:red;
text-decoration:underline;
}
• In other words, we are re-
textarea
defining how HTML tags are {
displayed. text-transform:uppercase;
– This is useful when ALL the color:red;
}
tags need to follow a </style>
standard formatting.

13
External style sheet (1)
• An external style sheet is ideal when the style is
applied to many pages

• With an external style sheet, you can change the


look of an entire Web site by changing one file

• Each page must link to the style sheet using the


<link> tag

• The <link> tag goes inside the <head> section

14
External Style Sheet (2)
• Using a <link> tag in the <head> section of a
document
• Example:

15
Multiple Style Sheets (1)
• There are many ways to apply a style to an element:
– Inline Style
– Internal Style
– External style

• There is a possibility that multiple styles can apply to the


same element in a document

• CSS has a set of rules for resolving conflict:


– Specific style rules override general style rules
Inline style has precedence over Internal style which has
precedence over External style
16
Multiple Style Sheets (2)
• Example

17
Exercise 1 top.html

• Consider the
20%
following
screenshot.
80%
left.html
right.html
• An external
15% 85%
CSS style has
been defined Style definition (mystyle.css)
body
to format the {
background-color: Olive;
HTML pages. font-size: 14px;
}

18
Exercise 1(a)
<head>
• A registration page, <link rel="stylesheet" type="text/css"
register.html, has href="css/mystyle.css" />
been created.
<style type="text/css">
body{
• Assuming that the background-color: Yellow;
following styles have font-size: 12px;
}
been applied to </style>
register.html, what </head>
would be the final
background color <body style=" background-color: Blue” >
and font size of the
… HTML codes goes here
registration page?
Justify your answer. </body >
</html>
Register.html 19
Exercise 1(b)
• The left.html and right.html from Question 1
contains the code snippet below inside their body
section. Briefly explain what is wrong with this code
snippet and make the appropriate correction(s).

20
Selectors
• In addition to setting a style for a HTML
element, CSS allows you to specify your own
selectors:
– Id selector
– Class selector

• Id and Class selectors can be applied to:


– Internal styles
– External styles

21
Id Selector
• The id selector is used to specify a style for a
single, unique element.
• The id selector uses the id attribute of the
HTML element, and is defined with a "#".
• Example:
– The style rule below will be applied to the
element with id="para1"
#para1 <html>
{ <head><head>
text-align: center; <body>
color: red; <div id=“para1”> </div>
} </body> 22
Class Selector
• The class selector is used to specify a style for
a group of elements

• Unlike the id selector, the class selector is


most often used on several elements

• The class selector uses the HTML class


attribute, and is defined with a "."
23
Class Selector - Example 1
• Useful when we have similar tags e.g. <input>
that require different formatting within the
same page or web site
input.transform1{ <input type=text
text-transform:uppercase; name="txt_Username"
color:red;
text-decoration:underline;
class="transform1">
}
<input type=text
input.transform2{ name="txt_email"
text-transform:lowercase; class="transform2">
color:blue;
} Applying the style

Style 24
Class Selector - Example 2
• In Example 1, the class transform1, transform2 applies only to
<input> tag. It cannot be applied to <textarea> tag or any
other HTML tags
• A general class can be defined to apply to different types of
HTML tags
<input type=text
name="txt_Username"
.transform{
text-transform:uppercase;
class="transform">
color:red;
text-decoration:underline; <textarea rows=4
} cols=50
Style class="transform">
Applying the style
25
Using Id and Class selectors together

26
Exercise 2
• Consider the following HTML page top.html right.html

20%

80%
left.html

center.html

15% 50% 35% 27


Exercise 2
• The web designer wants to enhance the website using
CSS. A file named mystyle.css has been created in the
subfolder styles.

• Given the requirements below, write the content of the


mystyle.css file for the following html pages:
left.html • Body background color should be yellow
• Body text color should be grey
center.html, • Body background color should be pink
right.html • All Level 3 headings should be blue and of
size 16 pixels

• The following information could be helpful:


– background-color, text-transform, font-size, color, text-
decoration, text-align.
28
References
• CSE1041 – Previous Notes
• http://www.htmldog.com/guides/cssintermed
iate/classid/
• http://www.w3schools.com/css/css_id_class.a
sp

29

You might also like