Kaskadowe arkusze stylów
Cwiczenie 1 Styl lokalny
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1250"><title>Nowa strona 1</title>
<style type="text/css">
<!--
p { color: green; }
</style>
</head>
<body>
<p>Tak wygląda ten styl</p>
</body>
</html>
Ćwiczenie 2
<head>
<style type="text/css">
<!--
p {font-family: Times New Roman color="green"}
h1 {font-size: 30pt}
ul {font-weight: bold}
h2 {color: #FF0000}
-->
</style>
</head>
<body>
<p>Tak wygląda styl pierwszy</p>
<hr>
<h1>A tak wygląda 30 punktowy styldrugi.</h1>
<hr>
<ul>
<li>Pierszy</li>
<li>Drugi</li>
<li>Trzeci</li>
</ul>
<hr>
<h2>A to jest trzeci styl</h2>
</body>
__________________________________________-
Cwiczenie 3 Budowa stylu
<head>
<style type="text/css">
<!--
h3 {font-variant: small-caps; font-size: 15pt; color: green; font-family: Courier}
p { font-family: Helvetica; font-size: 12pt; }
Ol { font-weight: bold; color: #FF0000; }
-->
</style>
</head>
<body>
<h3>TYTUŁ STOPNIA TRZECIEGO, 15-PUNKTOWY, ZIELONY, KAPITALIKI</h3>
<h3>Najczęstrżą formą wspomagającą celowe i zorganizowane zapamietywanie , <br>uczenie się, jest notowanie</h3>
<hr>
<p>Ćwiczenia zaliczeniowe z CSS</p>
<hr>
<Ol>
<li>patrząc</li>
<li>słuchając</li>
<li>rysując na czerwono</li>
</Ol>
</body>
Ćwiczenie 4 Grupowanie selektorów
<head>
<style type="text/css">
<!--
h1, h2, h3 {font-family:Helvetica; color:blue; }-->
</style>
</head>
<body>
<h1>Ten tytuł jest napisany tytułem h1</h1>
<h2>A ten tytuł napisany jest czcionką h2</h2>
<h3>Ten tekst napisany jest tytułem h2</h3>
</body>
Ćwiczenie 4 Styl lokalny
<head>
<style type="text/css">
<!--
<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace; ">Treść akapitu</p>
-->
</style>
</head>
<body>
<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace; ">To jest akapit wyświetlany za pomocą czcionki Andale mono, <br>Courier New lub innej monotypicznej, pogrubionej, o wielkości 12 punktów.</p>
<hr>
<h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sans-serif; ">Treść tytułu</h1>
<hr>
<ul style="font: italic bold 14pt Times; color: red; ">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
<hr>
<hr style="height: 10px; width: 200px; color: lime; ">
</body>
Ćwiczenie 4 Atrybuty akapitu
<head>
<style type="text/css">
<!--
<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace; ">Treść akapitu</p>-->
</style>
</head>
<body>
<!-- Atrybuty akapitu -->
<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace; ">To jest akapit wyświetlany za pomocą czcionki Andale mono, <br>Courier New lub innej monotypicznej, pogrubionej, o wielkości 12 punktów.</p>
<hr>
<h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sans-serif; ">Treść tytułu</h1>
<hr>
<ul style="font: italic bold 14pt Times; color: red; ">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
<hr>
<!--Pozioma linia z atrybutami
-->
<hr style="height: 10px; width: 200px; color: lime; ">
</body>
Ćwiczenie 6 Rozciąganie stylu
<head>
<style type="text/css">
<!--
.BardzoWazne {font-family: Helvetica, sans-serif; font-size: 14pt; font-weight: bold; color: lime; }
PierwszeWyrazy {font-variant: small-caps}
-->
</style>
</head>
<body>
<p>Jakiś akapit i <span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red; ">
fragment objęty poleceniem span </span> oraz reszta akapitu.</p>
<hr>
<span class="BardzoWazne">To jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWazne.</span>
<hr>
<span class="PierwszeWyrazy">To właśnie tak wygląda</span>
</body>
</html>