Css was first proposed by HAKON WIUM LIE lie on
October 10 in 1994 ,at the time ,lie was working with tim burners lee at CERN .CERN originally represented the French word for conseil europeen pour la recherchenucleaire(European council for nuclear research)A style sheet language or style language is a computer language that expresses the presentation of structure documents one attractive feature of structured document is that the content can be reused in many contexts and presented in various ways . Different style sheets can be
attached to the logical structure to produced presentation. Css is independent of HTML and can be used with any XML based markup language. the separation of HTML from css makes it easier to maintain sites, share style sheets across pages , and tailor pages to different environments .this is referred to the as the separation of structure or content from presentation.
Css stands for cascading style sheets Css defined how html element are to be displayed Style were added to html 4.0 to
solve problem Css saves a lot of work External style sheets are stored in css files Html was never intended to contain tag for formatting a document Html was intended to define the content of a document Development of large web sites where fonts and color information were added to every single page became along and expensive process To solve this problem the world wide web consortium (w3c) created css.
Types of style sheet
When a browser reads a style
sheet it will format the
document according to it
There are three ways of
inserting a style sheet
External style sheet
Internal style sheet
Inline style sheet
External style sheet
External style sheet is ideal when the style is applied to
many pages. with an external style sheet you can change the look of an entire web site by changing one file External css contain separate css sole which contains only style property with the help of tag attribute for example class ,id heading css property written in a separate file with css extension and should be linked to the html document using link tag this means that for each element style can be set onlyo once and
that will be applied across web pages Href attribute is used to specify the location of the
external style sheet file Link tag is used to link to external stylesheet with the html web page .each page must link to the style sheet using the <link >tag .the <link >tag goes inside the<head >section<head>
<link rel=”stylesheet”type =”text/css”
href=”mystyle.css”/> </head>
Internal style sheet
This can be used when a single html document must be style
uniquely the css rule set should have within the html file in the
head section i.e css is embedded within the html file.inernal styles ate defined in he<head> section of an html page by sing the <style> tag like this<head><style type=”text/css”>
Body{background-color:yellow}
P{color: blue}
</style>
</head>
Inline style sheet An inline style can be used if a unique style is to be applied to one single
occurrence of an element An inline css contains the css property in the body section attache with element is known as inline css this kind of style is specified within an html tag using the style attribute
<!doctype html>
<html>
<head>
<title>inline css</title>
</head>
<body>
<p>style =color:#009900
Font-style:italic
Cascading style sheet
</p>
</body>
</html>
The selector pointer to the html elements you want to style
The declaration block contains one or more declarations separated by semicolons .each declaration includes a css property name and a value separated by a colon Multiple css declarations are separated with semicolons and declaration blocks are surrounded by curly braces
Selectors Css selectors Css selectors allow you to
select and manipulate html elements css selectors are used to find html elements based on their id ,class ,type attributes and more selectors are the most important aspect of css they are used to select elements on a html page the selected elements thus can be styled according to the need and demand of the users css selectors are of various types
Id selector
An id selector is declared using a hash preceding a string of
characters the string of characters id defined by he developer this selector matches any html element that
has an id attributes with the same value as that of the selector but minus the hash symbol An id should be unique within a page so the id selector is used
if you want to select a single unique element.To select an element with a specific id ,write a hash character ,followed by the id of element
Eg
#para
{
Text=align:center;
Color:red;
}<!DOCTYPEhtml>
</html>
<head>
<style>
#para
{
Text-align:center;
Color:red;
}
</style>
</head>
<body>
<p>id =”para”>hi guys!</p>
<p>this paragraph is not
affected by the style</p>
</body>
</html>
Class selector
The class selector is the most useful of all css selectors its declared with a dot preceding a string of one or more characters just as is the case with an id selector this string of characters is defined by the developer .the class selector also matches all elements on the page that have their class attributes set to the same value
as the class ,minus the dot.
Eg
.center{
Tex-align:center;
Color:red;
}
<!DOCTYPEhtml>
<html>
<head>
<style>
.center
{
Text-align:center;
Color:red;
}</style>
</head>
<body>
<h class =”center”> red and
center-aligned heading </h>
<p class =”center”>red and
center-aligned paragraph.</p>
</body>
</html>
Advantage of css
Easier to maintain and update Greater consistency in design
More formatting options Light weight code Faster download time
Search Engine optimization benefits Ease of presenting different style to different viewers Greater accessibility .Why use css .Css helps you to keep the information content of
a document separate from the details of how to display it the
details of how to display the document are known as its style.
you keep the style separate from the content so that you
can Void duplication Make maintenance easier Use the same content with different
Styles for different purpose
Rules of css
A css rule is grouping of one or more css properties which are
to be applied to one or more target html elements . css rule consist of a css selector and properties .the css selector
determines what html elements to target the css full. The css properties specifies what to style of the targeted html
elements
Different between html and css
Html and css are the core web scripting language ,the primary
use of which is to create web pages and web applications . the crucial difference between the two is that html is used for the creation of the Web Pages and css is used to control the styling and layout of web pages .
In html firstly you write words then add elements or tags to it,
which there after appear on your page. Through this way browser gets to know the heading of the page ,begging and ending of the paragraph , and so on .In css , rules are used by utilizing css properties are generally classified into two broad categories ,first is the presentation which specifies the
color of the text , font type , font size ,background color ,background images, etc.second is layout the position of the
different elements of the screen. Css can be used in different types like large or small screens and printers. It is independent of html and can be used with any xml based markup language the css specifications are mainly
maintained by the world wide consortium .css rule –set consists of selector and a declaration block . i
Html cons
It has limited security features
Slow technical progress
Being a static language ,it cants
produce dynamic output
Css cons
it has fragmentation problem
and thus ,it has performance
variance between two
browsers. Being an text based
system, it doesn’t have any built
in security
it can get messy sometimes
and can create complications in
codes.
Css pros
It has a much broader range of
attributes than html
It has improved website speed
and pages consume less time
to load property
It supports offline browsing
It is compatible with multiple
devices
It is easy to maintain
Good community support
It provides much better web
page style formats than html
No comments:
Post a Comment