Scribd
Upload
7 views

Web Technologies - Lecture 5 CSS

Uploaded by

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

Web Technologies - Lecture 5 CSS

Uploaded by

kanchuka induranga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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