Basics About Css
Css :-(Cascading Style Sheets)
- Css is a language that describes the style of an HTML document.
- Css describes how HTML elements should be displayed is a simply designed language intended to simplify the process making web-pages presentable.
- Css allows you to apply style to web-pages.
- More importantly, Css enables you to do this independent of the HTML that makes up each web-page.
- 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 (;).
Advantages of CSS:-
- Css saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.
- Pages loaded faster - If you are using Css, you do not need to write HTML tag attributes every time. Just write one Css rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.
- Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
- Superior styles to HTML - CSS has a much wider array of attributes than HTML , so you can give far better look HTML page in comparison of HTML attributes.
- Multiple device compatibility - style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
- Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So it's a good idea to start using Css in all the HTML pages to make them compatible to future browsers.
Disadvantages of CSS:-
- Slower development - You have to build everything form scratch.
- Steeper learning curve - Beginners may take longer to master layout and responsiveness.
- Manual responsible - Requires more effort to make designs responsive for different screen sizes.
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!</p>
</body>
</html>
.We can write above example with the help of style sheets :
<!DOCTYPE html >
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style=" background-color: skyblue; color:green;font-size:24px;">Hello world!</p>
</body>
</html>
Output is :-
Types of CSS :-
Three types of CSS -
1. Inline CSS
2.External CSS
3. Internal CSs
1. Inline Css - Define style sheet rules directly along with the HTML elements using Style attribute.
2. External Css - Define style sheet rules in a separate. Css file and then include that file in your HTML document using HTML <link> tag.
3. Internal Css - Define style sheet rules in header section of the HTML document using <style> tag.
Let's see all the three cases one by one with the help of suitable examples:
You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag.
Example:-
<!DOCTYPE html>
<html>
<head>
<title> HTML Inline Css</title>
</head>
<body>
<p style="text-decoration: underline">
World bank </p>
<p style="background-color:yellow">Education is best</p>
<p style="font-weight:bold">India is best</p>
<p style="font-style:italic">Indian institute of computer science</p>
<p style="color:brown">Honesty is the best policy</p>
</body>
</html>
Output is:-
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 is following rules:
Body
{
Background-color: yellow;
}
.bob
{
background-color: skyblue;
color:red;
}
.tim
{
background-color: Pink;
text-decoration: underline;
text-align: center;
}
By using HTML file-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="styles.css">
</style>
<title></title>
</head>
<body>
<h1 class="bob"> IICS INDIA</h1>
<h3 style=color:green;>Best india</h3>
<h2 class="tim">This is External css</h2>
</body>
</html>
Output is :-
3. Internal Css -
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:-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bob
{
color:red;
}
.kim
{
text-decoration: underline;
text-align: center;
}
#king
{
text-align: right;
background-color: skyblue;
color:brown;
}
</style>
<title></title>
</head>
<body>
<h1 class="bob"><b>IICS EDUCATION</b></h1>
<p class="kim"> Indian institute of computer science </p>
<p id="king"><b><i>Honesty is the best policy.</i></b></p>
</body>
</html>
Output is :-
Css property:-
Css syntax- Selectors
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your documents. A style
rule is made of three parts:
1. Selector :- A selector is an HTML tag at which style will be applied. This could be any tag like<h1> or <table> etc.
2. Property :- A property is a type of attribute of HTML tag. Pur simply,all the HTML attributes are converted into CSS properties.They could be color or border etc.
3. Value :- Values are assigned to properties. For example, Color property can have value either red etc.
1. Class selector :-
You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.
Syntax:
. black{
Color:red;
}
2. Id selector :-
You can define style rules based on the I'd attribute of the elements. All the elements having that ID will be formatted according to the defined rule.
Syntax:
#black{
Color:green;
}
Comments
Post a Comment