CSS stands for Cascading Style Sheet and is the styling part of Html (though not just limited to HTML). It is the primary part of modern WWW alongside HTML and JavaScript. CSS is designed to separate the presentation or the appearance part of a web page so that there is more control and flexibility, and less repetition owing to the fact that the same CSS file can be shared across all or many of the pages of a website. You can make changes just once and it will reflect in all the pages as modern websites use a certain style for most if not all the pages.
In this article we are going to learn how to make certain styling with CSS in an HTML page.
How to Center an Image
HTML
CSS
.center-img {
display: block;
margin: 0 auto;
}
Please note that the image needs to be smaller in width to be centered. You can also change the width by using width: 80% or the width in percentage you want. Defining a width would automatically change the height as well while maintaining the aspect ratio.
How to Center Text
HTML
Text Here
CSS
.center-text {
text-align: center;
}
How to Center Text Vertically
HTML
Text Here
CSS
.center-center-text-vert {
display: table-cell;
vertical-align: middle;
height: 500px;
}
One caveat with the above is that you'll have to specify the height of the element in pixels. In dynamic web applications the height can be set with JavaScript, though.
How to Change Text Color
HTML
Text Here
CSS
.color-blue {
color: #2222CC;
}
How to Change Font
HTML
Text Here
CSS
.font-monospace {
font-family: monospace;
}CSS (Alternate web-based font import)
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
.font-monospace {
font-family: 'Major Mono Display', monospace;
}
How to Make Text Bold
HTML
Text Here bold text
It is better to use the HTML tag to mark bold text. But, you can also use CSS font-weight property as in the following example.
HTML
Text Here
CSS
.font-monospace {
font-weight: bold;
}
How to Change Background Color
CSS
body {
background-color: #333333;
}
You can also set the background color of any element as in the following example:
HTML
Text Here
CSS
.ele {
background-color: #CCCCCC;
}
How to Set Background Image
CSS
body {
background: url(https://picsum.photos/1600/900);
background-repeat: no-repeat;
background-size: cover;
}
background-repeat is set to no-repeat as the default value is to repeat the the same image to fill the whole container. The other property background-size can be left to default (which is auto) in which case the image will be displayed as-is whether or not it fills up or is short of the size of the container. The value cover on the other hand will resize the image (maintaining the aspect ratio) to fill the container (in this case the body element). This is the value which would make the most sense in a typical case, but you can always experiment.
How to Center a Button
HTML
CSS
.center-button {
margin: 0 auto;
display: block;
}
How to Rotate an Image
HTML
CSS
.center-img {
display: block;
margin: 100px auto;
transform: rotate(45deg);
} 
