Section 1 Section2 Section 3 Section 4 Section 5 Section 6
CSS basic syntax and structure
CSS Syntax
The CSS syntax
defines how CSS rules are written so that browsers can interpret and apply them
to HTML elements.
Selector: Targets the HTML
element "h1" to apply styles.
Declaration Block: Enclosed in curly
braces { }, contains one or more declarations.
Property: Specifies the style
attribute, here "color" for text color.
Value: Defines the
property's setting, here "blue" for the text hue.
Overall Structure: Forms a complete
CSS rule: h1 { color: blue; }, styling h1 headings blue.
The basic structure of a CSS rule, also known as
a ruleset, consists of two main parts: a selector and a declaration block.
Syntax
selector
{ property: value; }
Example
<html>
<head>
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello,
World!</h1>
<p>This is a
simple paragraph.</p>
</body>
</html>
In above Example,
h1: This selector targets
all <h1> elements on the page. The style applied to <h1>
will set the text color to blue and the font size to 24px.
p: This selector targets
all <p> elements. The text color will be green and the font
size will be 16px.
Selectors in CSS
Selectors define
which HTML elements are styled.
CSS offers several types of selectors.
1. Universal Selector: Applies
styles to all elements.
* {
margin: 0;
padding: 0;
}
2. Type
Selector: Targets specific HTML elements.
h1 {
font-family: Arial,
sans-serif;
}
3. Class
Selector: Styles elements with a specific class attribute.
.box {
border: 1px solid black;
padding: 10px;
}
4. ID
Selector: Targets a single element with a specific ID.
#header {
background-color:
lightgray;
}
Declaration Block in CSS Syntax
Each declaration consists
of a property and a value, separated by a colon, and each declaration is
followed by a semicolon:
1.
Properties: Properties are the aspects of the selected elements you want
to style (like color, width, height, etc.).
color: Defines
the text color.
background-color: Defines
the background color of an element.
font-size: Sets
the size of the font.
margin: Specifies
the space around an element.
padding: Defines
the space between the element's content and its border.
2. Values: Values
define the specifics of the property you want to apply, such as a color name, a
number (e.g., 16px), or percentages (e.g., 50%).
Grouping and
Nesting of CSS Selectors
You can group selectors to apply the same styles or nest them for
hierarchical targeting.
1. Grouping
h1, h2, h3 {
color: darkblue;
}
2. Nesting
ul li {
list-style-type: square;
}
Pseudo-classes
and Pseudo-elements
Pseudo-classes and pseudo-elements are used for
styling specific states or parts of elements. Pseudo classes target's the
elements based on a particular state and pseudo elements targets the elements
on basis of a particular part of that element.
/*pseudo-class selector*/
a:hover {
color: green;
}
/*pseudo-element selector*/
p::first-line {
font-weight: bold;
}
Changing Text and Attributes
JavaScript
HTML DOM - Changing HTML
The HTML DOM allows JavaScript to change the content of HTML
elements.(Document
Object Model )
Changing HTML
Content
The easiest way to modify the content of an HTML element is by
using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New
text!";
</script>
</body>
</html>
Example
explained:
The HTML document above contains a <p> element
with id="p1"
We use the HTML DOM to get the element with id="p1"
A JavaScript changes the content (innerHTML) of that element to
"New text!"
This example changes the content of
an <h1> element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Example
explained:
The HTML document above contains an <h1> element
with id="id01"
We use the HTML DOM to get the element
with id="id01"
A JavaScript changes the content (innerHTML) of that element to
"New Heading"
Changing the
Value of an Attribute
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute = new value
This example changes the value of the src attribute of
an <img> element:
Example
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Example
explained:
The HTML document above contains an <img> element
with id="myImage"
We use the HTML DOM to get the element
with id="myImage"
A JavaScript changes the src attribute of that element
from "smiley.gif" to "landscape.jpg"
Dynamic HTML
content
JavaScript makes HTML pages more dynamic and interactive.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML =
Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Example
JavaScript can change content:
<!DOCTYPE
html>
<html>
<body>
<h1>My First
JavaScript</h1>
<p>JavaScript
can change the content of an HTML element:</p>
<button
type="button" onclick="myFunction()">Click
Me!</button>
<p
id="demo">This is a demonstration.</p>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML
= "Hello JavaScript!";
}
</script>
</body>
</html>
Before After
Example
JavaScript can change styles:
<!DOCTYPE
html>
<html>
<body>
<h1>My First
JavaScript</h1>
<p
id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function
myFunction() {
document.getElementById("demo").style.fontSize =
"25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor =
"yellow";
}
</script>
<button type="button"
onclick="myFunction()">Click Me!</button>
</body>
</html>
Before After
JavaScript - change attribute value
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source)
attribute of an image.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic =
"pic_bulboff.gif"
} else {
pic =
"pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100"
height="180">
<p>
<button type="button"
onclick="light(1)">Light On</button>
<button type="button"
onclick="light(0)">Light Off</button>
</p>
</body>
</html>
Before After
No comments:
Post a Comment