CSS styles examples
Mark E.
/* Set the font family and size for the entire page */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
/* Style links */
a {
color: #007bff; /* Set the link color to blue */
text-decoration: none; /* Remove the underline from links */
}
/* Style buttons */
button {
background-color: #007bff; /* Set the background color to blue */
color: #fff; /* Set the text color to white */
padding: 10px 20px; /* Add some padding */
border: none; /* Remove the border */
border-radius: 4px; /* Add some rounded corners */
cursor: pointer; /* Change the cursor to a pointer on hover */
}
/* Style headings */
h1, h2, h3 {
font-weight: bold; /* Set the font weight to bold */
margin-bottom: 20px; /* Add some spacing below the heading */
}
/* Style images */
img {
max-width: 100%; /* Make sure images don't exceed their container */
height: auto; /* Prevent images from stretching vertically */
}
/* Style forms */
input[type="text"], textarea {
border: 1px solid #ccc; /* Add a border */
padding: 10px; /* Add some padding */
border-radius: 4px; /* Add some rounded corners */
}
input[type="submit"] {
background-color: #007bff; /* Set the background color to blue */
color: #fff; /* Set the text color to white */
padding: 10px 20px; /* Add some padding */
border: none; /* Remove the border */
border-radius: 4px; /* Add some rounded corners */
cursor: pointer; /* Change the cursor to a pointer on hover */
}
These styles set the font family and size for the entire page, style links and buttons with a blue color and some padding and rounded corners, style headings with bold text and some margin, style images so they don't exceed their container, and style forms with borders, padding, and rounded corners. You can customize these styles to fit your design.