In: Computer Science
What does it mean that the style sheets are cascading? What is the order of priority of CSS? List 5 things you can do with CSS, which cannot be done easily in HTML.
CSS styles:
CSS stands for cascading style sheet. CSS helps the html page to
format the web page layout with uniform design.
Css file defines styles of the elements in the html tags like body head, h1 ,h2...h6, p and link as per user wishers or override the existing look of the html tags on web pages using the css propery and value .
---------------------------------------------------------------------------------------------------------------
Order of css properties:
---------------------------------------------------------------------------------------------------------------
Sample html page ,sample.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is heading 1</h1>
<h2>Sub heading</h2>
<p>New had happen unable uneasy. Drawings can followed
improved out sociable not. Earnestly so do instantly pretended. See
general </p>
<p>Seeing rather her you not esteem men settle genius excuse.
Deal say over you age from. Comparison new ham melancholy son
themselves.
</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
Now let us want to apply the styles for this page
as
body back ground as grey color
All h1 text blue color
All h2 text as green .
All paragraph text as white and background color as black
All the above can be simply done using css styles as shown
below
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:grey;
}
h1{
color:blue;
}
h2{
color:green;
}
p{
color:white;
background:black;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>Sub heading</h2>
<p>New had happen unable uneasy. Drawings can followed
improved out sociable not. Earnestly so do instantly pretended. See
general </p>
<p>Seeing rather her you not esteem men settle genius excuse.
Deal say over you age from. Comparison new ham melancholy son
themselves.
</p>
</body>
</html>
Sample Output: