0% found this document useful (0 votes)

8 views

CSS Selectors: Center Red

The document discusses different CSS selectors including element, id, class and universal selectors. It also covers how to insert CSS through external, internal and inline styles and the basics of JavaScript including variables, data types, and how scripts are used in HTML.

Uploaded by

Madhu Sudhan

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

8 views

CSS Selectors: Center Red

Uploaded by

Madhu Sudhan

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 18

CSS Selectors

A CSS selector selects the HTML element(s) you want to style.

the most basic CSS selectors are:

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

text-align: center;

color: red;

<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific

element.
The id of an element is unique within a page, so the id selector is used to select
one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {

text-align: center;

color: red;

<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>
The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by
the class name.

Example

In this example all HTML elements with class="center" will be red and center-
aligned:
.center {

text-align: center;

color: red;

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

text-align: center;

color: blue;

<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):

Example

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

All CSS Simple Selectors

How To Add CSS:

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section
of an HTML page:

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

</body>
</html>

An external style sheet can be written in any text editor, and must be saved
with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal CSS

An internal style sheet may be used if one single HTML page has a unique
style.

The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head>
section of an HTML 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>
Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Javascript:

JavaScript is a high-level, interpreted programming language primarily used

for creating interactive and dynamic content on websites. It is one of the core
technologies used for web development, alongside HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets). JavaScript allows developers to
add functionality and interactivity to web pages, making them more responsive
and user-friendly.

Originally created by Brendan Eich at Netscape in 1995, JavaScript has

become one of the most popular programming languages on the web. It has
evolved significantly over the years and is now supported by all major web
browsers, enabling it to run on various platforms and devices.

A script is a small program code that is written within the tag of the HTML
document to perform a task.

The <script> tag is used to write a script as follows:

<Script LANGUAGE =”JavaScript”>

................

</SCRIPT>

The <script> tag indicates to the browser that the text written within the script
tags is part of a script. This tag can be used one or multiple times in the
<head> as well as in the <body> element. But it is typically recommended that
you keep the <script> tag within the <head> tags. The language attribute
specifies that the language used for writing the script/program is JavaScript.
Netscape navigator uses JavaScript as the default scripting language, but
Microsoft Internet Explorer uses JScript. Both languages are syntactically
similar.

The <script> tag takes three attributes as follows:

• Language: Specifies the language used for the script.

• SRC: Indicates the URL of a file that contains an external script load.
• Type: Indicates the MIME type of script to be run.

Key features and uses of JavaScript include:

1. Client-Side Scripting: JavaScript is primarily used for client-side
scripting, meaning it runs in the user's web browser, enabling dynamic
updates and interactions without requiring server-side processing. This
allows developers to create responsive user interfaces, validate form data,
handle events, and more.
2. DOM Manipulation: The Document Object Model (DOM) represents the
structure of an HTML document as a tree-like structure. JavaScript can
manipulate the DOM, allowing developers to add, modify, or delete
elements on a web page dynamically.
3. Event Handling: JavaScript enables the handling of various events such
as clicks, keypresses, mouse movements, etc. This helps developers
create interactive features and respond to user actions.
4. Asynchronous Programming: JavaScript supports asynchronous
programming using techniques like callbacks, promises, and
async/await, which allows for non-blocking execution. This is crucial for
handling tasks like fetching data from servers, animations, and other
time-consuming operations without freezing the user interface.
5. Libraries and Frameworks: JavaScript has a rich ecosystem of libraries
and frameworks, such as React, Angular, and Vue.js, which simplifies
web development and enhances code maintainability.
6. Server-Side Development: While JavaScript is primarily used on the
client-side, it can also be used for server-side development. Node.js is a
popular runtime environment that allows developers to run JavaScript
on the server, facilitating full-stack web development with a unified
language.

Inserting JavaScript into a webpage is much like inserting any other HTML
content. The tags used to add JavaScript in HTML are <script> and </script>.
The code surrounded by the <script> and </script> tags is called a script
blog.

javaScript variable:
Variables are referred as named containers for storing information. We can
place data into these containers and then refer to the data simply by naming
the container.
Rules to declare variable in JavaScript
Here are the important rules that must be followed while declaring a variable in
JavaScript.
 In JavaScript variable names are case sensitive i.e. a is different from A.
 Variable name can only be started with a underscore ( _ ) or a letter (from
a to z or A to Z), or dollar ( $ ) sign.
 Numbers (0 to 9) can only be used after a letter.
 No other special character is allowed in variable name.
Before you use a variable in a JavaScript program, you must declare it.
Variables are declared with the var keyword as follows −
<script type="text/javascript">

</script>
Variables can be initialized at time of declaration or after declaration as follows
−
<script type="text/javascript">

</script>

Javascript Data Type

There are two kinds of data types as mentioned below −
 Primitive Data Type
 Non Primitive Data Type

The following table describes Primitive Data Types available in javaScript.

Sr.No. Datatype Description

1. String
Can contain groups of character as single value. It is
represented in double quotes.E.g. var x= “tutorial”.

2. Numbers
Contains the numbers with or without decimal. E.g. var x=44,
y=44.56;

3. Booleans
Contain only two values either true or false. E.g. var x=true, y=
false.

4. Undefined
Variable with no value is called Undefined. E.g. var x;

5. Null
If we assign null to a variable, it becomes empty. E.g. var
x=null;

The following table describes Non-Primitive Data Types in javaScript

Sr.No. Datatype Description

1. Array
Can contain groups of values of same type. E.g. var
x={1,2,3,55};

2. Objects
Objects are stored in property and value pair. E.g. var rectangle
= { length: 5, breadth: 3};

JavaScript Functions
Function is a group of reusable statements (Code) that can be called any where
in a program. In javascript function keyword is used to declare or define a
function.
Key Points
 To define a function use function keyword followed by functionname,
followed by parentheses ().
 In parenthesis, we define parameters or attributes.
 The group of reusable statements (code) is enclosed in curly braces {}. This
code is executed whenever function is called.
Syntax
function functionname (p1, p2)
{
function coding…
}

JavaScript Display Possibilities

JavaScript can “display” data in different ways:

• Writing into an HTML element using innerHTML: To access an HTML

element, JavaScript can use the document.getElementById(id) method. The id
attribute defines the HTML element. The innerHTML property defines the
HTML content
<html>
<head>
<title> FIRST JAVASCRIPT PROGRAM </title>
<body>
<h2>My JavaScript Web Page</h2>
<p>write data using innerHTML!</p>
<p id="demo"> </p>
<script>
document.getElementById("demo").innerHTML = 24 + 14;
</script>
</body>
</html>

• Writing into the HTML output using document.write(): Here, the

“document” is the object that contains information used by the script, and
“write ()” is the method (or function) associated with the object, which provides
service to the script. Thus, the document object allows the text to be displayed
in the document and the write () method is used to write a line of text within
that document.

<html>
<head>
<title> FIRST JAVASCRIPT PROGRAM </title>
<script language="JavaScript">
document.write("<i> It’s the first Script</i>");
document.write("<h2> The program is very interesting</h2>");
</script>
</head>
<body>
<h1> Welcome to the Web Page </h1>
</body>
</html>
• Writing into an alert box, using window.alert(): This command is used to
produce an alert message in a separate window. Here, the object is “window”
and “alert()” is the method. This command creates a dialog box that can be
used to display important messages to the user or interact with the user
browsing the web page.
The dialog box automatically includes OK button, which allows the user to hide
the dialog/message by pressing the button. So, as the dialog box appears and
OK is clicked, the text written within the <body> tag is displayed in the browser
window.
<html>
<head>
<title> FIRST JAVASCRIPT PROGRAM </title>
<script language="JavaScript">
window.alert("Hi ! and Welcome ");
</script>
<body>
<b><i>Press F5 or click refresh button to run the program again</i></b>
</body>
</html>
After the OK button is clicked, the following output appears as shown:

• A window.prompt() command produces a dialog box in which the user can

enter some value that can either be a number or characters. Thus, the
command allows the user to input a value that can be used in the script at any
point of time. Let us look at the program written in the following,

<html>
<head>
<title> FIRST JAVASCRIPT PROGRAM </title>
<script language="JavaScript">
window.prompt("Enter some value");
</script>
<body>
<b><i>Press F5 or click refresh button to run the program again</i></b>
</body>
</html>

• Writing into the browser console, using console.log()

<html>
<body>
<script>
console.log("example for console.log");
</script>
</body>
</html>

Sample Programs in JavaScript

Program to Display the Name and Age of the student Entered by User.

<html>
<head>
<title> LEARNING JAVASCRIPT </title>
<script language="JavaScript">
var first, second;
first = window.prompt("Enter your name", "NAME");
second = window.prompt("Enter your age", "AGE");
document.write("<h1>My name is : "+ first +"</h1>");
document.write("<h2>My age is : "+ second +"</h2>");
</script>
<body>
<b><i>Press F5 or click refresh button to run the program again</i></b>
</body>
</html>
Bootstrap Framework:

o Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
o It is absolutely free to download and use.
o It is a front-end framework used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins.
o It facilitates you to create responsive designs.

Bootstrap has three main files:

• bootstrap.css: A CSS framework
• bootstrap.js: A JavaScript/jQuery framework
• glyphicons: A font (an icon font set)
the Bootstrap package includes the following components:

• Scaffolding: A basic structure with Grid System, link styles, and background
• CSS: Global CSS settings, fundamental HTML elements styled and enhanced
with
extensible classes, and an advanced grid system
• Components: Over a dozen reusable components built to provide
iconography,
dropdowns, navigation, alerts, pop-overs, and much more
• JavaScript plug-ins: More than a dozen custom jQuery plug-ins. One can
easily
include all of them at once or one at a time
• Customization: The ability to customize Bootstrap’s components, LESS
variables, and jQuery plug-ins to get your very own version.

Some of the key features and capabilities that make Bootstrap a powerful and
popular option are:
• Easy to use: Bootstrap is very easy to use. A lot of time and effort can be
saved when using the Bootstrap predefined design templates and classes.
• Responsive features: Bootstrap gives you the ability to easily create
responsive designs. The responsive features make your web pages appear
correctly on different devices and screen resolutions without any change in
markup.
• Consistent design: All Bootstrap components share the same design
templates and styles through a central library so the designs and layouts of
your web pages are consistent.
• Compatible with browsers: Bootstrap is created with modern browsers in
mind and it is compatible with all modern browsers, such as Mozilla Firefox,
Google Chrome, Safari, Internet Explorer, and Opera.
• Open source: It is completely free to download and use.

AngularJS Framework:

AngularJS is an open source JavaScript-based development framework for

building well structured, easily testable, and maintainable front-end
applications. It provides developers with options for writing client-side
applications using JavaScript following the MVC (Model-View-Controller)
architecture.
AngularJS changes static HTML to dynamic HTML and extends the ability of
HTML by adding built-in attributes and components. It also provides an ability
to create custom attributes using simple JavaScript.

Advantages of AngularJS
• Easy to use: AngularJS provides the capability to create single page
applications in a very clean and maintainable way.
• Two-way data binding: Two-way data binding implies that when you update
any properties in your model, the UI will update and similarly that when
UI elements are updated, the changes will be reflected to model properties.
AngularJS provides this two-way data binding capability to HTML, enabling
view and model to coordinate with the changes in one another, delivering a
rich and responsive experience.
• Testable code: AngularJS is designed with testability in mind so that testing
of your AngularJS applications is as easy as possible. It allows you to write
basic flow end-to-end testing, unit testing, and UI mocks.
• Dependency injection: AngularJS uses dependency injection and makes use
of separation of concerns.
• Reusable components: AngularJS provides reusable components, allowing
developers to write less code and get more functionality.
• Browser support: On top of everything, AngularJS applications can run on
all major browsers and smart phones including Android and iOS phones and
tablets.