Scribd
Upload
15 views

HTML- CSS Notes

Uploaded by

coxmakokha02
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

HTML- CSS Notes

Uploaded by

coxmakokha02
Copyright
© © All Rights Reserved
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