Scribd
Carica
8 visualizzazioni

CSS Samples

Il documento mostra un esempio di layout di pagina web utilizzando CSS. Include stili per l'intestazione, il contenuto principale e il piè di pagina. Vengono utilizzati float, display inline-block e altre proprietà CSS.

Caricato da

Ahmad Marwad
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
8 visualizzazioni

CSS Samples

Il documento mostra un esempio di layout di pagina web utilizzando CSS. Include stili per l'intestazione, il contenuto principale e il piè di pagina. Vengono utilizzati float, display inline-block e altre proprietà CSS.

Caricato da

Ahmad Marwad
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First CSS</title>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

h1, h2 {
color: rgb(187, 55, 55);
}

#pageTitle {
border: 1px solid brown;
}

.heading {
background-color: yellow;
}

.box {
width: 100px;
height: 100px;
border: 1px solid gray;
display: inline-block;
}

.redBox {
border: 2px dashed black;
background-color: red;
}
</style>
</head>
<body>
<h1 id="pageTitle" class="heading">MY FIRST CSS - 1st H1</h1>
<p>This is a <span>paragraph</span>.</p>

<h1 class="heading">HEADING - 2nd H1</h1>

<p>This is a <span>paragraph</span>.</p>

<h2 class="heading">Heading 222</h2>


<p class="heading">Lorem ipsum</p>

<div class="box">
Box
</div>
<div class="box redBox">
Box
</div>
<div class="box">
Box
</div>
<div class="box redBox">
Box
</div>
<div class="box">
Box
</div>
</body>
</html>

PAGE LAYOUT 1 USING CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Layout 1 using CSS</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
header,
main,
footer {
border: 2px solid black;
}
header {
background-color: lightgray;
}

#logo {
font-weight: bold;
color: white;
background-color: black;
padding: 8px;
display: inline-block;
}

#company {
font-weight: bolder;
display: inline-block;
}

nav {
float: right;
margin-top: 0;
}
a {
text-decoration: none;
background-color: lightblue;
padding: 8px;
display: inline-block;
}

a:hover {
color: white;
background-color: blue;
}

footer {
text-align: center;
}
footer:hover {
color: red;
}
</style>
</head>
<body>
<header>
<span id="logo">LOGO</span>
<span id="company">CompanyName</span>

<nav>
<a href="#">Home</a>
<a href="#">Products/Services</a>
<a href="#">About</a>
</nav>

<br clear="both" />


</header>
<main>
<h1>Welcome!</h1>

<p>This is my website.</p>
</main>
<footer>Copyright © 2023 Me. All rights reserved.</footer>
</body>
</html>

Potrebbero piacerti anche