Scribd
Upload
5 views

Web Technologies - Lecture 5 CSS

Uploaded by

kanchuka induranga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web Technologies - Lecture 5 CSS

Uploaded by

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

CS2104, SE2104, IT2104

Lecture 04
05
Web Technologies - CSS
23/01/2024
Bachelor of Science (Hons) in Computer Science | Software Engineering | Information Technology
Department of Computing
Faculty of Computing and Technology
Saegis Campus
Nugegoda

1
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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

2
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.

3
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS Syntax

• 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.

4
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS Syntax
Selectors can be
• A tag name (i.e. <p>) –This will apply to all tags of that type in
the document
• An id (<h2 id=“foo”>) –The style will apply to ANY tag with the
named id.
• A class (<p class=“LargeRed”>) The style will apply to ANY
element with the named class)

5
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Selectors – Examples:

6
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Selector Grouping
❑ Selectors for elements with the same style can be
grouped and use a common style description
h1, h2, p {
text-align: center;
color: red;
}

7
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Styles in HTML

8
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Nonunderlined Link
• Links are underlined by default in the browser page.
• The following example demonstrates how to display a link that is not underlined
by default, using a style attribute.

9
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Placement of CSS Information
CSS style information can be put in one of three places:
• External sheet
• Can be used for an entire website
• Each .html file must reference same sheet
• Internal sheet
• Can be used to consistently style 1 html page
• Inline styles

10
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
External Style Sheet
• 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.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

11
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
External Style Sheet

12
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Link to an External Style Sheet
• This example demonstrates how to use the <link> tag to link to an
external style sheet.

13
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Internal Style Sheet
• An internal style sheet should be used when a single document has a
unique style.
• You define internal styles in the <head> section with the <style> tag.

14
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Internal Style Sheet

15
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Inline Styles
• An inline style should be used when a unique 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.
• The style attribute can contain any CSS property.

16
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Style Attributes
• Colors
• Backgrounds
• Borders
• Margins
• Padding
• Height/Width

17
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS - Colors Example:
• Colors can be specified as: h1 {color:green;}
✓A color name like ‘red’, ‘lightblue’, etc. p {color: red;}
✓HTML supports 140 standard color names
• A hex value : #ff0000, #000066, etc.
✓Rgb values
✓2 hex ‘nibbles’ per color giving ranges of 0-255 for each
• An RGB value like: rgb(255,0,0)
✓Same as hex values but with decimal numbers

18
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS - Backgrounds

• Elements can have different backgrounds


✓Colors
✓Images

19
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Background Color
• Attribute: background-color
• Value: description of colors
• h1 {background-color: green;}
• div {background-color: #777700;}
• div is just used to divide the page into subsections - no other
structural effect on the page

20
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Background Images
• Attribute: background-image
• Value is usually a URL of a graphic file
• Example:
• body {background-image: URL(“mountain.jpg”)}
• Images can be positioned within an element
• Attribute: background-position:
• Value: (horizontal and vertical positioning (left, center, right, bottom, center, top))

21
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Background Images
Images can be repeated if two small to cover an area
• Attribute: background-repeat
• Values:
✓repeat-x – repeat horizontally across area
✓repeat-y – repeat vertically down area
✓no-repeat – do not repeat image
• Images can scroll with page:
• Background-attachment:scroll

22
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Background Images
• Can specify all attributes using ‘background:’
• Values for background must be in this order:
✓background-color
✓background-image
✓background-repeat
✓background-attachment
✓background-position

23
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Borders
<!DOCTYPE html>
<html>
<head>
<style>
h2 { border: 10px dashed green;}
p { border: 5px solid red;}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and
border-color.</p>
</body>
</html>
24
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Margins
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
25
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Padding
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 1px solid black;
padding: 25px;
background-color: lightblue; }
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
26
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Height/ Width
<!DOCTYPE html>
<html>
<head>
<style>
div { height: 200px;
width: 50%;
background-color: powderblue; }
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
<div></div>
</body>
</html>
27
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div { background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px; }
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>
<div>This text is in a box and has a 50px padding, 20px margin and a 15px green border. The rest of this
doesn't much matter!</div>
</body>
</html>
28
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Link Styles
<!DOCTYPE html>
<html>
<head>
<style>
a:link { text-decoration: none; }
a:visited { text-decoration: none; color: green; }
a:hover { text-decoration: underline; color: red; }
a:active { text-decoration: underline; color: hotpink; }
</style>
</head>
<body>
<p><b><a href="https://www.google.co.uk/" target="_blank">This is a link</a></b></p>
<p>Misc other text</p>
</body>
</html>
29
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Styles for Lists
<!DOCTYPE html>
<html>
<head>
<style>
li {border: solid;}
ul.a { list-style-position: outside; background: #ff9999; }
ul.b { list-style-position: inside; background: #9999ff; }
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>

30
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Styles for Lists
<ul class="a">
<li>Coffee - A brewed drink</li>
<li>Tea - An aromatic beverage </li>
<li>Coca Cola - A carbonated soft drink</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink</li>
<li>Tea - An aromatic beverage </li>
<li>Coca Cola - A carbonated soft drink</li>
</ul>
</body>
</html>

31
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Styles for Tables
❑ Various table elements can take on properties like border,
padding, text-align, width, height and others
• border
• width
• text-align
• border-collapse

32
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Table Styling
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: center;
}
</style>
</head>
33
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Table Styling
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left,
right, or center) of the content in th or td:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>

34
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
CSS – Table Styling
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
35
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
End of the Lecture………..

36
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus

You might also like