html and css basics

Question 1

when creating a new file, why does it have to end with a .html or .css? e.g website.html

Answer 1

This tells the computer, this file contains html code rather than text

Question 2

how do you create a button?

Answer 2

<button></button>

Question 3

what is a html element?

Answer 3

An HTML element is defined by a start tag, some content, and an end tag.

Question 4

what is syntax?

Answer 4

The rules that govern the structure of the symbols, words, and punctuation found in programming languages.

Question 5

what is an anchor element and what is the code to create a link to a website?

Answer 5

an anchor element link to another website. <a>link to youtube</a>

Question 6

what is a html attribute and give an example?

Answer 6

html attribute = modifies how an element behaves, e.g href- is the attribute name “” is the attribute value. The attribute name tells us what we are modifying and the value tells us we are modifying it to.

Question 7

how many attributes can you have on an element?

Answer 7

you can have multiple attributes.

Question 8

when creating a link what attribute do you need to make it in a new tab.

Answer 8

target=”_blank”

Question 9

give an example of multiple attributes in 1 anchor element

Answer 9

<a>link to youtube</a>

Question 10

what element do you need to write css?

Answer 10

<style></style>

Question 11

what is a css selector? give an example

Answer 11

css selector= which elements we’re targeting.
button {
}

Targeting all button on the page.

Question 12

what is a css property and a css value? give an e.g

Answer 12

css property = it tells the computer what we are changing,
css value = what we are changing the property to

button{
background-color: red;
}
background color is the css property because it tell the computer we are going to change the background colour.
red is the css value because we are changing the background colour to red.

Question 13

create a button (the button has to say subscribe) with the css property and value listed below:
background colour - red
text colour - white
border - none
height - 36px
width - 105px
rounded corners on the border
change the cursor to a pointer

Answer 13

<style>

button {
background-colour: red;
color: white;
border: none;
height: 36px; 
width: 105px;
border-radius: 2px;
cursor: pointer;
}

</style>

<button>SUBSCRIBE</button>

Question 14

what is rbg and what does it stand for?

Answer 14

RGB (red, green and blue) refers to a system representing the colors used on a digital display screen.

Question 15

what is a class attribute and what does it do and give an example.

Answer 15

class attribute, class=””

<style>

.subscribe-button {                                  
background-colour: red;
color: white;
border: none;
height: 36px; 
width: 105px;
border-radius: 2px;
cursor: pointer;
}

</style>

<button>SUBSCRIBE</button>

This means all the css code will only apply to the subscribe button not anything else.

Question 16

1. what is the hover effect and what is the code for it?
2. what is the code to change the effect when you click on the button?

Answer 16

1. The hover effect is when ever you hover over a button/shapes.
   e.g
   .subscribe-button:hover {
   }
2. .subscribe-button:active {
   }

Question 17

what is the code for transparency?

Answer 17

opacity: 1; the number changes from 1 to 0. The closer to 0 the more transparent it become

Question 18

what is the code for shadows?

Answer 18

box-shadows: ;
e.g
.tweet-button:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}