2. 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)
4. 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>
7. 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>
9. 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>
10. SELECTORS
TYPES OF SELECTORS :
CLASS Selector
ID Selector
DESCENDANT Selector
GROUPING Selector
GLOBAL SELECTOR
11. 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 page
Ex:
p#bold { font-weight: bold; }
<p id="bold">this paragraph will be rendered bold.</p>
12. DESCENDANT Selector & GROUPING Selector
DESCENDENT SELECTORS specify that styles should only be applied
when the element in question is a descendent(for example a child or
grand child) of another element).so this
Ex:
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;}
13. 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>
14. 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>
15. 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.
16. 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.
22. LINKS and Pseudo Clases
Pseudo- Example Use Description
Class
: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)
23. NEW COLOR FORMATS IN CSS3
rgb(red green blue) in css2
rgba(red green blue alpha)
hsl(hue saturation lightness)
hsla(hue saturation lightness alpha)
cmyk(cyan magnetta yellow black)
33. 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 are
used within your site
@fontface was part of the css2 specification but
removed from 2.1
Most @font-face concerns revolve around licensing
issues
The default implementation leaves fonts unprotected
from download
34. WEB-SPECIFIC FONT FORMATS
In addition to this we are having some other formats llike TTF(true type),OTF(open
type) etc.,
35. 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)
40. 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”/>