Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a mark up language. A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. The Cascading Style Sheet(CSS) recommendation from the World Wide Web Consortium (W3C), which is implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the possible style sheets or statements that may determine how a given element is presented in a Web page.
CSS
is a style language that defines layout of HTML documents. For example, CSS
covers fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things. HTML can be used to add layout to
websites. But CSS offers more options and is more accurate and sophisticated.
CSS is supported by all browsers today.
stylesheet sheets and html
style rules
Cascading
Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style
properties for a given HTML element. Each property has a name and a value,
separated by a colon (:). Each property declaration is separated by a
semi-colon (;).
Example
First let's
consider an example of HTML document which makes use of <font> tag and
associated attributes to specify text color and font size:
<!DOCTYPE
html>
<html>
<head>
<title>HTML
CSS</title>
</head>
<body>
<p><font
color="green" size="5">Hello,
World!</font></p>
</body>
</html>
We can re-write
above example with the help of Style Sheet (CSS) as follows:
<!DOCTYPE
html>
<html>
<head>
<title>HTML
CSS</title>
</head>
<body>
<p
style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>
Types of CSS:-
1.External Style Sheet
2.Internal Style Sheet
3.Inline Style Sheet
3.Inline Style Sheet
External Style Sheet - Define style sheet rules in a separate
.css file and then include that file in your HTML document using HTML
<link> tag. If you need to use your style sheet to various pages, then
it’s always recommended to define a common style sheet in a separate file. A
cascading style sheet file will have extension as .css and it will be included
in HTML files using <link> tag.
Example
Consider we
define a style sheet file style.css which has following rules:
style.css
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
External.html
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
This will produce following result:
This is red
This is thick
This is green
This is thick and green
Internal Style Sheet - Define style sheet rules in header
section of the HTML document using <style> tag. If you want to apply
Style Sheet rules to a single document only then you can include those rules in
header section of the HTML document using <style> tag.
Example
Let's re-write
above example once again, but here we will write style sheet rules in the same
HTML document using <style> tag:
Internal.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
This will produce following result:
This is red
This is thick
This is green
This is thick and green
Inline Style Sheet - Define style sheet rules directly
along-with the HTML elements using style attribute. You can apply style sheet
rules directly to any HTML element using style attribute of the relevant tag.
This should be done only when you are interested to make a particular change in
any HTML element only.
Example
Let's re-write
above example once again, but here we will write style sheet rules along with
the HTML elements using style attribute of those elements.
Inline.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
This will produce following result:
This is red
This is thick
This is green
This is thick and green
0 comments
Post a Comment