CSS AND JAVASCRIPT
Introduction
CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a document written in HTML or XML. CSS defines how elements should
be rendered on screen, on paper, or in other media. By separating content (HTML) from
presentation (CSS), it allows for greater flexibility and control in the specification of
presentation characteristics.
CSS Selectors
CSS selectors are patterns used to select the elements you want to style. There are
several types of selectors available in CSS:
Universal Selector (*): Matches any element.
Type Selector (element): Matches elements by their name.
Class Selector (.class): Matches elements with the specified class.
ID Selector (#id): Matches an element with the specified ID.
Attribute Selector ([attribute]): Matches elements with the specified attribute.
Pseudo-class Selector (:pseudo-class): Matches elements based on their state.
Pseudo-element Selector (::pseudo-element): Matches and styles a part of an element.
Inserting CSS in an HTML Document
There are three ways to insert CSS into an HTML document:
1. Inline CSS: Using the style attribute inside HTML elemens.
<h1 style="color:blue;">This is a heading</h1>
[Link] CSS: Using a <style> element inside the <head> section of the document.
<head>
<style>
h1 { color: blue; }
</style>
</head>
3. External CSS: Using an external stylesheet linked with the <link> element.
<head>
<link rel="stylesheet" href="[Link]">
</head>
Backgrounds
CSS allows you to set background styles for elements. Common properties include:
● background-color: Sets the background color of an element.
● background-image: Sets a background image for an element.
● background-repeat: Controls the repetition of the background image.
● background-position: Sets the starting position of the background image.
● background-size: Specifies the size of the background image.
body {
background-color: lightblue;
background-image: url('[Link]');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Fonts and Text Styles
CSS provides various properties to style text:
● font-family: Specifies the font of an element.
● font-size: Specifies the size of the font.
● font-weight: Specifies the weight (boldness) of the font.
● font-style: Specifies the style of the font (e.g., normal, italic).
● color: Sets the color of the text.
● text-align: Specifies the horizontal alignment of text.
● text-decoration: Adds decorations like underline, overline, or line-through.
● line-height: Sets the height between lines of text.
p{
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
color: #333;
text-align: center;
text-decoration: underline;
line-height: 1.5;}
Creating Boxes
CSS provides properties to define the size, padding, border, and margin of boxes:
● width and height: Set the width and height of an element.
● padding: Sets the padding (space inside the element's border).
● border: Sets the border of an element.
● margin: Sets the margin (space outside the element's border).
div {
width: 300px;
height: 150px;
padding: 20px;
border: 2px solid black;
margin: 10px;
Displaying, Positioning, and Floating Elements
Display: The display property specifies the display behavior of an element (e.g.,
block, inline, none).
Positioning: CSS positioning allows you to position an element in different ways
(static, relative, absolute, fixed, sticky).
Floating: The float property allows you to float an element to the left or right,
allowing text and inline elements to wrap around it.
div {
display: block;
position: relative;
float: left;
Features of CSS3
CSS3 introduces several new features and properties:
Transitions: Allows you to change property values smoothly (over a given duration).
Transforms: Allows you to apply 2D or 3D transformations to elements.
Animations: Allows you to animate changes to CSS properties.
Flexbox: A layout model for arranging elements in a predictable way.
Grid: A layout system for creating complex responsive designs.
.box {
transition: width 2s;
transform: rotate(45deg);
animation: mymove 5s infinite;
display: flex;
grid-template-columns: repeat(3, 1fr);
@keyframes mymove {
from { left: 0px; }
to { left: 200px; }
Media Queries
Media queries allow you to apply styles based on the characteristics of the device (such
as screen size). This is essential for responsive design.
@media (max-width: 600px) {
.container {
width: 100%;
JavaScript
Overview of JavaScript
JavaScript is a programming language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else. It is a
client-side scripting language that runs in the browser.
JavaScript Functions
Functions in JavaScript are blocks of code designed to perform a particular task. They are
executed when something invokes them.
function greet(name) {
return "Hello, " + name + "!";
}
[Link](greet("World"));
Events
JavaScript can respond to events, such as user clicks, keyboard input, and page load.
Event handlers are functions that handle these events.
[Link]("myBtn").addEventListener("click", function() {
alert("Button was clicked!");
});
Image Maps and Animations
Image Maps: Allow you to create clickable areas on an image.
Animations: JavaScript can be used to create animations by changing CSS styles over
time.
<img src="[Link]" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="[Link]">
</map>
function animate() {
var elem = [Link]("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
[Link] = pos + "px";
[Link] = pos + "px";
JavaScript Objects
JavaScript objects are collections of properties, and an object is a collection of key/value
pairs.
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue",
fullName: function() {
return [Link] + " " + [Link]; }
};
[Link]([Link]());
Working with Browser and Document Objects
JavaScript can manipulate the DOM (Document Object Model) to interact with the
browser.
[Link]("myDiv").innerHTML = "Hello, world!";
[Link]("This is an alert box!");
jQuery Introduction
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, and animation much simpler.
<script src="[Link]
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
jQuery Selectors
jQuery selectors are used to select and manipulate HTML elements.
$("p"); // Selects all <p> elements
$("#myId"); // Selects the element with id="myId"
$(".myClass"); // Selects all elements with class="myClass"
Events in jQuery
jQuery simplifies event handling in JavaScript.
$(document).ready(function(){
$("button").click(function(){
alert("Button was clicked!");
});
});
Methods to Access HTML Elements and Attributes
jQuery provides methods to manipulate HTML elements and their attributes.
$("#myDiv").text("Hello, world!"); // Changes the text content of the element
$("img").attr("src", "[Link]"); // Changes the src attribute of <img>
Introduction to AJAX
AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic
web pages. It allows you to update parts of a web page without reloading the whole
page.
$.ajax({
url: "demo_test.txt",
success: function(result){
$("#div1").html(result);
});