Introductory css and j query

BESIC CONCEPT OF CSS

PRESENTED BY ROHAN BHATTACHARYA MCA 3RD YEAR ROLL-14801013037

INTRODUCTION OF CSSCSS 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.

Its most common application is to style web pages written in HTML and XHTML.

A BRIEF HISTORY OF CSSHTML 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 CSSThere are three Ways to Insert

CSS:I. Inline styleII. Internal style sheetIII. External style sheetCSS Syntax:A CSS rule-set consists of a selector and a

declaration block

HOW TO USE INLINE STYLEHTML CODE FOR THE PAGE..<html><body>

<h1 sty le="co lor :b lue ;marg in-le f t :30px;">This is a head ing.</h1>

<p>This is a paragraph.</p>

</body></html>

OUTPUT OF THE PAGE..

HOW TO USE INTERNAL STYLEHTML CODE FOR THE PAGE..<html><head><style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} </style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>


HOW TO USE EXTERNAL STYLEHTML CODE FOR THE PAGE.. <html><head><link rel="stylesheet" type="text/css" href="style.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

CSS CODE FOR THE PAGE..body { background-color: lightblue;}h1 { color: navy; margin-left: 20px;}


SELECTOR STRINGSSingle element type:

Multiple element types:

All element types:

Specific elements by id:

SELECTOR STRINGS

Specific elements by class:

oReferencing a style class in HTML:

Elements of a certain type and class:

SELECTOR STRINGSSource 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 objectsname descriptiongetElementById 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

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp

http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

https://developer.mozilla.org/en/DOM/Element.querySelector

https://developer.mozilla.org/en/DOM/Element.querySelectorAll

jQuery / DOM comparisonDOM method jQuery equivalentgetElementById("id") $("#id")getElementsByTagName("tag") $("tag")getElementsByName("somename")

$("[name='somename']")

querySelector("selector") $("selector")querySelectorAll("selector") $("selector")

jQuery terminologythe jQuery function

refers to the global jQuery object or the $ function depending on the context

a jQuery objectthe 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];

THANK

YOU

Introductory css and j query

Education

Transcript of Introductory css and j query