Introductory css and j query

BESIC CONCEPT
OF CSS
PRESENTED BY
ROHAN
BHATTACHARYA
MCA 3RD YEAR
ROLL-14801013037

INTRODUCTION OF CSS
 CSS stands for Cascading Style
Sheets.
 CSS is a very simple method for
adding style (e.g. :fonts, colors,
spacing) to Web documents. Style
sheets describe how documents are
presented on screens.
 CSS saves a lot of work. It can control
the layout of multiple web pages all at
once.

A BRIEF HISTORY OF CSS
 HTML was NEVER intended to
contain tags for formatting a web
page.
 That is why W3C (i.e.: World Wide
Web Consortium) introduced CSS
level-1in the year 1996
(December).
 But now a days the current
version of CSS is CSS 2,CSS3

HOW TO USE CSS
 There are three Ways to Insert CSS:
I. Inline style
II. Internal style sheet
III. External style sheet
 CSS Syntax:
A CSS rule-set consists of a selector and a
declaration block

HOW TO USE INLINE STYLE
HTML CODE FOR THE PAGE..
<html>
<body>
< h1 st yle= " color: blue
;
margin -
lef t : 30px; ">This is a
heading.< /h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT OF THE PAGE..

HOW TO USE INTERNAL
STYLE
<html>
<head><style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style></head><body>
<h1>This is a heading</h1>
</body>
</html>

HOW TO USE EXTERNAL
STYLE
<html><head>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>
CSS CODE FOR THE PAGE..
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

SELECTOR STRINGS
 Single element type:
 Multiple element types:
 All element types:
 Specific elements by id:

SELECTOR STRINGS
 Specific elements by class:
o Referencing a style class in HTML:
 Elements of a certain type and class:

SELECTOR STRINGS
 Source anchor elements:
 Element types that are descendents:

AN INTRODUCTION
TO JQUERY
PRESENTED BY
ARIJIT
SADHUKHAN
MCA 3RD YEAR
ROLL-
14801013010

What is JQuery?
JQuery is a fast and concise
JavaScript Library that simplifies
HTML document traversing, event
handling, animating, and Ajax
interactions for rapid web
development. It was devoloped by
John Resig in 2006 with a nice motto
− Write less, do more.

Important Features of JQuery
 DOM manipulation − The jQuery made it easy to
select DOM elements, traverse them and modifying
their content.
 Event handling − The jQuery offers an elegant way to
capture a wide variety of events, such as a user clicking
on a link, without the need to clutter the HTML code
itself with event handlers.
 AJAX Support − The jQuery helps a lot to develop a
responsive and feature-rich site using AJAX technology.
 Animations − The jQuery comes with plenty of built-in
animation effects which we can use in our websites.
 Lightweight − The jQuery is very lightweight library -
about 19KB in size ( Minified and gzipped ).

To call a jQuery library
functions
We need to make sure that we start
adding events as soon as the DOM is
ready. If we want an event to work on our
page, it should be called inside the
$(document).ready() function. Everything
inside it will load as soon as the DOM is
loaded and before the page contents are
loaded.
To do this, we register a ready event for
the document as follows −
$(document).ready(function() ;

Selecting groups of DOM objects
name description
getElementById returns array of descendents with
the given tag, such as "div"
getElementsByTagName returns array of descendents with
the given tag, such as "div"
getElementsByName returns array of descendents with
the given name attribute (mostly
useful for accessing form controls)
querySelector * returns the first element that would
be matched by the given CSS
selector string
querySelectorAll * returns an array of all elements
that would be matched by the
given CSS selector string

jQuery / DOM comparison
DOM method jQuery equivalent
getElementById("id") $("#id")
getElementsByTagName("tag") $("tag")
getElementsByName("somename"
)
$("[name='somename']")
querySelector("selector") $("selector")
querySelectorAll("selector") $("selector")

jQuery terminology
 the jQuery function
refers to the global jQuery object or the $
function depending on the context
 a jQuery object
the object returned by the jQuery function
that often represents a group of elements

The jQuery object
 The $ function always (even for ID selectors)
returns an array-like object called a jQuery object.
 The jQuery object wraps the originally selected
DOM objects.
 We can access the actual DOM object by
accessing the elements of the jQuery object.
// false
document.getElementById("id") == $("#myid");
document.querySelectorAll("p") == $("p");
// true
document.getElementById("id") == $("#myid")[0];
document.getElementById("id") == $("#myid").get(0);
document.querySelectorAll("p")[0] == $("p")[0];

Introductory css and j query

More Related Content

What's hot

Viewers also liked

Similar to Introductory css and j query

Recently uploaded

Introductory css and j query