Scribd
Upload
169 views17 pages

Https - Myguru - Upsi.edu - My - Documents - 2020 - Courses - MTD3063 - Material - K00814 - 20201005132608 - 03 CSS

This document provides an introduction to CSS (Cascading Style Sheets) and its basic syntax and structure. CSS allows control over formatting and layout of HTML documents. The basic CSS syntax uses selectors to target HTML elements, properties to define styles, and values to set properties. CSS can be applied inline within HTML, internally via <style> tags, or externally in separate .css files. External stylesheets are preferable as they allow a single stylesheet to control formatting across multiple pages. Div and span tags are also introduced to apply styles to portions of a document.

Uploaded by

nurshazihah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
169 views17 pages

Https - Myguru - Upsi.edu - My - Documents - 2020 - Courses - MTD3063 - Material - K00814 - 20201005132608 - 03 CSS

This document provides an introduction to CSS (Cascading Style Sheets) and its basic syntax and structure. CSS allows control over formatting and layout of HTML documents. The basic CSS syntax uses selectors to target HTML elements, properties to define styles, and values to set properties. CSS can be applied inline within HTML, internally via <style> tags, or externally in separate .css files. External stylesheets are preferable as they allow a single stylesheet to control formatting across multiple pages. Div and span tags are also introduced to apply styles to portions of a document.

Uploaded by

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

MTD3063

DATABASE DRIVEN WEB PROGRAMMING


SEM 1 SESSION 2020/2021

1
CSS

2
CSS

YouTube: Evolution of Web Design 1990-2019 3


CSS
• CSS - Cascading Style Sheets
• To control the style of a Web document
• 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.
• Precise positioning.

A GOOD PRACTICE: warna, layout, fonts…


4
STRUKTUR ASAS CSS
CODING: The basic syntax of a CSS rule:

selector
HTML element tags property value
(e.g. p, h2, body, img, table class, (e.g. color, font-size) (e.g. red, 14pt)
ID names)

A GOOD PRACTICE: Notice the { } around the rule and the : before
each value! Close each value with a semicolon ;.
5
STRUKTUR ASAS CSS

<p style="font-size: 10pt; color: red”> CSS ini dalam HTML tag. </p>

6
STRUKTUR ASAS CSS
INLINE (a.k.a. local)

7
STRUKTUR ASAS CSS
INTERNAL
(a.k.a. global or
embedded)

8
STRUKTUR ASAS CSS
EXTERNAL
(a.k.a. linked)

A GOOD PRACTICE:
Use external stylesheet.
9
STRUKTUR ASAS CSS
EXTERNAL
(a.k.a. linked)

as a new file

10
WHY EXTERNAL STYLESHEET?

This single stylesheet can be used to define the look of multiple


pages.

11
<html>
<head>
<link rel=“stylesheet” href=“FitBloggin.css”
type=“text/css” media=“screen”>
<style>
p {color; FF0033;}
</style>
</head>
<body>
<p style=“color: FF0033;”>Some text!</p>
</body>
</html>

12
<html>
<head>
<link rel=“stylesheet” href=“FitBloggin.css” EXTERNAL CSS
type=“text/css” media=“screen”>
<style>
p {color; FF0033;} INTERNAL CSS
</style>
</head>
<body>
<p style=“color: FF0033;”>Some text!</p> INLINE CSS
</body>
</html>

13
PENYEDIAAN WEB PAGE LENGKAP
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).

14
PENYEDIAAN WEB PAGE LENGKAP

15
16
CUBA
17

You might also like