v Cascading Style Sheet(CSS) is a
style sheet which offers set of style rules to display HTML elements in a
webpage.
v CSS allows a number of page of a
website to have same formatting.
v It also provides ore flexibility and
control in the way in which the content is displayed on a webpage.
Advantage of CSS
•
CSS saves time - You can write CSS once and then reuse the 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 load 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 it 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 the elements in all the web pages will be updated automatically
•
CSS is easy to learn and understand.
Disadvantage of CSS
CSS is very limited in browser.
There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.
CSS Syntax
A CSS comprises of style rules that are interpreted by
the browser and then applied to the corresponding
elements in your document.
A style rule is made of three parts:
Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
Value: Values are assigned to properties. For example,
color property can have the value either red etc
CSS Syntax
CSS Selectors
A selector is an HTML tag which a style applied. This could be any tag like <h1>,<p>, <table> etc.
There are different type of selectors:
Type, id and class selector
External style
We define style sheet rules in a separate CSS file and then include that file in the HTML document using HTML <LINK> tag.
external style
.RED {
Color: red:
}
.thick {
Font-size:20px;
}
external style
<html>
<head>
<title> html external CSS </title>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“thick red”>This is thick and red</p>
</body>
</html>
output
This is red
This is thick
This is thick and red
Internal style
If you want to use similar formatting for all the tags of the same type on a web page, you should use internal styles
Internal style
<html>
<head>
<title> html internal CSS </title>
<style type =“text/css”>
.red { color:red; }
.thick {Font-size:20px; }
</style>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“thick red”>This is thick and red</p>
</body>
</html>
output
This is red
This is thick
This is thick and red
In-Line(the attribute style)
One way to apply CSS to HTML is by using the Inline style.
You can put your CSS rules into an HTML document using the <style> Element.
<element/tagname style=declaration in quotes>
In-Line(the attribute style)
<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:red;font-size:20px;”>This is thick and red</p>
</body>
</html>
output
This is red
This is thick
This is thick and red
Colors in CSS
The use of colours in creation of web page is an important aspect to give web page a distinctive and attractive look. We can use color names, HEX values, RGB, etc values to specify colors. Color can help you to change color of many elements in the web page like, background, text, margins, etc.
Hex codes
A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent value, the next two are a green value(GG),and the last are the blue value (BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, PaintShop Pro, or even using Advanced paint brush. Each hexadecimal code will be preceded by a pound or hash sign #.
Following are the examples to use hexadecimal notation:
Short Hex codes
This is a shorter form of the six-digit-notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example #F00 becomes #FF0000.
This color value is specified using the RGB) property. This property takes three value, one each for red, green and blue.
The value can be an integer between 0 and 255 or a percentage.
Browser safe colors
216 colors are supposed to be most safe and computer independent colours. These colours vary from hexa code 000000 to FFFFFF.
These colours are safe use because they ensure that your computer would display the color correctly when running a 256 colours palette.
The colour property in CSS can be used in many different elements like background text border margins, outline etc.
