Cascading Style Sheets in Web Technology - Types of Cascading Style Sheets in HTML
What is CSS (Cascading Style Sheet):
CSS is Cascading Style Sheets that is used to set the style of html elements for the webpage/website. It describes that how the HTML elements are to be displayed when the user view on the screen like PCs, mobile or tablets.
Cascading Style Sheets in Web Technology sets the layout for particular or multiple webpages elements that we want to set the style for that element. Thus we can make the web page better for the user and responsible.
Why we use CSS (Cascading Style Sheets):
CSS is used to set or define the styles for the html elements, webpages, with the designing, layout and variations according to the devices.
For example:
body {
background-color: red;
}
h1 {
color: yellow;
text-align: center;
}
p {
font-family: arial;
font-size: 15px;
}
CSS Syntax:
To write the syntax for css, we firstly write selector and then declaration for that selector. The declaration part contains properties with colon (:) and values with separated by semicolon (;) that are also the part of css syntax.
For example:
p {
font-family: arial;
font-size: 15px;
}
Here, p is the selector, font-family and font-size are properties for the selector, arial and 15px are the values respectively.
CSS element Selector:
In the css element selector, we selects html element by its name.
For example - HTML element is <p>, so css for <p> is as:
p {
font-family: arial;
font-size: 15px;
}
CSS id Selector:
In the css id selector, we selects id attribute of html element by a hash (#) and its id name of the element.
For example - id = "paragraph":
#paragraph {
font-family: arial;
font-size: 15px;
}
CSS class Selector:
In the css class selector, we selects class attribute of html element by a dot or period character (.) and its class name of the element.
For example - class = "class1":
.class1 {
font-family: arial;
font-size: 15px;
}
CSS universal Selector:
In the css universal selector, we set for all of html elements by universal selector (*).
For example -
* {
font-family: arial;
font-size: 15px;
}
CSS grouping Selector:
In the css grouping selector, we selects multiple/all html elements for the same definition or style and separated by comma (,).
For example:
Types of CSS (Cascading Style Sheets):
Types of Cascading Style Sheets in HTML, There are 3 ways to insert the css:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS:
In the inline css, we set the style for only one html element. To set inline css, we use style attribute in the html element.
For example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;text-align:center;">EDUGYAN Heading</h1>
<p style="color:blue;">Paragraph for EDUGYAN.</p>
</body>
</html>
Internal CSS:
In the internal css, we set the style for only one single html page. To set internal css, we use <style> attribute inside the <head> section of html page.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
h1 {
color: red;
text-align: center;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>EDUGYAN Heading</h1>
<p>Paragraph for EDUGYAN.</p>
</body>
</html>
External CSS:
In the external css, we set the style for the whole website. We can apply this external css for entire website because we create external css separately with .css extension. To set external css, we use <link> element inside the <head> section of html page.
For example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>EDUGYAN Heading</h1>
<p>Paragraph for EDUGYAN.</p>
</body>
</html>
Now we create a separate .css external stylesheet with style name and write all the css properties that we want to apply in the whole website for the html elements like:
"style.css"
body {
background-color: orange;
}
h1 {
color: red;
text-align: center;
}
p {
color: blue;
}
Looking Forward:
https://t.co/F0R16fKmNU#introductionofcss #css #inlinecss #internalcss #externalcss #cascadingstylesheet #style #design #webpage #website #howtodesignwebpage #html #webdesign #webdevelopment #edugyanFollow -- @EDUGYAN1— EDUGYAN (@EDUGYAN1) June 9, 2020
0 Comments