Scribd
Upload
17 views

HTML- CSS Notes

Uploaded by

coxmakokha02
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy