CSS and Divs

CSS is a style sheet language which is used to make website aesthetically pleasing. Written in a markup language, the style sheet is used to describe the look and formatting of the document such as choosing its layout, colour and fonts.

The most important thing one must remember is to link the CSS file to the HTML file in order for the CSS commands to work on your html code. In order to do this you must put this code in you HTML file anywhere between the head and the body:  <link rel=”stylesheet” href=”Style.css” type=”text/css” />

Style.css would be the name of your CSS document which you’ll have to write down in order for HTML to import it.

 

We were also introduced to divs which are very important because they help separate and divide your work into sections which make it cleaner and easier to read. There are two types of divs:

div id – This can only be used once. In CSS, the symbol to put in front of the div name is . (fullstop)

div class – A class can be used more than once and the symbol in CSS is a # (hashtag)

 

Here are some CSS commands on how to change the colour of background and texts etc…

Changing the background of the body

body {

background-color: white;

}

Changing the background of a div id called first:

#first {

background-color:white;

}

Changing the background colour of a div class called second:

.second {

background-color:white;

}

 Changing the colour of the text of the header:

h             {

color:white;

}

Changing the margin of an image or text:

img {

margin-left: 150px

}

p {

margin-top: 10px

}

And here is my attempt at creating my first website ever!

 HTML Code:

<html>

<head>

<link rel=”stylesheet” href=”Style.css” type=”text/css” />

<title>Music Lovers</title>

<img src=”music.jpg”/>

<body>

<div id= “first”>
<h1>Genre</h1>
<p>- Rap</p>
<a href=”http://www.youtube.com/watch?v=bmXumtgwtak”>Link for rap song<a/>
<p>- Pop</p>
<a href=”http://www.youtube.com/watch?v=QGJuMBdaqIw”>Link for pop song</a>
<p>- Techno</p>
<a href=”http://www.youtube.com/watch?v=EpbjEttizy8″>Link for techno song</a>

<div id= “second”>
<h1>Artist</h1>
<p>- David Guetta</p>
<a href=”http://en.wikipedia.org/wiki/David_Guetta”>Link to Guetta’s bio here</a>
<p>- Katy Perry</p>
<a href=”http://en.wikipedia.org/wiki/Katy_Perry”>Link to Perry’s bio here</a>
<p>- Eminem</p>
<a href=”http://en.wikipedia.org/wiki/Eminem”>Link to Eminem’s bio here</a>

</body>

</head>

</html>

 

CSS Code:

body {
background-color: aqua
}

img {margin-left: 150px}

h1 {color:red}

#first {
background-color:white;
}

#second {
background-color:grey;
}

p {
margin-top: 10px
}

And here is the final result! (WARNING it looks terrible):

musicwebsite

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s