Scribd
Upload
17 views

HTML- CSS Notes

Uploaded by

coxmakokha02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

HTML- CSS Notes

Uploaded by

coxmakokha02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML/CSS

Basic Styling:
Background color – rgb
Border – None
Border-radius – px
Border-style – Solid. Solid/same color around border
Color – (Text Color)
Transition – In secs
Width – px
Height – px
Cursor – pointer
Border-style – solid
Margin – px. Outside space between borders of buttons. Right, left, top, bottom. E.t.c
Padding – px. Space between text and border of button.
Vertical-align – top. Align buttons to top of page

Hover:
Opacity – Number Values
Box-shadow – 0px 0px 0px color. (5 5 10 black, is good )

Active:
Opacity – Number value

Text:
Font-weight – Number values, hundreds. (Boldness)
Font-size – Number values, Tens. (Text size)
Color – Color
Notes:
Button width/height - Not always a good idea to use height and width for buttons as the
button content might overflow the button.
How to create stretch design – In basic styling, use the transition property then list the
padding properties under it. Set the values as seconds, e.g- transition: padding-top 1s, .
Then under the hover styling, type the padding properties and set the values to be a bit bigger
than the basic style padding values.
.back-button{
background-color: rgb(255, 164, 28);
color: white;
border: none;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
transition: padding-top 1s,
padding-bottom 1s,
padding-left 1s,
padding-right 1s;
}
.back-button:hover {
padding-top: 12px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
}
Search Numbers – HTML: <button class="back">Back</button>
<a class="search"
href="https://google.com">1</a>
<a class="search"
href="https://google.com">2</a>
<a class="search"
href="https://google.com">3</a>
<a class="search"
href="https://google.com">4</a>
<a class="search"
href="https://google.com">5</a>
<button class="next">Next</button>

You might also like