HTML & CSS [Brackets]

Today we were doing web formatting in the workshop.

Screen Shot 2014-11-10 at 16.26.17

We downloaded a file in which there was HTML to open within the program Brackets. With this set of HTML we had to lay the format out so that it wasn’t clumped all together, so it was all separated and understanding how to set things up in Brackets.

Screen Shot 2014-11-10 at 15.25.31

after we had sorted the formatting layout. we then moved on to the stylesheet (CSS).

By doing the following

.container {
width: 600px;
}

.box {
width: 200px;
float: left
}

the container is what holds the box which has the text within.

Screen Shot 2014-11-10 at 15.35.25 Screen Shot 2014-11-10 at 15.35.50

after we had understood that we then had to change the colour of all the boxes and give them a border with padding which then we had to use:

.box {
width: 200px;
float: left;
background: #CECEF6;        //this gave us the background of the boxes
border: 2px solid #000000;  //this was then used to put a border around each box with the thickness of 2px
padding: 25px 25px 25px 25px

}

Screen Shot 2014-11-10 at 15.35.50 Screen Shot 2014-11-10 at 15.50.47

we were then shown who to change one colour of the boxes which is known as the special-box

.container {
width: 800px;
}
.box {
width: 200px;
float: left;
background: #CECEF6;
border: 2px solid #000000;
padding: 25px 25px 25px 25px

}

.special-box {
background: #6c00ff;
}

we have to make sure this goes after the .box as this would not work if it is before this.

Screen Shot 2014-11-10 at 15.54.37

we could then add colour to the text which has the <span> around it. this makes that text a different colour.

.box-text{
color: #28a4d0;

}

Screen Shot 2014-11-10 at 16.00.35

after Kyle told us to search up how to change the colour of each box when we hover over it, the code i found was

a:hover{

   background-color: Yellow;

}

but the a in the code is used for hyperlinks therefore it would only highlight the word. so i then changed the code to

.box:hover {
background-color: #ba00ff;
}

By changing it to .box this meant that the boxes would be the ones that are highlighted which it then looked like the following  when the mouse hovered over:

Screen Shot 2014-11-10 at 16.10.38 It made the colour change from lilac to Bright Purple/pink colour, & with this you can also change the padding and border.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s