Scribd
Upload
4 views23 pages

Introduction To Css

This document provides an introduction to CSS, covering lists in HTML, the use of the <div> tag, and navbar design. It explains different types of CSS, including embedded, inline, and external CSS, as well as CSS selectors and their types. Additionally, it discusses web page responsiveness, media queries, and the viewport meta tag for optimizing web pages across various devices.

Uploaded by

snehasunilkumar.9d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views23 pages

Introduction To Css

This document provides an introduction to CSS, covering lists in HTML, the use of the <div> tag, and navbar design. It explains different types of CSS, including embedded, inline, and external CSS, as well as CSS selectors and their types. Additionally, it discusses web page responsiveness, media queries, and the viewport meta tag for optimizing web pages across various devices.

Uploaded by

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

INTRODUCTION TO CSS

1.3 Lists, DIV Tag, NAVBAR Design, Introduction, Type of CSS,


Selectors in CSS, Web Page Responsiveness
Lists in HTML

● HTML offers three ways for specifying lists of information. All lists must contain one
or more list elements.
● Lists may contain the following types:
● <ul> : Unordered list. List items will be in plain bullets.
● <ol>: Ordered list. List items will be use different schemes of numbers.
● <dl>: Definition list. Arranged in the same way as they are arranged in a dictionary.
Unordered list

● An unordered list is a collection of related items that have no special order or sequence.
● List is created using <ul> tag.
● Each item in a list is marked with a bullet.
● By default, it is a disc.
● <li> tag is used for displaying an item.
● Possible options: <ul type=”square”>
● <ul type=”disc”>
● <ul type=”circle”>
<html>
<head>
<title> HTML Unordered List </title>
</head>
<body>
<ul type=”square”>
<li> Apple </li>
<li> Orange </li>
<li> Grapes </li>
<li> Pear </li>
</ul>
</body>
</html>
Ordered List

● If it is required to put our items in a numbered list instead of bulleted, then HTML ordered list
will be used.
● Created using <ol> tag.
● Use <ol> tag to specify the type of numbering we like.
● By default, it is a number.
● Possible options: <ol type=”1”>
● <ol type=”I”>
● <ol type=”i”>
● <ol type=”A”>
● <ol type=”a”>
<html>
<head>
<title> HTML Ordered List </title>
</head>
<body>
<ol type=”1”>
<li> Apple </li>
<li> Orange </li>
<li> Grapes </li>
<li> Pear </li>
</ol>
</body>
</html>
Definition lists

● HTML supports definition list where entries are listed like in a dictionary or encyclopedia .
● Ideal way to present a glossary or a list of terms.
● <dl>: Defines the start of a list.
● <dt>: A term
● <dd>: Term definition
● </dl>: Defines the end of the list.
<html>
<head>
<title> HTML Definition List </title>
</head>
<body>
<dl>
<dt><b>HTML</b> </dt>
<dd>stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b> </dt>
<dd>stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
INTRODUCTION TO DIV TAG

● <div> tag (division) is a block-level container.


● Widely used for grouping and organizing content
● Organizes related elements, creating logical groupings.
● Each <div> starts on a new line and separates content into distinct sections.
● https://onlinegdb.com/z3flKgrRS
NAVBAR Design

● A navigation bar (or navbar) is a user interface element that helps users navigate through
different sections or pages of a website.
● The navigation links will be displayed in a vertical list.
● Refer program for more..
INTRODUCTION TO CSS
● CSS : Cascading Style Sheets
● CSS is used to control the style of a web document in a simple and easy way.
● Handles the look and feel part of a webpage.
● Using CSS, we can control the color of the text, style of fonts, space between paragraphs,
how columns are sized and laid out etc.
● Advantages:
● Saves time
● Load pages faster
● Easy maintenance
● Superior styles to HTML
● Multiple Device Compatibility
● Offline Browsing
Syntax of CSS

● Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like
<h1>,<p> etc.
● Property: A property is a type of attribute of HTML tags. Attributes of HTML are CSS Properties
here. They could be color, border etc.
● Value: Values are assigned to properties. For example, color property can have value either red
or #F1F1F1 etxc.
● We can put style rule syntax as follows:

Selector {property: value}

● Eg: table {border: 1px;


● color:red;}
<html>
<head>
<style>
p{ text-align: center;
color: red;
}
</style>
</head>
<body>
<p> Every paragraph will be affected by the style. </p>
<p> And me!!</p>
</body>
</html>
TYPES OF CSS

● There are three ways to associate styles with our HTML document. They are given below:
● Embedded CSS: The <style> element
● Inline CSS: The style attribute
● External CSS: The <link> element
EMBEDDED CSS

● We can put our CSS rules into an HTML document using the <style> element.
● This tag is placed include <head> … </head> tags.
● Rules defined using this syntax will be applied to all the elements available in the document.
● https://onlinegdb.com/erOhVhKHM
INLINE CSS

● We use style attribute of any HTML element ot define style rules.


● These rules will be applied to that element only.
● The general syntax is:
● <element style = “....style rules….”>
● The value of style attribute is a combination of style declarations separated by ;
● https://onlinegdb.com/J60jHz1KY
EXTERNAL CSS

● External CSS is a style sheet that is stored in a separate .css file from the HTML document.
● It is linked to the HTML document using the <link> tag within the <head> section.
● <link rel="stylesheet" href="styles.css">
● The .css file is typically saved with a .css extension and can be placed in the same folder or a
subdirectory.
● The link of css file is given inside HTML document. The HTML dcc is run for receiving the
output.
CSS SELECTORS

● CSS selectors are patterns used to identify and target specific HTML elements to apply styles.
They define which elements a set of CSS rules will affect, enabling precise styling and
customization of web pages.
● Selectors help apply styles without modifying HTML structure, keeping content and design
separate.
● Styles can be defined once and applied to multiple elements, improving maintainability.
● Well-structured selectors make stylesheets easier to read and manage.
TYPES OF CSS SELECTORS
1. Element Selector: selects elements based on the element name.
2. ID Selector: The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element should be unique within a page, so the id selector is used to
select one unique element. To select an element with a specific id, write a # character,
followed by the id of the element. The id cannot start with a number.
3. Class selector: selects element with a specific class attribute. To select elements with a
specific class, write a . character, followed by the name of the class.
4. Universal selector: Rather thean selecting elements of a specific type, the universal
selector quite simply matches the name of any element type.
5. Descendant selector: Suppose we want to apply a style rule to a particular element only
when it lies inside a particular element, we use descendant selector.
6. Grouping selectors: If you have elements with the same style definitions, it will be better
to group the selector, to minimize the code. To group selectors, separate each selector with
a comma. https://onlinegdb.com/EykeLlUsG
WEB PAGE RESPONSIVENESS

● Responsiveness of a web page refers to its ability to adapt and provide an optimal viewing
experience across a wide range of devices and screen sizes, including desktops, tablets, and
mobile phones.
● A responsive web page automatically adjusts its layout, content and design elements to fit the
screen resolution and user environment, ensuring usability and accessibility.
● Benefits:
● Improve user experience
● Increased accessibility
● SEO Advantages
● Cost-efficient maintenance
KEY ASPECTS

● Flexible Layouts: Usage of em or rem instead of px.


● Responsive Images: Images that scale appropriately with the container or screen size. It uses
properties like max width.
● Media Queries
● Viewport Meta Tag
MEDIA QUERIES

● Media queries in CSS allow you to apply different styles depending on the screen size,
resolution, or device type.
● They help make a webpage responsive by adjusting its layout for different screens, such as
desktops, tablets, and mobile phones.

A media query consists of:

1. @media keyword
2. A condition (e.g., max-width: 768px)
3. CSS rules that apply if the condition is true
VIEWPORT META TAG

● The viewport meta tag is an important HTML tag used to control how a webpage is displayed
on mobile and tablet devices. Without this tag, web pages may not scale properly on different
screen sizes.
● You add it inside the <head> section of your HTML file.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

● width=device-width: Sets the viewport width to match the device’s screen width.
● initial-scale=1.0: Sets the zoom level to 100% (prevents the page from being zoomed out by
default).
● user-scalable=”no": Prevents the user from zooming in or out.
● maximum-scale=1.5, minimum-scale=0.8 : Limits how much users can zoom in (1.5x) or out
(0.8x).

You might also like