Scribd
Upload
4 views

Unit 2 CSS_PPT

This document provides an extensive overview of Cascading Style Sheets (CSS), detailing its syntax, insertion methods, and various properties for styling HTML elements. Key topics include the CSS box model, selectors (ID and class), color specifications, text formatting, and positioning techniques. Additionally, it covers responsive design basics and introduces Bootstrap for web development.

Uploaded by

ankit.kmp1408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Unit 2 CSS_PPT

This document provides an extensive overview of Cascading Style Sheets (CSS), detailing its syntax, insertion methods, and various properties for styling HTML elements. Key topics include the CSS box model, selectors (ID and class), color specifications, text formatting, and positioning techniques. Additionally, it covers responsive design basics and introduces Bootstrap for web development.

Uploaded by

ankit.kmp1408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 157

CASCADING STYLE SHEET

(CSS)
UNIT 2
Cascading Style Sheets:
1. Introduction; Cascading Style Sheets (CSS); 11. CSS Box Model
2. CSS Syntax 12. Normal Flow Box Layout: Basic Box Layout,
3. Inserting CSS: Inline, Internal, External, 13. Display Property
4. ID and Class Selectors 14. Padding
5. Colors; 15. Margin
6. Backgrounds 16. Positioning: Relative, Float, Absolute
7. Borders 17. CSS3 Borders
8. Text; 18. Box Shadows
9. Font 19. Text Effects and shadow
10. List 20. Basics of Responsive Web Designs
11. Table 21. Media Queries
22. Introduction to Bootstrap
Introduction: CSS
• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
• External stylesheets are stored in CSS files.
One HTML Page - Multiple Styles!
One HTML Page - Multiple Styles!
One HTML Page - Multiple Styles!
One HTML Page - Multiple Styles!
One HTML Page - Multiple Styles!
CSS Syntax
• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.
CSS Syntax
• Example: In this example all <p> elements will be center-aligned,
with a red text color:

• p is a selector in CSS (it points to


the HTML element you want to
style: <p>).
• color is a property, and red is the
property value
• text-align is a property, and center
is the property value
How To Add CSS
• When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
Three Ways to Insert CSS
1. Inline CSS
2. Internal CSS
3. External CSS
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page
External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
Example: External styles are defined within the <link> element, inside
the <head> section of an HTML page: • An external style sheet can be written in any text
editor, and must be saved with a .css extension.
• The external .css file should not contain any HTML
tags.
• Here is how the "mystyle.css" file looks:
External CSS
Cascading Order
• What style will be used when there is more than one style specified
for an HTML element?
• All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
• So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
CSS Selectors
• A CSS selector selects the HTML element(s) you want to style.
• CSS selectors are used to "find" (or select) the HTML elements you
want to style.
• CSS selectors are patterns used to specify which elements in a web
page to style.
• They are used to target specific HTML elements based on their
attributes, relationships, or other criteria.
ID and Class Selectors
• ID and Class selectors are the most widely used element
selectors in CSS (HTML).
• The basic difference between ID and Class is that the ID
selector is applied only to one element in a page, whereas
the class selector can be applied to several elements on a
single page.
ID Selectors
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is 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 hash (#) character,
followed by the id of the element.
ID Selectors
Example: The CSS rule below will be applied to the HTML element with
id="para1“.
ID and Class Selectors
Example of ID Selector
ID and Class Selectors
What is CLASS in HTML?
• In HTML, the "class" selector is used to select an element
with a specific class attribute.
• The class selector starts with a period (.) followed by a class
name. Unlike the id selector, we can attach multiple selector
to an HTML element. Therefore, the class can be applied
many time within a page.
• The important point to note about the class selector is that
the class name must not be started with a number.
ID and Class Selectors
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
ID and Class Selectors

Example of Class Selector


CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
Difference between ID and CLASS
The following are the important differences between Id and Class &minius;

Key Id Class
In HTML, for an element, the ID
"class" assigned to an element
name starts with the "#" symbol
Syntax has its name starts with "."
followed by a unique name
followed by class name.
assigned to it.
Only one ID selector can be Multiple class selectors can be
Selector
attached to an element. attached to an element.
The class can be applied to
ID is unique in a page and can only
Uniqueness multiple elements so it could be
apply to at most one element
multiple times on a single page.
Colors
Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
• CSS uses color values to specify a color.
• Typically, these are used to set a color either for the foreground of an
element (i.e. its text) or else for the background of the element.
• They can also be used to affect the color of borders and other
decorative effects.
Colors;
• CSS Color Names
In CSS, a color can be specified by using a predefined color name:
Colors;
Colors;
Named Colors: A CSS named color is the name of a color, such as red, blue,
black, or lightseagreen.
color: blue;
border: 1px solid red;
background: aliceblue;

RGB Hexadecimal Colors:


color: #f09;
border: 1px solid #ff0099;
background: #eee;
Colors;
Colors;
CSS Colors - Hexadecimal Codes
A hexadecimal is a 6 digit representation of a color. The first two
digits(RR) represent a red value, the next two are a green value(GG), and
the last are the blue value(BB).
Each hexadecimal code will be preceded by a pound or hash sign '#'.
Following are the examples of hexadecimal notation.
Backgrounds;
Backgrounds;
Backgrounds;
You can set the background color for HTML elements:
Backgrounds;
Backgrounds;
Backgrounds;
Borders;
• The border of an HTML element is simply one or more lines
that surround the content and padding of an element.
• Every border has three aspects: its width, or thickness; its
style, or appearance; and its color.
<html>
<body>
<h2>border-width with different values</h2>
<p style="border-style: double; border-width: thin;">Thin width.</p>
<p style="border-style: dashed; border-width: medium;">Medium width.</p>
<p style="border-style: solid; border-width: thick;">Thick width.</p>
<p style="border-style: dotted; border-width: 5px">Specific length width border.</p>
<p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width
border.</p>
</body>
</html>
Text;
• A text refers to a piece of written or printed information in
the form of words or characters that can be read and
understood. Texts can include content such as books,
articles, emails, messages, web pages, etc. Styling a text
involves modifying its appearance to make it more visually
appealing or to convey a particular message.
Text;
Text Formatting using CSS
CSS provides a number of properties to format text in beautiful way.
Following properties provided by CSS can be used to format the text:
Text Formatting using CSS
Font
Font
Font
Font
Font
Font
List;
• Lists are useful as they present the information in a
structured and organized manner. Lists improve the
readability and comprehension of content on a web page.
So, if the content is listed, it is easy to follow.

• Lists are commonly used to display items, steps, options, or


any other type of related information that should be
presented sequentially or in a group.
Unordered List Ordered List
Following is an example to show the usage of
setting up different CSS properties for a list.
Table
• A table is an HTML element used to display data in a
structured format with rows and columns. It is created using
the <table> tag in HTML and can be styled using CSS
properties.
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
Table: CSS Properties of a Table
CSS Box Model;
• In CSS, the term "box model" is used when talking about
design and layout.
• The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders,
padding, and the actual content. The image below illustrates
the box model:
CSS Box Model;
CSS Box Model;
CSS Box Model;
CSS Box Model;
CSS Box Model;
CSS Box Model;
CSS Box Model;

The total width of an element should be calculated like this:


Total element width = width + left padding + right
padding + left border + right border + left margin + right
margin

The total height of an element should be calculated like this:


Total element height = height + top padding + bottom
padding + top border + bottom border + top margin +
bottom margin
Display Property:
• The display property in CSS is used to specify how an
element should be displayed on the webpage. It controls the
layout and visibility of an element.
• The display property is useful in setting the inner and outer
display types of an element.
Display Property:
• Outside Values (<display-outside>):
Display Property:
• Inside Values (<display-inside>):
Padding:
• The CSS padding property is used to specify the space
between the content of an element and its borders.
• The value of CSS padding should be either a length, a
percentage, or the word inherit.
• A padding property does not allow negative values.
• If the value is inherit, it will have the same padding as its
parent element. If a percentage is used, the percentage is of
the containing box.
Padding:
• The CSS padding property is a shorthand property to set the
padding space around an HTML element.
• Let us see a simple example to set padding with a single
length value, which is applied equally to all four padding
sides. Here we add 5px padding on h2 element :
Padding:
CSS Padding vs No-padding
CSS Paddings - Single-side Properties
CSS Paddings - Single-side Properties
CSS Paddings - Shorthand Property
Margin;
• The CSS margin property is a shorthand property to set the
margin area around an HTML element.
CSS Margins - Single-Side Properties
• CSS provides four separate properties to set margins for left,
right, top and bottom for an element.
CSS Margins - Single-Side Properties
CSS Margins - Shorthand Property
Positioning:
• CSS property position helps manipulate position of an element in a
web page.
• The properties top, bottom, right, and left are used to control its
exact position on the page. They specify the offsets of an element
from its edges
• Property position can be used to create floating elements, floating
sidebar, and other interactive features. Following are the possible
values:
1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky
Positioning:
Positioning:
Positioning:
Positioning:
Positioning:
Positioning: Static
When you use the CSS position: static property, the element will be
positioned normally in the document flow. The left, right, top, bottom,
and z-index properties will not affect the element. This is the default
value.

Positioning: Relative
The CSS position: relative property positions the elements relative to
their original position in the page. You can use the left, right, top, and
bottom properties to move the element around, but it will still take up
space in the document flow.
Positioning: Fixed
To make an element stay in the same place on the screen even when the
user scrolls, you can set the position property to fixed. You can then use
the left, right, top, and bottom properties to position the element where
you want it.

Positioning: Absolute
An element with position: absolute is taken out of the document flow
and positioned relative to its nearest positioned ancestor (if any). If there
is no positioned ancestor, then the element is positioned relative to the
viewport.
You can use top, right, bottom, and left properties to specify the position
of the element relative to its containing block.
Positioning: Sticky
You can set the position property to sticky to create an element that
sticks to the top of the viewport when the user scrolls through a page.
The position: sticky property is a combination of the position: relative
and position: fixed properties

CSS Positioning Text In an Image


You can use the position: absolute property to position text in different
directions. The text elements are positioned at the top left, top right,
bottom left, and bottom right corners.
CSS Positioning Text In an Image
CSS3 Borders,
CSS Border Style
Box Shadows,
• Used to add shadow effects to elements, Following is the
example to add shadow effects to element.
Text Effects and shadow
1. Text-overflow
2. Word-wrap
3. Word-break
4. Writing-mode
CSS Text Overflow
• The CSS text-overflow property specifies how overflowed
content that is not displayed should be signaled to the user.

• The CSS code is as follows:


CSS Text Overflow
CSS Word Wrapping
The CSS word-wrap property allows long words to be able to be broken and wrap
onto the next line.
If a word is too long to fit within an area, it expands outside:
The word-wrap property allows
you to force the text to wrap -
even if it means splitting it in
the middle of a word:
CSS Word Wrapping
CSS Writing Mode
The CSS writing-mode property specifies whether lines of text are laid out horizontally or
vertically.
CSS Writing Mode

You might also like