Scribd
Upload
6 views

Common HTML & CSS

This document provides an overview of common HTML and CSS elements and how to use them to structure and style a webpage. It explains tags for headings, paragraphs, images, links, lists, tables, and div sections and includes CSS code for formatting text, colors, borders, and layout.

Uploaded by

elles.bu2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Common HTML & CSS

This document provides an overview of common HTML and CSS elements and how to use them to structure and style a webpage. It explains tags for headings, paragraphs, images, links, lists, tables, and div sections and includes CSS code for formatting text, colors, borders, and layout.

Uploaded by

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

Common HTML & CSS

<style>

body {
background-color: put a colour here;
font-family: calibri; Use web safe fonts so the browser recognises them.
text-align: center; Use this if you want all of your text to be centred.
border-style: dotted/dashed/solid;
border-color: put a colour here;
border-radius: put a number between 10px and 100px for curved border corners here;
border-width: put a number starting at 1px for border thickness here;
}

h1 {
text-align: left/right/center;
color: put a colour for your h1 heading;
font-family: put a font for your h1 heading;
}

h2 {
text-align: left/right/center;
color: put a colour for your h2 heading;
font-family: put a font for your h2 heading;
}

img {
width: put a number between 300px - 400px for your image size;
height: auto; Leave this as auto to keep the image in proportion
display: block;
margin-left: auto; Include these three lines if you want to centre your images.
margin-right: auto;
}

table {
border: 1px solid black; Change these for thickness. style & colour of table border.
background-color: red; Change to add a table background colour.
}

hr {
height: 4px; Changes the thickness of a horizontal line.
background-color: red; Changes the colour of a horizontal line.
border: none;
}
Common HTML & CSS

.div1 { Always use the div class name in CSS preceded by a full stop e.g .div1
background-color:lightblue; Adds a background colour to a section.
border-style: dotted/dashed/solid; Adds a border to a section.
border-color: red; Adds a colour to a border.
border-width: 4px; Changes the thickness of the border.
text-align: center; Aligns the text in a section.
}

</style>
Common HTML & CSS

<body>

<h1><u>Put Your Main Heading Here</u></h1>

<h2><u>Put Your Sub-Headings Like This</u></h2> Headings are <h1> - <h6>

<p>Paragraphs of text go between these tags</p>

<br> Anything after this tag is on a new line.

<img src="image name .jpg/png"> Save your image then upload into your image library.

<a href=”www.bbc.co.uk”>Put what to click on here e.g. Click Here For BBC Website</a>

<hr /> Adds a horizontal line to the webpage. Use CSS (above) to change
colour/thickness.

<ul> This is a bulleted list. Change <ul> to <ol> for a numbered list.
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<div>Creates a section in a webpage which you can manipulate with CSS</div>

E.g. Using the CSS above and the following HTML, this would be produced

<div class=”div1”>
<p>This paragraph is in it’s own section and you can give it a border or a different
background colour.</p>
</div>
Common HTML & CSS

<table>This starts a new table.


<tr>This starts a new table row.
<th>Put your column 1 header here</th>
<th>Put your column 2 header here</th>
<th>Put your column 3 header here</th>
</tr> This ends a table row.
<tr>
<td>This is the first entry under the header in column 1</td>
<td>This is the first entry under the header in column 2</td>
<td>This is the first entry under the header in column 3</td>
</tr>
<tr>
<td>This is the second entry under the header in column 1</td>
<td>This is the second entry under the header in column 2</td>
<td>This is the second entry under the header in column 3</td>
</tr>
</table>This ends the table and produces the table below. You need to use CSS (above) to
add borders etc.

Column 1 Column 2 Column 3

First Entry First Entry First Entry

Second Entry Second Entry Second Entry

</body>

You might also like