Type of css
Type of css
1. Inline CSS
It helps you to apply unique style rules in specific HTML elements. Right next to the text it decorates. The style attribute specifies properties and values. Inline styles placed right where you need next to the text or graphic to decorate.insert inline styles any where in the middle your HTML code giving you real freedom to specify each web page element. use inline styles to add the style attribute to the relevant element. The style attribute it can contain any CSS property.
Inline CSS :-
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green">This is a heading</h <p style="color:blue">This is a paragraph.</
</body>
</html>
Inline CSS
output
2)2. Internet CSS
An internal style sheet may be used if one single HTML page has a unique style. In this way. at the top of a web page document. When you embed a stylesheet you write the style rule directly within the HTML document. You have to enclose the style rules within the <style> and </style> tag pairs and place this pair within the head section of the HTML document. With the style tag Type attribute is used to define to define the format of stylesheet you are using
Internet CSS
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: light-green;
font-size: 20px;
}
h1 {
color: maroon;
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Internal Style Sheet</h1> <p>Internal styles are located at the top of each web page, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet permit you to 'override' an external style sheet for that special page that wants to be an individualist. </p>
</body>
</html>
Internet CSS
output
3. External CSS
External style sheet keep the style rules in a separate file, apart from the HTML document. In a separate file An external CSS file can be created with any text or HTML editor such as "Notepad", "Notepad++" or "Dreamweaver". A CSS file contains no HTML, only CSS. You simply save it with the .css file extension. The advantage of using external style sheets is that you can apply the same style rules to more than one document in your Website. This enables you to quickly change the appearance of your web page in the future. By defining your styles in a single document and linking them to multiple pages, you only need to edit the style sheet to change the presentation style to all pages linked to it. You can link to the file externally by placing one of the following links in the head section of every HTML file you want to style with the CSS file.
External CSS
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myFirstStyleSheet.css">
</head>
<body>
<h1> External (In a separate file) </h1> <p> External style sheets are separate files full of CSS instructions (with the fil When any web page includes an external stylesheet, its look and feel will be contr file. This is how you change a whole website at once. And that's perfect if you wa latest fashion in web pages without rewriting every page. </p>
</body>
</html>
External CSS output
CSS Selectors
The CSS selector is used to select the elements that you want to style. It select the HTML element ccording to its id, class, type, attribute etc. The selectors are the part of css rule set which contains e selector name and the declaration block.
CSS Syntax
Selector {Property1: value1; Property2: value2;..........
A CSS rule set contains a selector and a declaration block which is shown below:
Post a Comment