Scribd
Upload
15 views

CSS Layout Techniques

obtain result

Uploaded by

vuyellaharile
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

CSS Layout Techniques

obtain result

Uploaded by

vuyellaharile
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS Layout Techniques

CSS offers different techniques to structure and position elements on a web page effectively.

1. Floats
o The float property is used to position elements to the left or right, allowing
text or inline elements to wrap around it.

Syntax:

element {
float: left; /* or right */
}

Example:

<div style="float: left; width: 50%; background-color: lightblue;">


This div is floated to the left.
</div>
<div style="float: right; width: 50%; background-color: lightgreen;">
This div is floated to the right.
</div>

Limitations: Floats can be tricky when dealing with complex layouts as they may
lead to unexpected overlapping of elements.

2. Display Types
o The display property defines how elements are displayed on the page.

Types:

o Block: Elements take up the full width of their container.


o Inline: Elements only take up as much width as necessary.
o Inline-block: Combines features of both block and inline.

Example:

<div style="display: block; background-color: lightblue;">Block


Element</div>
<span style="display: inline; background-color: lightgreen;">Inline
Element</span>
<div style="display: inline-block; background-color:
lightpink;">Inline-block Element</div>

3. Flexbox
o Flexbox is a modern layout model designed for aligning items within a
container, especially when the size of the items is unknown.

Syntax:
.container {
display: flex;
}

Example:

<div style="display: flex; justify-content: space-between;">


<div style="background-color: lightblue; width: 30%;">Flex Item
1</div>
<div style="background-color: lightgreen; width: 30%;">Flex Item
2</div>
<div style="background-color: lightpink; width: 30%;">Flex Item
3</div>
</div>

Key Properties:

o justify-content: Align items horizontally.


o align-items: Align items vertically.
o flex-direction: Define the direction of the layout (row or column).

CSS Positioning

CSS positioning allows you to place elements in precise locations on the web page.

1. Static (Default Position)


o Elements are positioned as per the normal document flow.
o No special positioning applied.

Example:

<div style="position: static;">This is static.</div>

2. Relative
o Positions the element relative to its normal position.
o You can use top, left, right, or bottom to "move" the element.

Example:

<div style="position: relative; top: 10px; left: 20px;">


This is relative positioning.
</div>

3. Absolute
o Positions the element relative to the nearest positioned ancestor (not static).
o If no such ancestor exists, it’s positioned relative to the <html>.

Example:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px;
background-color: lightblue;">
This is absolute positioning.
</div>
</div>

4. Fixed
o Positions the element relative to the viewport.
o The element does not move even when the page is scrolled.

Example:

<div style="position: fixed; top: 0; left: 0; background-color:


lightpink;">
This is fixed positioning.
</div>

Responsive Web Design

Responsive design ensures web pages adapt to different screen sizes, improving user
experience on various devices.

1. Media Queries
o Allow applying CSS rules based on screen size or other conditions like
orientation.

Syntax:

@media (max-width: 768px) {


body {
background-color: lightblue;
}
}

Example:

<style>
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
</style>
<div>This div changes color on small screens.</div>

2. Mobile-First Design
o Start with a design optimized for smaller screens and build up for larger
screens using media queries.

Example:
div {
font-size: 14px; /* Mobile default */
}

@media (min-width: 768px) {


div {
font-size: 18px; /* Adjust for larger screens */
}
}

By mastering these CSS techniques, you can build visually appealing, well-structured, and
responsive web designs!

To better explain these concepts of CSS Layouts, Positioning, and Responsive Web
Design, you can combine them into a single, cohesive example that demonstrates how they
interact in a practical layout. Here's a well-rounded example:

Example: Building a Simple Responsive Layout

We will create a webpage with:

 A header, a content section with two columns, and a footer.


 Use different CSS techniques like flexbox, positioning, and media queries to
make it responsive.

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Layout and Positioning</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">Header Section</header>
<div class="container">
<aside class="sidebar">Sidebar Content</aside>
<main class="main-content">Main Content</main>
</div>
<footer class="footer">Footer Section</footer>
</body>
</html>

CSS Code (styles.css):

Basic Styling:

body {
margin: 0;
font-family: Arial, sans-serif;
}

.header, .footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
}

.container {
display: flex;
flex-wrap: wrap; /* Makes it responsive for smaller screens */
margin: 10px;
}

.sidebar {
flex: 1 1 30%; /* 30% of width, but shrink if necessary */
background-color: #f4f4f4;
padding: 10px;
}

.main-content {
flex: 1 1 70%; /* 70% of width, but shrink if necessary */
background-color: #e8e8e8;
padding: 10px;
}

.footer {
position: fixed; /* Fixed at the bottom of the viewport */
bottom: 0;
width: 100%;
}

Responsive Design with Media Queries:

@media (max-width: 768px) {


.container {
flex-direction: column; /* Stack sidebar and main content
vertically */
}

.sidebar, .main-content {
flex: 1 1 100%; /* Full width for smaller screens */
}

.footer {
position: relative; /* Footer becomes normal flow on small screens
*/
}
}
Introduction to JavaScript

JavaScript is a dynamic programming language commonly used to create interactive features


on websites. It runs in the browser and works alongside HTML and CSS to build powerful
web applications.

1. Basics of JavaScript

1.1 Syntax

JavaScript syntax refers to the rules for writing JavaScript code.

 Statements: Ends with a semicolon (;), though it's optional in many cases.
 Comments:
o Single-line: // This is a comment
o Multi-line:

/* This is a
multi-line comment */

Example:

let message = "Hello, JavaScript!"; // Declare a variable


console.log(message); // Output to the console

1.2 Variables

Variables store data and can be declared using let, const, or var.

Example:

let name = "Alice"; // Variable that can change


const age = 25; // Constant value
console.log(name, age); // Outputs: Alice 25

1.3 Data Types

JavaScript has several data types:

 Primitive: string, number, boolean, null, undefined, bigint, symbol


 Non-Primitive: object (e.g., arrays and functions)
Example:

let greeting = "Hi"; // String


let isSunny = true; // Boolean
let temperature = 30; // Number
let nothingHere = null; // Null
let notDefined; // Undefined

2. Outputting in JavaScript

There are several ways to output data in JavaScript:

2.1 Using console.log()

Used for debugging purposes; outputs to the browser's console.

let message = "Hello, Console!";


console.log(message); // Outputs: Hello, Console!

2.2 Using alert()

Displays a popup alert box.

alert("Hello, Alert!");

2.3 Using document.write()

Writes directly to the webpage. It’s often used for testing or simple pages.

document.write("Hello, Document!");

2.4 Using innerHTML

Sets or updates the HTML content of an element.

document.getElementById("output").innerHTML = "Hello, InnerHTML!";

HTML:

<div id="output"></div>

2.5 Using window.prompt()

Displays a dialog box to get input from the user.

let userInput = prompt("Enter your name:");


console.log("Hello, " + userInput);
2.6 Using window.confirm()

Displays a dialog box with "OK" and "Cancel" options.

let confirmAction = confirm("Do you want to proceed?");


console.log(confirmAction ? "User confirmed." : "User canceled.");

3. Control Structures

3.1 Conditionals

Conditionals direct the flow of the program based on conditions.

 if-else Statement:

let score = 85;

if (score >= 90) {


console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}

 Switch Case:

let day = 3;

switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}

3.2 Loops

Loops are used to repeat blocks of code.


 For Loop:

for (let i = 1; i <= 5; i++) {


console.log("Count: " + i);
}

 While Loop:

let count = 1;

while (count <= 5) {


console.log("Count: " + count);
count++;
}

 Do-While Loop:

let count = 1;

do {
console.log("Count: " + count);
count++;
} while (count <= 5);

3.3 Functions

Functions are reusable blocks of code.

 Function Declaration:

function greet(name) {
return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Output: Hello, Alice!

 Arrow Function:

const add = (a, b) => a + b;


console.log(add(5, 3)); // Output: 8
Interactive Example

Combining outputs, variables, and conditionals:

let userName = prompt("What is your name?");


let age = prompt("How old are you?");
age = parseInt(age);

if (age >= 18) {


alert("Hello, " + userName + ". You are an adult.");
} else {
alert("Hello, " + userName + ". You are a minor.");
}

console.log("User's name is " + userName + " and they are " + age + " years
old.");
document.write("Welcome to our website, " + userName + "!");

You might also like