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.

  1. Inline CSS
  2. Internal CSS
  3. 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.

inline css

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>
<html lang=”en”>
<head>
<title>CSS Internal Usage</title>
<style>
h1{
color: green;
font-size: 50px;
}
p{
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
internal css
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.

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.

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>

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;
}
p{
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;
 

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

 

5 Comments
  1. […] will install all bootstrap files including CSS and JS file. just you need to run the above […]

  2. […] and web front-end developers. it created by Adobe systems and written in javascript, html, and css. and it is available for Windows, Mac, and Linux. Brackets is an easy text editor which you can […]

  3. […] tag and close </head> tag. and we give our title inside <head> tag. and we include css and js link inside <head> […]

  4. […] What is CSS? Cascading StyleSheet With Full Details and Examples 5 Best HTML Editor in 2019 […]

  5. […] What is CSS? Cascading StyleSheet With Full Details and Examples What is HTML5? With full Definition […]

Leave A Reply

Your email address will not be published.