• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css siva
 

Css siva

on

  • 261 views

 

Statistics

Views

Total Views
261
Views on SlideShare
261
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css siva Css siva Presentation Transcript

    • CSS BYK.SIVA KUMAR
    • CASCADING STYLE SHEETS CSS stands for Cascading Style Sheets. It is also called as Style Sheets or Styles. CSS is used to add more effects for our html page to make it more attractive. Cascading means inheriting the features (styles). Eg: child inherits the features from parent Therefore, child features=parent features + his own features We can embed CSS in HTML, JavaScript, Asp, etc., The extension for css file is .css (contains only styles)
    • TYPES OF STYLESHEETS INTERNAL STYLE SHEETS EXTERNAL STYLE SHEETS INLINE STYLE SHEETS
    • INTERNAL STYLE SHEETS If we specify the styles in our html file itself, then they are called as internal styles. These styles cannot be used in other files (i.e., if we want the same styles in other files, we should write them again in that other file) SYNTAX : <html> <head> <style type=“text/css”> </style> </head> <body> </body> </html>
    • INTERNAL STYLE SHEETS <html> <head> <style type=“text/css”> body{background-color:red;} p{color:blue;} </style> </head> <body> <p>welcome to css</p> </body> </html>
    • EXTERNAL STYLE SHEETS If we declare the styles outside our html file (as another file), then they are called External Styles. These styles can be reusable i.e., they can be used for more than one file. We save the external file consisting of styles with .css file extension. The changes made in external files will effect all the html files which are using those styles.SYNTAX: <head> <link rel=“stylesheet” href=“#” type=“text/css”></head>
    • EXTERNAL STYLE SHEETSbody{background-color:red;}p{color:blue;}h1{color:blue;}
    • INLINE STYLESHEETS we specify styles inside the tag in the body part. These styles will be applied only for that particular line.Ex :<span style="color:blue">BLUE</span>
    • SELECTORSTYPES OF SELECTORS : CLASS Selector ID Selector DESCENDANT Selector GROUPING Selector GLOBAL SELECTOR
    • CLASS Selector & ID SelectorCLASS selectors allow you to associate a class with aparticular subset, or class, of elements. so if we had followingrule:Ex:p.bold { font-weight: bold; }<p class="bold">this paragraph will be rendered bold.</p>ID selectors works like class selectors except that they canonly be used on one element per pageEx:p#bold { font-weight: bold; }<p id="bold">this paragraph will be rendered bold.</p>
    • DESCENDANT Selector & GROUPING SelectorDESCENDENT SELECTORS specify that styles should only be appliedwhen the element in question is a descendent(for example a child orgrand child) of another element).so thisEx:h3 em { color: white; background-color:black; }plus this html<h3>welcome to <em>html</em></h3>GROUPING SELECTORS can also specify the same set of rules for morethan one selector, like this :p,h1,h2{text-align:left;}Just place a comma between each one.You can even get more complex,and group multiple class and id selectors :p.navigation, h1#content{font-weight:bold;}
    • The <div> TagThe <div> tag is a block-level tag because it encloses other tags and,importantly, it forces a line break on the page. Because it creates a linebreak before and after its enclosed content. Use of the <div> tag.<div style="text-indent:25px; margin-left:30px; margin-right:30px;text-align:justify"> <p>This paragraph has first-line indention of 25 pixels. It has both left and right margins of 30 pixel and its alignment is justfied between the two margins.</p> <p>This paragraph also has first-line indention of 25 pixels. It has both left and right margins of 30 pixel and its alignment is justfied between the margins. Both paragraphs are styled with an enclosing division tag to apply these styles to both paragraphs.</p></div>
    • The <span> TagA <span> tag is an in-line tag placed around text for thepurpose of identifying a string of characters to which thistag’s style sheet is applied. The tag can enclose a singleletter, a word, a phrase, a sentence, or any other sub-string of text for the purpose of identifying it for applicationof styling. As an in-line tag, the <span> tag surrounds astring of text enclosed inside a block-level container.Ex:<p>this is <span style=”color:green”>span</span>tag</p>
    • POSITIONS IN CSS:Static:This is normal position scheme. The left and top properties do notapply.Relative:Offsets are relative to the boxs normal position.Absolute:Offsets are relative to the boxs containing block.Fixed:Offsets are the same as in the absolute model,but arefixed with respect to a particular point of reference. Forexample when viewed in a browser,fixed elements wontmove when scrolled.
    • CSS ADVANTAGES:Flexibility:CSS layouts separates presentation from coding. By using an external stylesheet fora website, designers can now amend the layout through this stylesheet and all thepages will be updated accordingly. For example, a simple class for paragraph canbe used control the appearance of the paragraphs, padding and margins. If theappearance of all the paragraphs must be changed, the designer only needs toupdate a single file- stylesheet.Codes Rendering:CSS layouts reduce the amount of codes in a file as compared to the traditionaltable-based designs. This reduction in codes will improve the website performancein the user-end. As some users may be using dial-up connection, web pagesdesigned using CSS will definitely reduce the time required to load a web page. Thetotal amount of file size is also reduced to minimum with the help of CSS templates.Accessibility:Accessibility is very important as it make sure a web page can be properlyinterpreted by all users. A user reading a table-based design web page with the helpof a screen reader will be having a great problem understanding the logic, justimagine the reader goes through columns by columns in those deeply nested tables.CSS templates also helps in arranging the layout logically to both the developersand all the users.
    • COLOR PROPERTYHexadecimal Notationp{ color:#FF0000; }p{ color:#F00; }Functional Notationp{ color:rgb(255,0,0); }p{ color:rgb(100%,0%,0%); }
    • BACKGROUND PROPERTIESbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground:<color><image><repeat><attachment><position>
    • BOX MODEL MARGIN BORDER PADDING CONTENT
    • LAYOUT PROPERTIESBORDERMARGINPADDINGPOSITIONINGFLOATCLEARZ-INDEXOVERFLOWVISIBLE
    • TYPOGRAPHYfont-familyfont-stylefont-weightfont-sizefont-variantline-heighttext-indenttext-decorationtext-align
    • LINKS and Pseudo ClasesPseudo- Example Use DescriptionClass:link a:link{..} Set links:active a:active{...} User activates an element (e.g. mouse down):hover a:hover{...} User designates an element (e.g. mouse over)
    • NEW COLOR FORMATS IN CSS3rgb(red green blue) in css2rgba(red green blue alpha)hsl(hue saturation lightness)hsla(hue saturation lightness alpha)cmyk(cyan magnetta yellow black)
    • RGB SYNTAX
    • RGB SYNTAX
    • HUE SATURATION & LIGHTNESS
    • LIGHTNESS
    • SATURATION
    • HUE SATURATION & LIGHTNESS
    • ADDING ALPHA VALUES
    • CMYK
    • CURRENT SUPPORT
    • WORKING WITH CSS3 WEB FONTS@font-face The term web fonts generally refers to the use of@font-face @font-face allows you to specify which fonts areused within your site @fontface was part of the css2 specification butremoved from 2.1 Most @font-face concerns revolve around licensingissues The default implementation leaves fonts unprotectedfrom download
    • WEB-SPECIFIC FONT FORMATSIn addition to this we are having some other formats llike TTF(true type),OTF(opentype) etc.,
    • ADVANTAGES OF WEB FONTS Most web fonts have licenses structured around online usage WOFF fonts can be upto 40% smaller than TTF or OTF fontsFONT HOSTING SERVICESType kit(http://typekit.com)Font Squirrel(http://fontsquirrel.com)Fonts live(http://www.fontslive.com)Web link(http://www.extensis.com/en/WebINK)Kernest(http://kernest.com)
    • @font-face SYNTAX@font-face { font-family: Graublau Web; src: url(GraublauWeb.eot); src: local(☺), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg");}
    • CURRENT BROWSER SUPPORT *iphone/ipad only supports svg fonts
    • HTML 5 FORMS
    • HTML 5 REDUCES THE NEED FOR ID AND CLASES
    • HTML 5 DOCTYPE DECLARATIONSXHTML :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML :<!DOCTYPE html<meta charset=”utf-8”/>
    • BROWSER VIDEO CODEC SUPPORT