What is CSS? Cascading StyleSheet With Full Details and Examples

CSS stands for Cascading StyleSheet, and it is a language which uses with HTML. it gives style to HTML tag. we can’t design website or web pages only with HTML but besides that, we have CSS which is the most important and popular language. CSS gives style or design your page in the way you want, you can style your content or section in any way like for example we have a building a new building without style and design which is simple so now we want to give style so we use a different material that it looks beautiful, so web pages is the same we build web page with HTML and we give style with Cascading StyleSheet.

Cascading StyleSheet is the first technology after HTML, you need to learn CSS after you learned HTML because HTML is used to define the structure of your content and CSS is used to style your content. for example, in we have some HTML tag like h1, p, font, img and many more so what we will do that we will give style to tag with help of CSS, the Cascading StyleSheet give style to your HTML tag.

What is HTML5? With full Definition, Tags, and Example 5 Best HTML Editor in 2019

How many usage CSS have?

In Cascading StyleSheet we have 3 usages like.

Inline CSS
Internal CSS
External CSS

1. Inline StyleSheet:

An inline style may be used to apply a unique style for a single element. for example.

<h1 style=”color:green”>Hello Viewer</h1>

look to the bold text it is an inline style we have an h1 tag and now let’s give a green color to the tag first write style then give the equal = sign and start double colon or single colon and then give property name then semicolon and then give property value and close double colon or single colon. this is the way to use inline style and give style to your content.

2. Internal StyleSheet:

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

for example:

<!DOCTYPE html>

<head>

<title>CSS Internal Usage</title>

<style>

h1{

color: green;

font-size: 50px;

}

color: blue;

}

h2{

color: red;

}

</style>

</head>

<body>

<h1>Hello dear</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, ex.</p>

<h2>Cascading StyleSheet topic</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

</body>

</html>

so here is the output

as we used Internal StyleSheet in HTML file. you should code your CSS in the <head> section because we can’t do it anywhere else.

What is Bootstrap? Learn From Basic with Examples

3. External StyleSheet:

with an external stylesheet, you can change your entire website design. with only including one file in your project, every project has one CSS file that every coding of CSS is code in that file. you can simply give style to your content by using Cascading StyleSheet. you have to give <link> to your CSS file inside <head> tag like.

an external StyleSheet can be written in any editor . but it won’t contain html extension, the StyleSheet must be saved a .css extension.

here are some coding of the style.css file

body{

background-color: green;

color: #fff;

font-family: Arial, Helvetica, sans-serif;

}

h1{

color: #fff;

font-size: 50px;

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

}

font-size: 16px;

color: #ccc;

text-align: center

}

Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

What is PHP Language? and How to start with the basic code of PHP?

StyleSheet Property and Value:

here are some stylesheet property name and property value that given as an example. each property has there own value it is not interchangeable.

background-color	it will give a background color to the content
color	it will give color to the content
font-size	it will increase and decrease the text size
margin	it will give a position to the content
padding	it will give space to the content from its parent
font-family	it will give font style to the content
width	it will give width to the content
height	it will give height to the content
border	it will give a border to the content
top, left, right, bottom	these are used to set a position of the content