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
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
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