Scribd
Upload
4 views

HTML and CSS NOtes

Uploaded by

monikamonika1379
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML and CSS NOtes

Uploaded by

monikamonika1379
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

What is HTML

 HTML (HyperText Markup Language) is the standard language for creating web
pages and web applications.
 It is a markup language used to structure content on the web. HTML elements are the
building blocks of HTML pages and are represented by tags.

Structure of HTML

 An HTML document has a basic structure, which includes the following components:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Your Title Here</title>
</head>
<body>
<h1>Your Heading Here</h1>
<p>Your paragraph here.</p>
</body>
</html>

o <!DOCTYPE html>: Declares the document type and version of HTML.


o <html>: The root element of an HTML page.
o <head>: Contains meta-information about the document (like title, character
set, and links to stylesheets).
o <body>: Contains the content of the document (text, images, links, etc.).

Headings and Paragraphs in HTML

 HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the
largest and <h6> being the smallest.

<h1>This is a Heading</h1>
<h2>This is a Subheading</h2>

 Paragraphs are defined with the <p> tag.

html
Copy code
<p>This is a paragraph.</p>

Comments in HTML

 Comments can be added to HTML documents using <!-- comment text -->. These
comments are not displayed in the browser and are used for documentation purposes.

<!-- This is a comment -->


Lorem Ipsum

 Lorem Ipsum is a placeholder text used in web design and publishing to fill a space
on a page and give an impression of how the final text will look.
 It is often used in the design phase of projects when actual text is not yet available.

Lists in HTML

 HTML supports ordered and unordered lists.


o Unordered Lists: Created with the <ul> tag and list items with the <li> tag.

html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

o Ordered Lists: Created with the <ol> tag.

html
Copy code
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Images in HTML

 Images can be added using the <img> tag, with the src attribute to specify the image
source and the alt attribute for alternative text.

html
Copy code
<img src="image.jpg" alt="Description of the image">

Links and Hyperlinks in HTML

 Links are created using the <a> (anchor) tag, with the href attribute to define the
URL.

<a href="https://www.example.com">This is a link</a>

 You can create links to other web pages, email addresses, or even to specific parts of
the same page.

Forms and Input in HTML

 HTML forms are used to collect user input. The <form> tag wraps all form elements.
 Common input types include:
o Text fields: <input type="text">
o Password fields: <input type="password">
o Checkboxes: <input type="checkbox">
o Radio buttons: <input type="radio">
o Submit button: <input type="submit">

<form action="/submit" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

Video and Audio in HTML

 HTML5 introduced <video> and <audio> tags for embedding media.

<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Semantic HTML

 Semantic HTML refers to using HTML markup that conveys meaning about the
content. Semantic elements clearly describe their meaning to both the browser and the
developer.
o Examples include:
 <header>: Defines a header for a document or section.
 <footer>: Defines a footer for a document or section.
 <article>: Represents a self-contained composition.
 <section>: Represents a thematic grouping of content.

<article>
<header>
<h1>Article Title</h1>
</header>
<p>This is the content of the article.</p>
<footer>Published on date</footer>
</article>

Typographic Tags in HTML

 HTML provides several tags for text formatting:


o <strong>: Bold text.
o <em>: Italicized text.
o <small>: Smaller text.
o <mark>: Highlighted text.
o <del>: Deleted text.
o <ins>: Inserted text.
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>

1. What Is CSS
Definition

 CSS (Cascading Style Sheets) is a stylesheet language used to describe the


presentation of a document written in HTML or XML.
 It allows you to apply styles to web pages, including layout, colors, fonts, and other
visual elements.

Key Features

 Separation of Content and Presentation: Keeps HTML focused on content, while


CSS handles styling.
 Cascading and Specificity: Styles can cascade, allowing multiple styles to apply to
an element, with specificity determining which styles take precedence.
 Responsive Design: CSS facilitates creating designs that work on various screen sizes
and devices.

Why Use CSS?

 Improves maintainability and readability of web pages.


 Enhances user experience with visually appealing designs.
 Reduces file size by separating styles from HTML.

2. 3 Ways To Write CSS


1. Inline CSS

 Definition: Styles are applied directly to an HTML element using the style attribute.
 Example:

html
Copy code
<h1 style="color: blue; font-size: 20px;">Hello World</h1>

 Pros: Quick to implement, useful for single-use styles.


 Cons: Reduces maintainability, increases redundancy.

2. Internal CSS

 Definition: Styles are defined within a <style> tag inside the <head> section of an
HTML document.
 Example:

html
Copy code
<head>
<style>
h1 {
color: blue;
font-size: 20px;
}
</style>
</head>

 Pros: Useful for styling a single document, maintains separation of content and styles.
 Cons: Does not apply across multiple pages.

3. External CSS

 Definition: Styles are written in a separate .css file linked to the HTML document
using a <link> tag.
 Example:

html
Copy code
<link rel="stylesheet" href="styles.css">

 Pros: Easy to maintain, applies styles across multiple pages, better for organization.
 Cons: Requires an additional HTTP request.

3. CSS Colors In Depth


Color Representation

1. Named Colors: Basic color names recognized by browsers (e.g., red, blue).
2. Hexadecimal: Color values represented in hex format (e.g., #ff0000 for red).
3. RGB: Uses the RGB color model (e.g., rgb(255, 0, 0)).
4. RGBA: RGB with an alpha channel for opacity (e.g., rgba(255, 0, 0, 0.5)).
5. HSL: Hue, Saturation, Lightness (e.g., hsl(0, 100%, 50%)).
6. HSLA: HSL with alpha for opacity (e.g., hsla(0, 100%, 50%, 0.5)).

Color Functions

 currentColor: Inherits the color of the element.


 transparent: Fully transparent color.

Color Theory

 Understand color combinations (complementary, analogous, triadic) for aesthetic


designs.
 Use tools like color pickers or palettes for inspiration.

4. CSS Units In Depth


Absolute Units

 Fixed sizes not influenced by other elements.


o px (pixels)
o cm (centimeters)
o in (inches)
o pt (points)
o pc (picas)

Relative Units

 Sizes relative to other elements or viewport.


o em: Relative to the font-size of the element.
o rem: Relative to the font-size of the root element (html).
o %: Percentage of the parent element's size.
o vw: Viewport width (1% of the viewport's width).
o vh: Viewport height (1% of the viewport's height).

Choosing Units

 Use em and rem for responsive typography.


 Use % for flexible layouts.
 Use px for fixed dimensions when necessary.

5. CSS Fonts In Depth


Font Properties

1. font-family: Specifies the font to be used.


o Example: font-family: 'Arial', sans-serif;
2. font-size: Sets the size of the font.
o Example: font-size: 16px;
3. font-weight: Defines the thickness of the font.
o Example: font-weight: bold;
4. font-style: Specifies font style (normal, italic, oblique).
o Example: font-style: italic;
5. font-variant: Controls the usage of small caps.
o Example: font-variant: small-caps;

Web Fonts
 Use services like Google Fonts or Adobe Fonts to include a variety of fonts.
 @font-face Rule: Load custom fonts.

css
Copy code
@font-face {
font-family: 'MyFont';
src: url(https://www.scribd.com/'myfont.woff2') format('woff2');
}

Font Stacks

 Define fallback fonts to ensure text remains readable if the preferred font isn’t
available.

css
Copy code
font-family: 'CustomFont', 'Arial', sans-serif;

6. CSS Box Model In Depth


Components of the Box Model

1. Content: The actual content of the box (text, images).


2. Padding: Space between content and border (transparent).
3. Border: The outline surrounding the padding (can be styled).
4. Margin: Space outside the border that separates elements.

Box Sizing

 Default Box Model: Width and height apply only to the content area.
 box-sizing: border-box;: Width and height include padding and border.

css
Copy code
* {
box-sizing: border-box;
}

Visual Representation

7. CSS Background Properties In Depth


Background Properties

1. background-color: Sets the background color.


o Example: background-color: blue;
2. background-image: Sets a background image.
o Example: background-image: url(https://www.scribd.com/'image.jpg');
3. background-position: Defines the position of the background image.
o Example: background-position: center;
4. background-size: Specifies the size of the background image.
o Example: background-size: cover;
5. background-repeat: Controls the repetition of the background image.
o Example: background-repeat: no-repeat;

Shorthand Property

 background: Combine multiple properties into one.

css
Copy code
background: blue url(https://www.scribd.com/'image.jpg') no-repeat center/cover;

8. Master CSS Gradients


Types of Gradients

1. Linear Gradients: Transition between colors along a straight line.

css
Copy code
background: linear-gradient(to right, red, yellow);

2. Radial Gradients: Transition from the center to the outer edge.

css
Copy code
background: radial-gradient(circle, red, yellow);

3. Repeating Gradients: Gradients that repeat indefinitely.

css
Copy code
background: repeating-linear-gradient(45deg, red, yellow 10%, blue
20%);

Gradient Functions

 Angle: Specify the angle of the gradient.

css
Copy code
background: linear-gradient(45deg, red, yellow);

9. Master CSS Filters


Filter Functions

 Apply visual effects to elements.


 Common Filters:
o blur(px): Applies a Gaussian blur.
o brightness(%): Adjusts the brightness.
o contrast(%): Adjusts contrast levels.
o grayscale(%): Converts to grayscale.
o sepia(%): Applies a sepia filter.

Example Usage
css
Copy code
img {
filter: blur(5px) brightness(80%);
}

10. CSS Advanced Selectors


Types of Advanced Selectors

1. Attribute Selectors:
o Select elements based on attributes.

css
Copy code
/* Select elements with a specific attribute */
input[type="text"] {
border: 1px solid blue;
}

2. Child Combinator: Selects elements that are direct children of a specified element.

css
Copy code
div > p {
color: green;
}

3. General Sibling Combinator: Selects all siblings after the specified element.

css
Copy code
h1 ~ p {
color: red;
}

4. Nth Child: Selects elements based on their order.

css
Copy code
li:nth-child(2) {
color: blue; /* Selects the second list item */
}

11. CSS Positioning In Depth


Positioning Types

1. Static: Default positioning; elements are positioned in the order they appear in the
document flow.
2. Relative: Positioned relative to its normal position.

css
Copy code
position: relative;
top: 10px; /* Moves the element down 10px from its original position
*/

3. Absolute: Positioned relative to the nearest positioned ancestor (not static).

css
Copy code
position: absolute;
top: 20px; /* Moves the element 20px from the top of its positioned
ancestor */

4. Fixed: Positioned relative to the viewport; stays in place when scrolling.

css
Copy code
position: fixed;
top: 0; /* Stays at the top of the viewport */

5. Sticky: Hybrid between relative and fixed; behaves like relative until a certain scroll
position, then behaves like fixed.

css
Copy code
position: sticky;
top: 0; /* Sticks to the top of the viewport when scrolling */

12. CSS Flexbox In Depth


Flexbox Properties

1. Container Properties:
o display: flex;: Activates flexbox on the container.
o flex-direction: Defines the direction of flex items (row, column).
o justify-content: Aligns items horizontally (flex-start, center, space-
between).
o align-items: Aligns items vertically (flex-start, center, stretch).
2. Item Properties:
o flex-grow: Defines how much a flex item will grow relative to others.
o flex-shrink: Defines how much a flex item will shrink relative to others.
o flex-basis: Defines the default size of a flex item.

Example Usage
css
Copy code
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item {
flex: 1; /* Each item takes up equal space */
}

13. CSS Grid In Depth


Grid Properties

1. Container Properties:
o display: grid;: Activates grid layout.
o grid-template-columns: Defines the number and size of columns.
o grid-template-rows: Defines the number and size of rows.
o grid-gap: Sets the space between grid items.
2. Item Properties:
o grid-column: Specifies the starting and ending column.
o grid-row: Specifies the starting and ending row.
o grid-area: Assigns a name to a grid item.

Example Usage
css
Copy code
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns */
grid-gap: 10px; /* Space between items */
}
.item {
grid-column: 1 / 3; /* Spans two columns */
}

14. CSS Transitions


Transition Properties
1. transition-property: Specifies the property to be transitioned.
2. transition-duration: Defines how long the transition should take.
3. transition-timing-function: Defines the speed curve of the transition (linear, ease,
ease-in-out).
4. transition-delay: Sets a delay before the transition starts.

Example Usage
css
Copy code
.box {
transition: background-color 0.5s ease-in-out;
}

.box:hover {
background-color: blue; /* Changes color on hover */
}

15. CSS Animations


Keyframe Animations

 Define animations using @keyframes.


 Specify the styles at various points during the animation.

Example Usage
css
Copy code
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}

.box {
animation: slide 2s infinite; /* Slides the box */
}

Animation Properties

1. animation-name: The name of the @keyframes animation.


2. animation-duration: The length of time the animation takes.
3. animation-timing-function: The timing function to control the speed of the
animation.
4. animation-delay: Delay before the animation starts.
5. animation-iteration-count: Number of times the animation should repeat.

16. CSS Media Queries


Definition

 Media Queries allow you to apply styles based on the viewport's characteristics, such
as width, height, orientation, and resolution.

Example Usage
css
Copy code
/* Styles for devices wider than 600px */
@media (min-width: 600px) {
body {
background-color: lightblue;
}
}

/* Styles for devices in portrait orientation */


@media (orientation: portrait) {
body {
font-size: 16px;
}
}

Best Practices

 Use mobile-first design by starting with styles for small screens and using min-width
for larger devices.
 Combine multiple media queries for specific breakpoints.

17. CSS Responsive Design Techniques


Techniques

1. Fluid Grids: Use percentages instead of fixed units for widths.


2. Flexible Images: Ensure images resize within their containers.

css
Copy code
img {
max-width: 100%;
height: auto;
}

3. Media Queries: Apply different styles for different screen sizes.


4. Mobile-First Approach: Design for smaller screens first and use media queries to
enhance for larger screens.

Frameworks

 Use CSS frameworks like Bootstrap or Foundation to streamline responsive design.


18. CSS Preprocessors (Sass, LESS)
Definition

 CSS Preprocessors enhance CSS with variables, nesting, mixins, and functions,
making it more maintainable and scalable.

Features

1. Variables: Store values (e.g., colors, fonts) to reuse throughout the stylesheet.

$primary-color: blue;
body {
color: $primary-color;
}

2. Nesting: Nest CSS rules to reflect HTML structure.

.nav {
ul {
list-style: none;
}
}

3. Mixins: Create reusable styles.

@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

.container {
@include flex-center;
}

Choosing a Preprocessor

 Choose based on your project needs, team familiarity, and community support.

19. CSS Variables (Custom Properties)


Definition

 CSS Variables allow you to define custom properties that can be reused throughout
the stylesheet.
Example Usage
css
Copy code
:root {
--main-color: blue;
}

.button {
background-color: var(--main-color);
}

Advantages

 Easy to manage and update styles.


 Dynamic updates using JavaScript.

You might also like