Codes:
- This will create a basic webpage with some text on it:You need to have a folder for the webpage, with one folder called CSS, and one the name Index (or something similar)
<!DOCTYPE html>
<html>
<head>
<title>Web Demo/title>
</head>
<body>
Hello World!</body>
</html>
The body tag means the text on the page, so any text they would want on the webpage they should put it where 'Hello World!' is.
- This will change the styles of the webpage that you created in the last tutorial thing.
Within the CSS folder make a file called style.css. html {
font-size: 18px;
color: #dedede;
background: #232323;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: 500;}
Then link this file to the html page by writing <link rel="stylesheet" type="text/css" href="css/style.css">
- To add more text onto the webpage you add a paragraph tag (<p>) in-between the <body> </body> section.
Then add a new rule for the paragraph tag in the CSS file.p {
color: #fefefe;
margin-left: 30px;
}
- This is to add in boxes onto the webpage. You put a div tag.
<div class="main-content">
<div class="gridx3"></div>
<div class="gridx3"></div>
<div class="gridx3"></div>
</div>
This goes in the CSS file:
.gridx3
<div class="gridx3"></div>
<div class="gridx3"></div>
<div class="gridx3"></div>
</div>
This goes in the CSS file:
.gridx3
{
background-color: #aaaaaa; width: 180px;
height: 160px;
display: inline-block; margin: 10px;
padding: 5px;
}
background-color: #aaaaaa; width: 180px;
height: 160px;
display: inline-block; margin: 10px;
padding: 5px;
}
Comments
Post a Comment