CSS (Cascading Style Sheets) is used to give styles to our web content. with the help of CSS, we can easily make our page beautiful and attractive. we can decorate our webpage with background images and give them colors as we like.
This style sheet language also allows you to add effects or animations to your website. You can use it to display some CSS animations like click button effects, spinners or loaders, and animated backgrounds. CSS selects paragraph text, setting the color to any color like blue, red or many colors.
for example:-
if we want our paragraph to be blue,
p {
color: red;
}
There are three ways you can use to implement CSS into your HTML: internal, external and inline styles.
Let’s start one by one.
Internal CSS:-
This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.
Advantages of Internal CSS:
You can use class and ID selectors in this style sheet. Here’s an example:
.class {
property1 : value1;
property2 : value2;
property3 : value3;
}
#id {
property1 : value1;
property2 : value2;
property3 : value3;
}
External CSS:-
This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.
You can easily and quickly insert CSS rules to an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
inline CSS:-
This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.
Inline — apply CSS rules for specific elements.
some of the basic properties are,
color:- Sets the color of a text.
line-height:- Sets the distance between lines.
letter-spacing:-Increase or decrease the space between characters like normal, length
text-align:- Aligns the text in an element like left, right, center.
text-decoration:- Adds decoration to text like none, underline, overline, line-through.
*for border we use following
border:- Sets all the border properties in one declaration,border-width, border-style, border-color
border-bottom-color:- Sets the color of the bottom border, border-color
border-bottom-style:- Sets the style of the bottom border, border-style Sets the width of the bottom border, border-width
border-color:-Sets the color of the four borders, color name, hex number, rgb number, transparent, inherit
we can also give the font in same way .