Embedded Files
We are going to learn how to use css to make our web pages look a whole lot better.
We are going to learn how to use css to make our web pages look a whole lot better.
Which style is your favourite?
Which style is your favourite?
Here is some html code for a page about breeds of dogs.
Here is some html code for a page about breeds of dogs.
We are going to use this resource to edit the code for this page:
We are going to use this resource to edit the code for this page:
<!DOCTYPE html>
<html>
<head>
<style>
body{}
div{}
h1{}
h2{}
h3{}
p{}
img{}
</style>
</head>
<body>
<h1>Breeds of Dog</h1>
<h2>Three popular breeds of dogs for family pets</h2>
<div>
<img src="https://primary-apps.com/pups/kingcharles.png"/>
<h3>King Charles Spaniel</h3>
<p>The Cavalier King Charles Spaniel is so affectionate and loving and eager to please its owner. He has a very gentle spirit, which coincides with not being a big barker. This happy and playful toy breed is very sociable, and why he’s the ideal companion, especially when it comes to humans, kids, and other animals.</p>
</div>
<div>
<img src="https://primary-apps.com/pups/shihtzu.png"/>
<h3>Shih Tzu</h3>
<p>Shih Tzu dogs are so cute. They’re also an outgoing and happy-temperament breed. They make great family pets, and they’re the best companions, especially for the elderly. They’re so affectionate and lovable, and they’re the perfect lapdog. They’re the quintessential house dog who’s always perky and enthusiastic, and one who loves people.</p>
</div>
<div>
<img src="https://primary-apps.com/pups/labrador.png"/>
<h3>Labrador</h3>
<p>Labrador Retrievers are such sweet-natured dogs. They make great companions, and being working dogs, they also make good therapy and seeing-eyed dogs, and emotional support animals. They’re so cheerful with an upbeat and friendly disposition. They have kind souls and are very trusting and loyal to their families and loved ones.</p>
</div>
</body>
</html>
How to use .class
How to use .class
You can group objects to style them together using 'class'.
With the web page you can style two differnet groups of images separately using, in this case, '.smallImage' and '.bigImage'.
Inline style - you can also write the css inside the html element tag
Inline style - you can also write the css inside the html element tag
<p style="background-color:orange;font-size:100px;">Styled with inline css<p>
<p style="background-color:orange;font-size:80px;text-align:center;border-radius:20%;border:solid purple 8px;">Styled with inline css<p>
Now it is time to code your own webpage.
Now it is time to code your own webpage.
Start with this template.
Start with this template.
Make a new page in your site to save your code.
Make a new page in your site to save your code.
<!DOCTYPE html>
<html>
<head>
<style>
body{}
h1{}
p{}
img{}
</style>
</head>
<body>
<h1>My Heading</h1>
<h2>My subheading</h2>
<img src="https://primary-apps.com/pups/kingcharles.png">
<p>Lots of writing about something.</p>
</body>
</html>
Some sample css
Some sample css
font-size:40px;
text-align:center;
color:red;
background-color:lightblue;
background:radial-gradient(red,orange,yellow,blue);
margin:40px;
padding:40px;
box-shadow:20px 20px 10px rgba(0,0,0,0.3);
border:solid green 8px;
border-radius:40px;
height:400px;
width:400px;
Page updated
Google Sites
Report abuse