CSS Note

LINKING HTML TO CSS
  <head>
  <link rel="stylesheet" href="style.css">
 </head>


body {
 background-color: azure;
 color: white;
}

h1 {
font-family: Helvetica;
color: white;
 text-align: center;
}

.className {
	border: solid 10px red;
	border-radius: 10px
}

p {
	border-radius: 10px;
	background-color: lightBlue;
	border: solid;
}

border is a property that adds border to an element

border-radius is a property that rounds the corners of an element. If we set the radius to 10px, the border curves 10px before the corner.

To make an image a circle, we set border-radius to half the width of an image. It only works if the image is a square though!

img {
 height: 100px;
 width: 100px;
 border-radius:
50px
;
 border: solid 5px;
}

Q&A
	What forms a rule?
		A selector and its properties perform a CSS rule.
2) Any element has four paddings counted clockwise from top to right, to bottom, to left.

  padding-top:
20px
;
 padding-right:
20px
;
 padding-bottom:
20px
;
 padding-left:
20px
;

We can set each padding value in one line using the padding property and a pixel value for each side.

 padding: 10px 10px 10px 10px;

To add padding to the bottom, set the third value to 100px

3) Shorthands work with the margin and border-radius properties, making it possible to create interesting styles with fewer lines of code.

button {

margin: 0 15px 0 15px;
 width: 100px;
 height: 100px;
 border-radius: 15px;
 background-color: red;
 border: solid 5px dimGray;
}

To take border-radius to the extreme, we can set a corner to the same value as the height or width, like 100px in this case.

 border-radius: 0 0 0
100px
;