Scribd
Upload
23 views

Tutorial Css Tutorial Css Tutorial Css T

1. The document discusses different CSS properties for formatting text elements like paragraphs and headings, including text alignment, color, font, and background properties. 2. Examples are provided of using CSS inline with HTML, internal and external CSS, and CSS classes and IDs to style elements. 3. CSS color properties demonstrated include hex codes, RGB values, and color names for styling text elements differently.

Uploaded by

Kas Meya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Tutorial Css Tutorial Css Tutorial Css T

1. The document discusses different CSS properties for formatting text elements like paragraphs and headings, including text alignment, color, font, and background properties. 2. Examples are provided of using CSS inline with HTML, internal and external CSS, and CSS classes and IDs to style elements. 3. CSS color properties demonstrated include hex codes, RGB values, and color names for styling text elements differently.

Uploaded by

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

!

"
!

#
$

$ #
% &'
$ %('
)

$
* +
, - . . . *./ +

( ) / ! ) &
! ) 0 )
! ) &

!
! 1
#2
#
#" 3 )
#( 4
# ! &
# #
#"

1
5 &1 ) 6 01) ! 7
&5 1 6 # 1 7

!
&
, 8579

0 "
(
:)

"
& p {margin-left: 20px} 0 P{font-family:”sans serif”}

3. 4.
p {text-align:center;color:red} body{ color:black}

5. 6.
p h1,h2,h3,h4,h5,h6
{ {
text-align: center; color: green
color: black; }
font-family: arial
}

1
3 ) *&+
;
3 :) ! *0+
3 !
*/!<+
3 )
*=+

& >
? #
1
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>

2
0
? : : !
,
2
1
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
/ >
? 1
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan
CSS</p>
</body>
</html>

"
! ? #
#
1

p.right {text-align: right} .right {text-align: right}


p.center {text-align: center} .center {text-align: center}

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

3
: ! 1

<p class="center bold">


This is a paragraph.
</p>

3
$%

>" 1
" ! !
-
" @
3 )
3 @

1
<html>
<head>
<title>atribut id</title>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>pantun</h1>
<h2 id = "miring">
kalau ada jarum yang patah<br>
jangan disimpan dalam peti
</h2>
<h3 id = "tebal">
kalau ada kata yang salah<br>
jangan disimpan dalam hati
</h3>
</body>
</html>

! % "

1
<html>
<head>
<title>komentar</title>
<style type = "text/css">
<!--
/*
h3.merah { color: red; }
*/
h3.biru { color: blue; }
-->
</style>
</head>
<body>
<h3 class = "biru">biru? pasti!</h3>
<h3 class = "merah">merah? pasti!</h3>
<h4 class = "merah">merah? nggak mungkin!</h4>
</body>
</html>

4
&

" ! !
! ! !

, 1> 1> ! A1 A ! ;1 ;

1
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html

./ 1 ( B./ B * &
0+

( " C > A ; ./
/ & D &
= & = 0

# D & D &

# > D & = &

# $ D & D &

# $ D & D &

)
#

# > D & D &

# D & D &
E

5
# < 0

# )
# < & D &

# > = & =

! '

" ! !
! ) !
!

, 1> 1> ! A1 A ! ;1 ;

./ 1 ( B./ B * &
0+
( " C > A ; ./
D & D &

D & = 0

)
# E
# E
# E
# E
# E
# E
# E
# E

: D & D &

#
#

#
# #
# #
# #
#
# #
#
#
#
6
D & D &

( ! D & D 0
) ! )

) ) D & = 0
) )

"

"

<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>

( ) > 1> ! 1 > ! A1 A ! ;1 ;

./ 1 ( B./ B * &
0+

% # * $+ , - ./
# < & F 0

# < & = 0
*
B B
+
# < & = 0
7
# < & = 0
*
B B
+
# < & = 0
! !

( #

" ! !
! ) E !

<html>
<head>
<style type="text/css">
body
{
background-image: url('logo_canisius.jpg');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
</head>
<body>
</body>
</html>

( ) > 1> ! A1 A ! ;1 ;

./ 1 ( B./ B * &
0+

% # * $+ , - ./
$ D & = &

! "
# D & = &

# D & D &
#

# * $ + D & D &

8
# D & = &

# %
#! " %! "
# : D & D
#
#
#

" ! ! !

& 3 !

1
<html>
<head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

( ) > 1> ! A1 A ! ;1 ;

./ 1 ( B./ B * &
0+

% # * $+ , - ./
$ & " % D & D &
& '
& (
& ")
& & %

#
#
9
#
# $ E & % / & D &
: & %

# E E # / & D &
#

#
#

# E # ) # # # 0
)
# #

# # # # 0
#

#
#

#
#

#
#
# D & D &

G
#) " # D & = &
#
# D & D &

&HH
0HH
/HH
DHH
<HH
=HH
FHH
IHH
JHH

'

" !

10
1
<html>
<head>
<style type="text/css">
p
{
font: italic small-caps 900 20px arial
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

( 1B # B!

(
5
1 &0
7

5
1 # &0
7

5
1 G # JHH &0 :&D
7

5
1
7
( C
* % #
& " % # )
& ' ) ! K! E
& ( " ) 1,
& ")

& & %
" * ! # !
+
> "
"
# "
#
# "

11
" ! !

<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url('nextsteplogo.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

( ) > 1> ! A1 A ! ;1 ;

./ ( B./ B * &
0+

% # * $+ , - ./
# $ " " % %! D & = &
" " % ! "
" " %
# # # D & = &

# # # D & = &

# # # D & D &

# #E
#
#
#
#
#
#
#

12
#
#
# & F 0

# 0

"

5
# 1
7

( C
* % #
" ( )
, (
(
L (

" "$
!
!

1
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
13
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color"</p>
</body>
</html>

( ) > 1> ! A1 A ! ;1 ;

./ ( B./ B * &
0+

% # * $+ , - ./
$ ( D & D &
" %

# $ ( D & = &
" %

# # D & = 0

# # " % D & = 0

# # D & D &

# D & = &
! )

# $ & ( D & = &


" %

# # D & = 0

# # " % D & = 0

# # D & D &

# $ ( D & = &
" %

# # D & = 0

14
# # " % D & = 0

# # D & D &

# D & = &
! )

# $ !( D & = &
" %

# # D & = 0

# # " % D & = 0

# # D & D &

# $ D & D &

!
)
)

> ) )
) ! ! !
$

- ; > ) I M N> !M
I ! )
M ! N

( ) > 1> ! A1 A ! ;1 ;

./ B./ B
* & 0+
% # * $+ , - ./
$ ! D & D &

15
&
# D & D &

# / & D &

# / & D &

# / & D &

16

You might also like