Scribd
Upload
5 views

unit 2 web tech

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML or XML documents, separating content from design for easier maintenance. It can be applied through inline, internal, or external methods, with various properties for text styling, box model, background styling, and layout management. Additionally, CSS supports block-level elements and advanced layout techniques like Flexbox and Grid for responsive design.

Uploaded by

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

unit 2 web tech

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML or XML documents, separating content from design for easier maintenance. It can be applied through inline, internal, or external methods, with various properties for text styling, box model, background styling, and layout management. Additionally, CSS supports block-level elements and advanced layout techniques like Flexbox and Grid for responsive design.

Uploaded by

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

‭UNIT 2‬

‭CSS (Cascading Style Sheets)‬

‭ SS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a‬
C
‭document written in HTML or XML. It defines how elements should be displayed on the screen,‬
‭paper, or in other media. CSS separates content from design, making it easier to maintain and‬
‭manage the look and feel of a website or application.‬

‭Types of CSS‬

‭There are three main ways to apply CSS to an HTML document:‬

‭1.‬ ‭Inline CSS‬


‭○‬ ‭Applied directly to HTML elements using the‬‭ style‬‭attribute.‬
‭○‬ ‭Can be used for quick styles on individual elements, but it's not recommended for‬
‭large-scale styling due to lack of reusability.‬

<h1 style="color: red; font-size: 24px;">Hello World</h1>‬


‭

‭2.‬ ‭Internal CSS‬


‭○‬ ‭Defined within a‬‭<style>‬‭tag in the‬‭
<head>‬‭section‬‭of the HTML document.‬
‭○‬ ‭Useful when styling a single document or page.‬

‭<head>‬

‭<style>‬

‭h1 {‬

‭color: green;‬

‭font-size: 30px;‬

‭}‬

‭</style>‬

‭</head>‬

‭<body>‬
‭<h1>Welcome to CSS</h1>‬

‭</body>‬

‭3.‬ ‭External CSS‬


‭○‬ ‭The most common and efficient method, where the CSS code is placed in a‬
‭separate‬‭.css‬‭file and linked to the HTML document using the‬‭<link>‬‭tag.‬
‭○‬ ‭Allows you to reuse the same styles across multiple HTML files.‬

‭<head>‬

‭<link rel="stylesheet" type="text/css" href="styles.css">‬

‭</head>‬

‭h1 {‬

‭color: purple;‬

‭font-size: 32px;‬

‭}‬

‭CSS Properties:‬

‭ SS provides a wide variety of properties for styling different aspects of HTML elements. Some‬
C
‭key categories and properties include:‬

‭Text Styling:‬

‭‬
● c‭ olor‬‭: Sets the text color.‬
‭●‬ ‭font-family‬‭: Specifies the font to use.‬
‭●‬ ‭font-size‬‭: Defines the size of the font.‬
‭●‬ ‭font-weight‬‭: Controls the boldness of the text.‬
‭●‬ ‭line-height‬‭: Controls the spacing between lines of‬‭text.‬
‭●‬ ‭text-align‬‭: Aligns the text (e.g., left, right, center).‬

‭Box Model‬

‭The‬‭CSS box model‬‭defines how the dimensions of an‬‭element are calculated, including‬
‭margins, borders, padding, and the actual content area.‬

‭‬
● ‭ idth‬‭: Sets the width of an element.‬
w
‭●‬ ‭height‬‭: Sets the height of an element.‬
‭●‬ ‭margin‬‭: Adds space outside the element.‬
‭●‬ ‭padding‬‭: Adds space inside the element, around the‬‭content.‬
‭●‬ ‭border‬‭: Defines a border around an element.‬

‭Example of box model properties:‬

‭div {‬

‭width: 200px;‬

‭height: 100px;‬

‭padding: 20px;‬

‭margin: 10px;‬

‭border: 2px solid black;‬

‭}‬

‭Background Styling‬

‭‬
● b‭ ackground-color‬‭: Sets the background color of an‬‭element.‬
‭●‬ ‭background-image‬‭: Sets an image as the background.‬
‭●‬ ‭background-size‬‭: Controls the size of the background‬‭image.‬
‭●‬ ‭background-position‬‭: Sets the position of the background‬‭image.‬

‭Layout‬

‭ ‬ d‭ isplay‬‭: Defines how an element is displayed (‬‭block‬‭,‬‭inline‬‭,‬‭flex‬‭,‬‭grid‬‭, etc.).‬


●
‭●‬ ‭position‬‭: Specifies how an element is positioned on‬‭the page (‬‭static‬‭,‬‭relative‬‭,‬‭absolute‬‭,‬
‭fixed‬‭,‬‭sticky‬‭).‬
‭●‬ ‭top‬‭,‬‭right‬‭,‬‭bottom‬‭,‬‭left‬‭: Offsets the element based‬‭on its positioning context.‬
‭●‬ ‭float‬‭: Floats an element to the left or right, allowing‬‭text and inline elements to wrap‬
‭around it.‬

‭EXAMPLE:‬
‭.container {‬

‭display: flex;‬

‭justify-content: space-between;‬

‭align-items: center;‬

‭}‬

‭Working with block element and objects‬

‭ hen working with block elements and objects in CSS, it's important to understand how‬
W
‭block-level elements are displayed, how they interact with other elements, and how to manage‬
‭the layout effectively using properties and techniques.‬

‭1. Understanding Block-Level Elements‬

‭ lock-level elements in HTML take up the full width of their container by default and start on a‬
B
‭new line. They typically stack vertically, meaning each block element pushes the next one below‬
‭it.‬

‭Some common block-level elements are:‬

‭‬
● ‭ div>‬
<
‭●‬ ‭<p>‬
‭●‬ ‭<h1>‬‭,‬‭<h2>‬‭,‬‭<h3>‬‭, etc.‬
‭●‬ ‭<ul>‬‭,‬‭<ol>‬‭,‬‭<li>‬
‭●‬ ‭<section>‬
‭●‬ ‭<article>‬
‭●‬ ‭<footer>‬

‭2. CSS Properties for Block-Level Elements‬

‭ ou can control the layout, positioning, and appearance of block elements using CSS. Here are‬
Y
‭some key properties and techniques for managing block elements:‬

‭a. Width and Height‬

‭ y default, block elements take up the full width of their parent container. However, you can‬
B
‭control their width and height with the‬‭width‬‭and‬‭height‬‭properties‬‭.‬
‭div {‬

‭width: 50%; /* 50% of the parent container */‬

‭height: 200px;‬

}‬
‭

‭●‬ B ‭ lock elements will automatically extend to the full width of their parent unless explicitly‬
‭given a width.‬
‭●‬ ‭You can set a fixed or percentage-based width.‬
‭●‬ ‭You can also use‬‭ min-width‬ max-width‬
‭,‬‭ min-height‬
‭,‬‭ max-height‬‭to‬
‭,‬‭and‬‭
‭control the dimensions.‬

‭b. Margins and Padding‬

‭ argins are used to create space around elements, while padding creates space inside an‬
M
‭element.‬

‭div {‬

‭margin: 20px; /* Space outside the element */‬

‭padding: 10px; /* Space inside the element */‬

‭}‬

‭●‬ m ‭ argin-top‬‭,‬‭margin-right‬‭,‬‭margin-bottom‬‭, and‬‭margin-left‬‭control the margins for‬


‭individual sides.‬
‭●‬ ‭padding-top‬‭,‬‭padding-right‬‭,‬‭padding-bottom‬‭, and‬‭padding-left‬‭control padding‬‭for‬
‭individual sides.‬

‭c. Display Property‬

‭The‬‭display‬‭property determines how an element is‬‭displayed.‬

‭●‬ ‭block: This is the default for block-level elements (e.g.,‬‭<div>‬‭).‬

‭div {‬
‭display: block; /* Block-level element */‬

‭}‬

<span>‬‭are inline by default,‬‭meaning they do not break onto a‬


‭●‬ i‭nline: Elements like‬‭
‭new line and only take up as much space as needed.‬

‭span {‬

‭display: inline;‬

‭}‬

‭●‬ i‭nline-block: This combines some of the behavior of both block and inline. The element‬
‭behaves like a block-level element but doesn’t break onto a new line.‬

‭div {‬

‭display: inline-block; /* Behaves like block but sits inline */‬

‭}‬

‭d. Positioning‬

‭ ou can change the positioning of block-level elements using the‬‭position‬‭property. The‬


Y
‭available values are:‬

‭‬
● s‭ tatic (default) – No positioning, it follows the normal document flow.‬
‭●‬ ‭relative – Positioned relative to its normal position.‬
‭●‬ ‭absolute – Positioned relative to the nearest positioned ancestor.‬
‭●‬ ‭fixed – Positioned relative to the viewport (remains in the same position even when‬
‭scrolling).‬
‭ ‬ ‭sticky – Switches between relative and fixed, depending on the scroll position.‬
●

‭div {‬

‭position: relative;‬
‭top: 20px;‬

‭left: 30px;‬

}‬
‭

‭e. Overflow‬

‭ y default, if content exceeds the size of a block element, it will overflow outside. You can‬
B
‭control this with the‬‭overflow‬‭property.‬

‭div {‬

‭width: 300px;‬

‭height: 150px;‬

‭overflow: auto; /* Adds scrollbars when content overflows */‬

‭}‬

‭Possible values:‬

‭‬
● v‭ isible‬‭(default): Content can overflow.‬
‭●‬ ‭hidden‬‭: Content is clipped and not visible.‬
‭●‬ ‭scroll‬‭: Always shows scrollbars, even if the content‬‭fits.‬
‭●‬ ‭auto‬‭: Only shows scrollbars when needed.‬

‭3. Using Flexbox with Block Elements‬

‭ lexbox is a powerful layout tool that can be used in conjunction with block-level elements to‬
F
‭align and distribute space within containers.‬

‭To use flexbox:‬

1‭ .‬ S‭ et the container element's‬‭display‬‭to‬‭flex‬‭.‬


‭2.‬ ‭Flexbox enables easy vertical and horizontal alignment of block elements.‬

‭.container {‬
‭display: flex;‬

‭justify-content: space-between; /* Distributes items evenly */‬

‭}‬

‭.item {‬

‭flex: 1; /* Makes each item take up equal space */‬

‭}‬

‭4. Grid Layout‬

‭CSS Grid Layout is another powerful method for creating complex, two-dimensional layouts.‬

.container {‬
‭

display: grid;‬
‭

grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */‬


‭

gap: 20px; /* Adds space between grid items */‬


‭

}‬
‭

.item {‬
‭

background-color: lightgray;‬
‭

padding: 10px;‬
‭

}‬
‭

‭5. Example of Working with Block Elements‬


‭Here's an example where we style block elements within a layout using Flexbox:‬

‭<!DOCTYPE html>‬

‭<title>Block Elements and Flexbox</title>‬

‭<style>‬

‭.container {‬

‭display: flex;‬

‭justify-content: space-between;‬

‭gap: 10px;‬

‭}‬

‭.item {‬

‭width: 30%;‬

‭padding: 20px;‬

‭background-color: lightblue;‬

‭text-align: center;‬

‭box-sizing: border-box;‬

‭}‬

‭</style>‬

‭</head>‬

‭<body>‬

‭<div class="container">‬

‭<div class="item">Item 1</div>‬

‭<div class="item">Item 2</div>‬


‭<div class="item">Item 3</div>‬

‭</div>‬

‭</body>‬

‭</html>‬

‭6. Working with Objects‬

I‭ n CSS, objects can refer to elements such as images, videos, or other media. You can style these‬
‭objects similarly to block elements but need to take extra care for certain properties.‬

‭●‬ I‭ mages: Use‬‭display: block‬‭to remove inline behavior‬‭and ensure that images behave like‬
‭block elements.‬

‭img {‬

‭display: block;‬

‭width: 100%;‬

‭height: auto;‬

‭}‬

‭●‬ V
‭ ideos: Similarly, you might want to style video elements as block-level to control‬
‭their layout.‬

‭video {‬

‭display: block;‬

‭width: 100%;‬

‭}‬

You might also like