View
133
Download
0
Category
Preview:
Citation preview
CSS BY
K.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 SHEETSEXTERNAL 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 SHEETS
body{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>
SELECTORS
TYPES OF SELECTORS : CLASS SelectorID SelectorDESCENDANT SelectorGROUPING SelectorGLOBAL SELECTOR
CLASS Selector & ID Selector
CLASS selectors allow you to associate a class with a particular subset, or class, of elements. so if we had following rule: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 can only 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 Selector
DESCENDENT SELECTORS specify that styles should only be appliedwhen the element in question is a descendent(for example a child or grand 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 more than 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> Tag
The <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 line break 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> Tag
A <span> tag is an in-line tag placed around text for the purpose of identifying a string of characters to which this tag’s style sheet is applied. The tag can enclose a single letter, a word, a phrase, a sentence, or any other sub-string of text for the purpose of identifying it for application of styling. As an in-line tag, the <span> tag surrounds a string 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 not apply.
Relative:Offsets are relative to the box's normal position.
Absolute:Offsets are relative to the box's containing block.
Fixed:Offsets are the same as in the absolute model,but are fixed with respect to a particular point of reference. For example when viewed in a browser,fixed elements won't move when scrolled.
CSS ADVANTAGES:
Flexibility:CSS layouts separates presentation from coding. By using an external stylesheet for a website, designers can now amend the layout through this stylesheet and all the pages will be updated accordingly. For example, a simple class for paragraph can be used control the appearance of the paragraphs, padding and margins. If the appearance of all the paragraphs must be changed, the designer only needs to update a single file- stylesheet. Codes Rendering:CSS layouts reduce the amount of codes in a file as compared to the traditional table-based designs. This reduction in codes will improve the website performance in the user-end. As some users may be using dial-up connection, web pages designed using CSS will definitely reduce the time required to load a web page. The total 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 properly interpreted by all users. A user reading a table-based design web page with the help of a screen reader will be having a great problem understanding the logic, just imagine the reader goes through columns by columns in those deeply nested tables. CSS templates also helps in arranging the layout logically to both the developers and all the users.
COLOR PROPERTY
Hexadecimal Notation
p{ color:#FF0000; }p{ color:#F00; }
Functional Notation
p{ color:rgb(255,0,0); }p{ color:rgb(100%,0%,0%); }
BACKGROUND PROPERTIES
background-imagebackground-repeat background-attachmentbackground-positionbackground:<color><image><repeat><attachment><position>
BOX MODEL
MARGIN
BORDERPADDING
CONTENT
LAYOUT PROPERTIES
BORDERMARGINPADDINGPOSITIONINGFLOATCLEARZ-INDEXOVERFLOWVISIBLE
TYPOGRAPHY
font-familyfont-stylefont-weightfont-sizefont-variantline-heighttext-indenttext-decorationtext-align
LINKS and Pseudo Clases
Pseudo-Class
Example Use Description
: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 CSS3
rgb(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-faceThe term web fonts generally refers to the use of @font-face@font-face allows you to specify which fonts are used within your site @fontface was part of the css2 specification but removed from 2.1Most @font-face concerns revolve around licensing issuesThe default implementation leaves fonts unprotected from download
WEB-SPECIFIC FONT FORMATS
In addition to this we are having some other formats llike TTF(true type),OTF(open type) 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 fonts
FONT HOSTING SERVICES
Type 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 DECLARATIONS
XHTML :<!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
Recommended