Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML and CSS NOtes

Uploaded by

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

HTML and CSS NOtes

Uploaded by

monikamonika1379
Copyright
© © All Rights Reserved
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('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('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('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