HTML-Unit 4 css introduction hi my name is css and i am from html - CSS.pdf

Unit 4 - CSS
Introduction, syntax, Colors, Backgrounds,
borders, margins, paddings, , height, width, box
model, outline, text, fonts, icons, links, lists,
tables, Display, max, width, position, overflow,
float, inline, block, align, combinators, pseudo,

• Cascading Style Sheets, fondly referred to as CSS, is a
simple design language intended to simplify the
process of making web pages presentable.
• CSS handles the look and feel part of a web page. Using
CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or
colors are used, as well as a variety of other effects.
• CSS is easy to learn and understand but it provides a
powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

• Advantages of CSS
• CSS saves time - You can write CSS once and then reuse the same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
• Easy maintenance - To make a global change, simply change the style, and
all the elements in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such
as PDAs and cellphones or for printing.
• Global web standards – Now HTML attributes are being deprecated and it
is being recommended to use CSS. So it’s a good idea to start using CSS in
all the HTML pages to make them compatible with future browsers.

• CSS ─ SYNTAX
• A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in your
document. A style rule is made of three parts:
• Selector: A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS
properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color
property can have the value either red or #F1F1F1 etc.
• CSS Style Rule Syntax is as follows:
– selector { property: value }
• Example: You can define a table border as follows:
– table{ border :1px solid #C00; }

• The Type Selectors
• This is the same selector we have seen above.
Again, one more example to give a color to all
level 1 headings −
• h1 { color: #36CFFF; }
• The Universal Selectors
• Rather than selecting elements of a specific type,
the universal selector quite simply matches the
name of any element type
• The universal selector (*) selects all HTML
elements on the page.
• * { color: #000000; }

• Example of Universal Selector
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

• The Class Selectors
• Here we style rules can e defined based on the
class attribute of the elements. All the elements
having that class will be formatted according to
the defined rule.
.black { color: #000000; }
• The ID Selectors
• Here style rules are defined based on the id
attribute of the elements. All the elements having
that id will be formatted according to the defined
rule.
#black { color: #000000; }

• Grouping Selectors
• we can apply a style to many selectors at one time by
just separating the selectors with a comma, as given in
the following example:
h1, h2, p {
text-align: center;
color: red;
}
• The Attribute Selectors
• To apply styles to HTML elements with particular
attributes. The style rule below will match all the input
elements having a type attribute with a value of text:
input[type="text"]{
color: #000000;
}
• The advantage to this method is that the <input
type="submit" /> element is unaffected, and the color
applied only to the desired text fields.

• Example of Grouping selectors
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>this is heading 2!</h2>
<p>This is a paragraph.</p>
</body>
</html>

<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
color: #000000;
background-color: pink;
}
input[type=button] {
width: 120px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
<br>
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<br> <br>
<input type="button" value="Example Button">
</form>
</body>
</html>

Assignment-9
• Set the color of all <p> elements to red.
• Write example code for class and id selectors.

CSS Colors
• Colors are specified using
predefined color names,
or RGB, HEX, HSL, RGBA,
HSLA values.
• In CSS, a color can be
specified by using a
predefined color name:
• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray

<html>
<body>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

CSS Backgrounds
• CSS background-color
• The background-color property specifies the background color of an
element.
• Example
h1 {
background-color: green;
}
• Opacity / Transparency
• The opacity property specifies the opacity/transparency of an
element. It can take a value from 0.0 - 1.0. The lower value, the
more transparent:
H1 {
opacity: 0.6;
}

• CSS background-image
• The background-image property specifies an
image to use as the background of an element.
• By default, the image is repeated so it covers the
entire element.
• Example
• Set the background image for a page:
body {
background-image: url(“image1.jpg");
}
p {
background-image: url(" image1.jpg ");
}

• Example of Background Image:
<html>
<head>
<style>
p {
background-image: url(“imag1.gif");
}
</style>
</head>
<body>
<p>This paragraph has an image as the background!</p>
</body>
</html>

• CSS background-repeat
• By default, the background-image property repeats an
image both horizontally and vertically.
• Some images should be repeated only horizontally or
vertically, or they will look strange, like this:
• CSS background-position
• The background-position property is used to specify the
position of the background image.
• Example
• Position the background image in the top-right corner:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: repeat-x;
background-position: right top;
}
</style>
</head>
<body>
<p>Here, the background image is only shown once. In addition it is positioned
away from the text.</p>
</body>
</html>

Assignment-10
• Write example code for following:
– Apply background-color to heading.
– Apply background-image with no-repeat in
paragraph.
– Set position of background- image as top-right in
paragraph

CSS Borders
• The CSS border properties allows to specify the style, width, and color of an
element's border.
• CSS Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed:
– dotted - Defines a dotted border
– dashed - Defines a dashed border
– solid - Defines a solid border
– double - Defines a double border
– groove - Defines a 3D grooved border. The effect depends on the border-color
value
– ridge - Defines a 3D ridged border. The effect depends on the border-color
value
– inset - Defines a 3D inset border. The effect depends on the border-color value
– outset - Defines a 3D outset border. The effect depends on the border-color
value
– none - Defines no border
– hidden - Defines a hidden border

<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>

• CSS Border Width
• The border-width property specifies the width of
the four borders.
• The width can be set as a specific size (in px, pt,
cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
• The border-width property can have from one to
four values (for the top border, right border,
bottom border, and the left border):
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right,
4px bottom and 35px left */
}

• The border-color property is used to set the
color of the four borders.
• The border-color property can have from one
to four values (for the top border, right border,
bottom border, and the left border).
• we can also specify all the individual border
properties for just one side:
p {
border-left: 6px solid red;
}

If the border-style property has four values:
•border-style: dotted solid double dashed;
•top border is dotted
•right border is solid
•bottom border is double
•left border is dashed
If the border-style property has three values:
•border-style: dotted solid double;
•top border is dotted
•right and left borders are solid
•bottom border is double
If the border-style property has two values:
•border-style: dotted solid;
•top and bottom borders are dotted
•right and left borders are solid
If the border-style property has one value:
•border-style: dotted;
•all four borders are dotted

<html>
<head>
<style>
p.four {
border-style: dotted solid double dashed; }
p.three {
border-style: dotted solid double; }
p.two {
border-style: dotted solid; }
p.one {
border-style: dotted; }
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>
</body>
</html>

• CSS Rounded Borders
• The border-radius property is used to add
rounded borders to an element:
p {
border: 2px solid red;
border-radius: 5px;
}

The CSS Box Model
• 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:

• Content - The content of the box, where text and images
appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The margin is
transparent
• The box model allows us to add a border around
elements, and to define space between elements.

CSS Margins
• Margins are used to create space around elements, outside of
any defined borders.
• CSS has properties for specifying the margin for each side of an
element:
– margin-top
– margin-right
– margin-bottom
– margin-left
• All the margin properties can have the following values:
– auto - the browser calculates the margin
– length - specifies a margin in px, pt, cm, etc.
– % - specifies a margin in % of the width of the containing element
– inherit - specifies that the margin should be inherited from the parent
element

• To shorten the code, it is possible to specify all
the margin properties in one property.
p {
margin: 25px 50px 75px 100px;
}
• The auto Value
• the margin property is set to auto to
horizontally center the element within its
container.

<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin
properties</h2>
<div> The CSS margin properties are used
to create space around elements, outside
of any defined borders.
With CSS, you have full control over the
margins. There are properties for setting
the margin for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>

CSS Padding
• Padding is used to create space around an element's
content, inside of any defined borders.
• CSS has properties for specifying the padding for each side
of an element:
– padding-top
– padding-right
– padding-bottom
– padding-left
• All the padding properties can have the following values:
– length - specifies a padding in px, pt, cm, etc.
– % - specifies a padding in % of the width of the containing
element
– inherit - specifies that the padding should be inherited from the
parent element

• To shorten the code, it is possible to specify all the
padding properties in one property as top, right, bottom,
left.
• padding: 25px 50px 75px 100px;
• if an element has a specified width, the padding added to
that element will be added to the total width of the
element.
• To keep the width same the box-sizing property is used.
• This causes the element to maintain its actual width; if
you increase the padding, the available content space
will decrease.

<html>
<head>
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding
properties</h2>
<div>This div element has a top
padding of 50px, a right padding of
30px, a bottom padding of 50px,
and a left padding of 80px.</div>
</body>
</html>

• Example of box-sizing property:
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
}
div.ex3 {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
</style> </head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px,
even though it is defined as 300px in the
CSS.</div>
<br>
<div class="ex3">The width of this div remains
at 300px, in spite of the 50px of total left and
right padding, because of the box-sizing:
border-box property.
</div>
</body>
</html>

Assignment-11
• Write code for applying:
– Margins
– Padding
– Add border to paragraph and heading

Height, Width
• The CSS height and width properties are used to set the
height and width of an element.
• The CSS max-width property is used to set the maximum
width of an element.
• The height and width properties may have the following
values:
– auto - This is default. The browser calculates the height and
width
– length - Defines the height/width in px, cm, etc.
– % - Defines the height/width in percent of the containing block
– initial - Sets the height/width to its default value
– inherit - The height/width will be inherited from its parent value

• Example:
• div {
height: 200px;
width: 50%;
background-color: blue;
}
• The max-width can be specified in length values, like px, cm,
etc., or in percent (%) of the containing block, or set to none
(this is default. Means that there is no maximum width).
• Example:
• div {
max-width: 500px;
height: 100px;
background-color: blue;
}

CSS Outline
• An outline is a line that is drawn around
elements, OUTSIDE the borders, to make the
element "stand out".

• CSS has the
following outline
properties:
– outline-style
– outline-color
– outline-width
– outline-offset
– outline
The outline-style property specifies the
style of the outline, and can have one of
the following values:
•dotted - Defines a dotted outline
•dashed - Defines a dashed outline
•solid - Defines a solid outline
•double - Defines a double outline
•groove - Defines a 3D grooved outline
•ridge - Defines a 3D ridged outline
•inset - Defines a 3D inset outline
•outset - Defines a 3D outset outline
•none - Defines no outline
•hidden - Defines a hidden outline

<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;
border: 6px solid black;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
</body>
</html>

• The outline-width property specifies the width of
the outline, and can have one of the following
values:
– thin (typically 1px)
– medium (typically 3px)
– thick (typically 5px)
– A specific size (in px, pt, cm, em, etc)
• Example:
p {
outline-style: solid;
outline-color: red;
outline-width: thin;
}

• The outline-offset property adds space between an outline
and the edge/border of an element.
• The space between an element and its outline is transparent.
<html>
<head>
<style>
p {
margin: 30px;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline 15px outside
the border edge.</p>
</body>
</html>

TEXT FORMATTING
• The color property is used to set the color of the text.
• The text-align property is used to set the horizontal
alignment of a text.
– A text can be left or right aligned, centered, or justified.
• The text-align-last property specifies how to align the
last line of a text.
• The direction and unicode-bidi properties can be used
to change the text direction of an element
• The vertical-align property sets the vertical alignment
of an element.

<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>

Property Description
text-decoration
Sets all the text-decoration properties in one
declaration
text-decoration-color Specifies the color of the text-decoration
text-decoration-line
Specifies the kind of text decoration to be
used (underline, overline, etc.)
text-decoration-style
Specifies the style of the text decoration
(solid, dotted, etc.)
text-decoration-thickness
Specifies the thickness of the text decoration
line
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
p {
text-decoration: underline red double 5px;
}

• The text-transform property is used to specify
uppercase and t lowercase letters in a text.
– It can be used o turn everything into uppercase or
lowercase letters, or capitalize the first letter of each word:
• The text-indent property is used to specify the
indentation of the first line of a text:
• The letter-spacing property is used to specify the space
between the characters in a text.
• The line-height property is used to specify the space
between lines:
• The word-spacing property is used to specify the space
between the words in a text.
• The white-space property specifies how white-space
inside an element is handled.

Property Description
letter-spacing
Specifies the space between characters in
a text
line-height Specifies the line height
text-indent
Specifies the indentation of the first line
in a text-block
white-space
Specifies how to handle white-space
inside an element
word-spacing
Specifies the space between words in a
text
p {
text-transform: uppercase;
text-indent: 50px;
letter-spacing: 5px;
line-height: 0.8;
word-spacing: 10px;
white-space: wrap;
}

• The text-shadow property adds shadow to
text.
• We can only specify the horizontal shadow
(2px) and the vertical shadow (2px):
• Example:
h1 {
text-shadow: 2px 2px red;
}

Assignment-12
• Explain text-formatting in CSS with example
code for:
– Text-color and alignment
– Text-formatting and spacing

Fonts, Icons, Lists, Tables, Display, Position, Overflow, Float, Inline, Block, Align,
Combinators, Pseudo Class, Pseudo Elements, Opacity, Navigation Bar,
Dropdowns, Image Gallery, Image Sprites, Attr Seletors, Forms, Counters, Website
Layout, Units, Specificity.
CSS-2

fonts
• In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each
letter. They create a sense of formality and elegance.
• Sans-serif fonts have clean lines (no small strokes
attached). They create a modern and minimalistic look.
• Monospace fonts - here all the letters have the same
fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.

• In CSS, we use the font-family property to specify the font of a text.
• Example:
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman"; }
.p2 {
font-family: Arial; }
.p3 {
font-family: "Courier New";}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Courier New font.</p>
</body>
</html>

• The font-style property is mostly used to specify italic
text.
• This property has three values:
– normal - The text is shown normally
– italic - The text is shown in italics
– oblique - The text is "leaning" (oblique is very similar to
italic, but less supported)
• The font-weight property specifies the weight of a font:
– Normal, lighter, bold, specific value in px.
• The font-variant property specifies whether or not a
text should be displayed in a small-caps font.
– In a small-caps font, all lowercase letters are converted to
uppercase letters. However, the converted uppercase
letters appears in a smaller font size than the original
uppercase letters in the text.

• The font-size property sets the size of the text.
The font-size value can be an absolute, or relative
size.
• Absolute size:
– Sets the text to a specified size
– Does not allow a user to change the text size in all
browsers (bad for accessibility reasons)
– Absolute size is useful when the physical size of
the output is known
• Relative size:
– Sets the size relative to surrounding elements
– Allows a user to change the text size in browsers

<html>
<head>
<style>
p.normal {
font-variant: normal;
font-style: italic;
font-weight: bold;
font-size: 25px;
}
p.small {
font-variant: small-caps;
font-style: oblique;
}
</style>
</head>
<body>
<h2>example for font-style,weight and variant</h2>
<p class="normal">this is an example.</p>
<p class="small">this is another example.</p>
</body>
</html>

CSS Links
• With CSS, links can be styled in many different
ways.
• links can be styled differently depending on what
state they are in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
– a:hover MUST come after a:link and a:visited
– a:active MUST come after a:hover

• The text-decoration property is mostly used to
remove underlines from links:
• The background-color property can be used to
specify a background color for links:

<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
color: white;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<a href=“https://www.google.com”
target="_blank">This is a link</a>
</body>
</html>

Assignment-13
• Write code to create different style on links
using html and CSS.

CSS Lists
• The CSS list properties allows to:
– Set different list item markers for ordered lists
– Set different list item markers for unordered lists
– Set an image as the list item marker
– Add background colors to lists and list items
• The list-style-type property specifies the type of list item marker –
circle, square, roman, alphabets, upper or lower case
• The list-style-image property specifies an image as the list item
marker:
• The list-style-position property specifies the position of the list-item
markers (bullet points) – specifies whether the list-item markers
should appear inside or outside the content flow

<html>
<head>
<style>
ul.a {
list-style-type: circle;
list-style-position: outside; }
ul.b {
list-style-image: url('image1.jpg');
list-style-position: inside; }
ol.c {
list-style-type: lower-alpha;}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>india</li>
<li>uk</li>
<li>us</li>
</ul>
<ul class="b">
<li>india</li>
<li>uk</li>
<li>us</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>new delhi</li>
<li>london</li>
<li>washington DC</li>
</ol>
</body>
</html>

• The list-style property is a shorthand property. It is used to set
all the list properties in one declaration:
• Example:
• ul {
list-style: square inside url("sqpurple.gif");
}
Output of previous example code

CSS Tables
• Table borders
– To specify table borders in CSS, use the border
property.
• table, th, td {
border: 1px solid;
}
– The border-collapse property sets whether the table
borders should be collapsed into a single border:
• table {
border-collapse: collapse;
}

• Table Size
– The width and height of a table are defined by the
width and height properties.
table {
width: 100%;
height: 400px;
}
th {
height: 70px;
}

• Table Alignment
– The text-align property sets the horizontal alignment (like left,
right, or center) of the content in <th> or <td>.
– By default, the content of <th> elements are center-aligned and the
content of <td> elements are left-aligned.
– The vertical-align property sets the vertical alignment (like top,
bottom, or middle) of the content in <th> or <td>.
– By default, the vertical alignment of the content in a table is middle
(for both <th> and <td> elements).
– td {
height: 50px;
vertical-align: bottom;
text-align: center;
}
– Use the :hover selector on <tr> to highlight table rows on
mouse over:
tr:hover {background-color: coral;}

• Example::
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid red;
}
tr:hover {background-color: coral;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
</table>
</body>
</html>

Assignment-14
• Create a table for student data using HTML
and CSS.
– Add borders
– Add mouse hover for rows.

CSS layout-Display
• The display property specifies if/how an
element is displayed.
• Every HTML element has a default display
value depending on what type of element it is.
The default display value for most elements is
block or inline.

• Block-level Elements
• A block-level element always starts on a new line
and takes up the full width available (stretches
out to the left and right as far as it can).
• The <div> element is a block-level element.
• Examples of block-level elements:
– <div>
– <h1> - <h6>
– <p>
– <form>
– <header>
– <footer>
– <section>

<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<h1>eample of block elements</h1>
<span>A display property with</span> <span>a value of "block"
results in</span> <span>a line break between each span
elements.</span>
</body>
</html>

• Inline Elements
• An inline element does not start on a new line and only
takes up as much width as necessary.
• This is an inline <span> element inside a paragraph.
• Examples of inline elements:
– <span>
– <a>
– <img>
• Display: none;
• display: none; is commonly used with JavaScript to
hide and show elements without deleting and
recreating them.
• The <script> element uses display: none; as default.

<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>

<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not
take up any space.</p>
</body>
</html>

CSS-Position
• The position property specifies the type of
positioning method used for an element
(static, relative, fixed, absolute or sticky).
• There are five different position values:
– static
– relative
– fixed
– absolute
– sticky

• position: static;
• HTML elements are positioned static by
default.
• Static positioned elements are not affected by
the top, bottom, left, and right properties.
• An element with position: static; is not
positioned in any special way; it is always
positioned according to the normal flow of the
page:
div.static {
position: static;
}

• position: relative;
• An element with position: relative; is positioned
relative to its normal position.
• Setting the top, right, bottom, and left properties
of a relatively-positioned element will cause it to
be adjusted away from its normal position.
• Other content will not be adjusted to fit into any
gap left by the element.
• Example
div.relative {
position: relative;
left: 30px;
}

• position: fixed;
• An element with position: fixed; is positioned relative
to the viewport, which means it always stays in the
same place even if the page is scrolled.
• The top, right, bottom, and left properties are used to
position the element.
• A fixed element does not leave a gap in the page where
it would normally have been located.
• Example
• div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}

• position: absolute;
• An element with position: absolute; is positioned
relative to the nearest positioned ancestor
(instead of positioned relative to the viewport,
like fixed).
• However; if an absolute positioned element has
no positioned ancestors, it uses the document
body, and moves along with page scrolling.
• div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}

• position: sticky;
• An element with position: sticky; is positioned
based on the user's scroll position.
• A sticky element toggles between relative and
fixed, depending on the scroll position.
• It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in
place (like position:fixed).
• div.sticky {
position: sticky;
top: 0;
}

<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is
positioned relative to the nearest positioned
ancestor (instead of positioned relative to the
viewport, like fixed):</p>
<div class="relative">This div element has
position: relative;
<div class="absolute">This div element has
position: absolute;</div>
</div>
</body>
</html>

CSS Overflow
• The overflow property specifies whether to clip
the content or to add scrollbars when the content
of an element is too big to fit in the specified
area.
• The overflow property has the following values:
– visible - Default. The overflow is not clipped. The
content renders outside the element's box
– hidden - The overflow is clipped, and the rest of the
content will be invisible
– scroll - The overflow is clipped, and a scrollbar is
added to see the rest of the content
– auto - Similar to scroll, but it adds scrollbars only
when necessary

• overflow: visible
• By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:
– div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
• overflow: hidden
• With the hidden value, the overflow is clipped, and the rest
of the content is hidden:
• The overflow property specifies what happens if content
overflows an element's box.
• Example
• div {
overflow: hidden;
}

• overflow: scroll
• Setting the value to scroll, the overflow is clipped
and a scrollbar is added to scroll inside the box.
• this will add a scrollbar both horizontally and
vertically.
– div {
overflow: scroll;
}
• overflow: auto
• The auto value is similar to scroll, but it adds
scrollbars only when necessary:
– div {
overflow: auto;
}

CSS Layout - float
• The float property is used for positioning and
formatting content e.g. let an image float left to the
text in a container.
• The float property can have one of the following
values:
– left - The element floats to the left of its container
– right - The element floats to the right of its container
– none - The element does not float (will be displayed just
where it occurs in the text). This is default
– inherit - The element inherits the float value of its parent
• In its simplest use, the float property can be used to
wrap text around images.

• Example:
– img {
float: right;
}
– img {
float: left;
}
– img {
float: none;
}

<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h2>Float None</h2>
<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus.
Mauris quis diam velit.</p>
</body>
</html>

display: inline-block
• Compared to display: inline, the major difference is
that display: inline-block allows to set a width and
height on the element.
• Also, with display: inline-block, the top and bottom
margins/paddings are respected, but with display:
inline they are not.
• Compared to display: block, the major difference is
that display: inline-block does not add a line-break
after the element, so the element can sit next to other
elements.

• span.b {
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
}

<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
}
span.b {
}
span.c {
display: block;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<span class="a">Aliquam</span> <br>
<span class="a">venenatis</span>
<h2>display: inline-block</h2>
<span class="b">Aliquam</span> <br><span
class="b">venenatis</span>
<h2>display: block</h2>
<span class="c">Aliquam</span> <span
class="c">venenatis</span>
</body>
</html>

Css-align
• Center Align Elements
• To horizontally center a block element
• The element will then take up the specified
width, and the remaining space will be split
equally between the two margins:
– .center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

CSS Combinators
• A CSS selector can contain more than one
simple selector. Between the simple selectors,
we can include a combinator.
• There are four different combinators in CSS:
– descendant selector (space)
– child selector (>)
– adjacent sibling selector (+)
– general sibling selector (~)

• Descendant Selector
• The descendant selector matches all elements that are
descendants of a specified element.
• The following example selects all <p> elements inside <div>
elements:
• Example
– div p {
}
• Child Selector (>)
• The child selector selects all elements that are the children
of a specified element.
• The following example selects all <p> elements that are
children of a <div> element:
• Example
– div > p {
}

• Adjacent Sibling Selector (+)
• The adjacent sibling selector is used to select an
element that is directly after another specific element.
• Sibling elements must have the same parent element,
and "adjacent" means "immediately following".
• The following example selects the first <p> element
that are placed immediately after <div> elements:
• Example
• div + p {
}

• General Sibling Selector (~)
• The general sibling selector selects all
elements that are next siblings of a specified
element.
• The following example selects all <p>
elements that are next siblings of <div>
elements:
• Example
• div ~ p {
}

Pseudo class
• A pseudo-class is used to define a special state of
an element.
• For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• The syntax of pseudo-classes:
• selector:pseudo-class {
property: value;
}

Pseudo element
• A CSS pseudo-element is used to style specified parts
of an element.
• For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an
element
• Syntax
• The syntax of pseudo-elements:
• selector::pseudo-element {
property: value;
}

• The ::first-line pseudo-element is used to add a special style
to the first line of a text.
• The following example formats the first line of the text in all
<p> elements:
– Example
– p::first-line {
color: #ff0000;
font-variant: small-caps;
}
• The ::first-letter pseudo-element is used to add a special
style to the first letter of a text.
• The following example formats the first letter of the text in
all <p> elements:
– Example
– p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Opacity
• The opacity property specifies the
opacity/transparency of an element.
• The opacity property can take a value from 0.0
- 1.0. The lower the value, the more
transparent:
• Example
• div {
opacity: 0.3;
}

CSS Navigation Bar
• Having easy-to-use navigation is important for any web site.
• With CSS we can transform boring HTML menus into good-
looking navigation bars.
• Navigation Bar defines the List of Links
• A navigation bar needs standard HTML as a base.
• In our examples we will build the navigation bar from a
standard HTML list.
• A navigation bar is basically a list of links, so using the <ul>
and <li> elements makes perfect sense:
– <ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

• Vertical Navigation Bar
• To build a vertical navigation bar, we can style
the <a> elements inside the list, in addition to
the code from the previous page:
• Example
• li a {
display: block;
width: 60px;
}

<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to
show the link area.</p>
<p>Notice that the whole link area is clickable,
not just the text.</p>
</body>
</html>

CSS Dropdowns
• Dropdowns are one of the most important parts of an
interactive website.CSS is used to design the drop-
down menus.
• A drop-down is a bunch of lists under an unordered list
i.e. <ul> as it is popularly known in HTML world.
• Nested list (<li>) tags under the <ul> tag used to create
drop-down structure. To bring out the effects use CSS
for the components present in the structure.
• The CSS is very straightforward property used to create
the drop-down menu.

<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333; }
li {
float: left;}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
rgba(0,0,0,0.2);
z-index: 1;}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color:
#f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)"
class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation
Bar</h3>
<p>Hover over the "Dropdown" link to see the
dropdown menu.</p>
</body>
</html>

CSS Icons
• Icons can easily be added to your HTML page, by
using an icon library.
• The simplest way to add an icon to your HTML
page, is with an icon library, such as Font
Awesome.
• Add the name of the specified icon class to any
inline HTML element
• All the icons in the icon libraries below, are
scalable vectors that can be customized with CSS
(size, color, shadow, etc.)

<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size, color, and shadow):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px
black;">cloud</i>
</body>
</html>

CSS Image Gallery
• CSS can be used to create an image gallery.

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px; }
div.gallery:hover {
border: 1px solid #777; }
div.gallery img {
width: 100%;
height: auto;}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600"
height="400">
</a>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
</div>
</body>
</html>

Assignment-15
• Create Image Gallery with HTML and CSS.

CSS Image Sprites
• An image sprite is a collection of images put into a single
image.
• A web page with many images can take a long time to load
and generates multiple server requests.
• Using image sprites will reduce the number of server requests
and save bandwidth.

<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0; }
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0; }
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>

CSS Attribute Selectors
• The [attribute] selector is used to select
elements with a specified attribute.
• The following example selects all <a>
elements with a target attribute:
• Example
• a[target] {
}

• <html>
• <head>
• <style>
• a[target=_blank] {
• background-color: yellow;
• }
• </style>
• </head>
• <body>
• <h2>CSS [attribute="value"] Selector</h2>
• <p>The link with target="_blank" gets a yellow background:</p>
• <a href="https://www.google.com">Google</a>
• <a href="http://www.disney.com" target="_blank">disney.com</a>
• <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
• </body>
• </html>

CSS Forms
• CSS form is used to create interactive form for user. It
provides different ways to style the form

<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
padding: 20px; }
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname“
placeholder="Your name">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname"
placeholder="last name">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option></select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

Assignment-16
• Create a registration form with HTML and
CSS.

CSS Counters
• CSS counters are "variables" maintained by CSS whose values can
be incremented by CSS rules (to track how many times they are
used). Counters let you adjust the appearance of content based on
its placement in the document.
• Automatic Numbering With Counters
• CSS counters are like "variables". The variable values can be
incremented by CSS rules (which will track how many times they
are used).
• To work with CSS counters we will use the following properties:
– counter-reset - Creates or resets a counter
– counter-increment - Increments a counter value
– content - Inserts generated content
– counter() or counters() function - Adds the value of a counter to an
element
• To use a CSS counter, it must first be created with counter-reset.

<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>

Website Layout
• A website is often divided into headers, menus, content and a footer:
• Header
• A header is usually located at the top of the website (or right below a top
navigation menu). It often contains a logo or the website name:
• Navigation Bar
• A navigation bar contains a list of links to help visitors navigating through
your website:
• Content
• The layout in this section, often depends on the target users. The most
common layout is one (or combining them) of the following:
– 1-column (often used for mobile browsers)
– 2-column (often used for tablets and laptops)
– 3-column layout (only used for desktops)
• Footer
• The footer is placed at the bottom of your page. It often contains
information like copyright and contact info.

<html>
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<style>
body {
margin: 0;}
/* Style the header */
.header {
padding: 20px;
text-align: center; }
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>

CSS Units
• CSS has several different units for expressing a length.
• Many CSS properties take "length" values, such as
width, margin, padding, font-size, etc.
• Length is a number followed by a length unit, such as
10px, 2em, etc.
• A whitespace cannot appear between the number and
the unit. However, if the value is 0, the unit can be
omitted.
• For some CSS properties, negative lengths are allowed.
• There are two types of length units: absolute and
relative.

• Absolute Lengths
• The absolute length units are fixed and a length expressed in
any of these will appear as exactly that size.
• Absolute length units are not recommended for use on
screen, because screen sizes vary so much. However, they can
be used if the output medium is known, such as for print
layout.
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

• Relative Lengths
• Relative length units specify a length relative to another
length property. Relative length units scale better between
different rendering mediums.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

CSS Specificity
• If there are two or more CSS rules that point to the same
element, the selector with the highest specificity value will
"win", and its style declaration will be applied to that HTML
element.
• Specificity Hierarchy
• Every CSS selector has its place in the specificity hierarchy.
• There are four categories which define the specificity level
of a selector:
• Inline styles - Example: <h1 style="color: pink;">
• IDs - Example: #navbar
• Classes, pseudo-classes, attribute selectors - Example:
.test, :hover, [href]
• Elements and pseudo-elements - Example: h1, :before

Assignment -17
• Write a code to create a calculator by using
HTML and CSS.

Assignment -18
• Write a code to create a time table of your
class by using html and css.

Assignment -19
• Write a code to create a nested list ((Write
output also).

HTML-Unit 4 css introduction hi my name is css and i am from html - CSS.pdf

More Related Content

Similar to HTML-Unit 4 css introduction hi my name is css and i am from html - CSS.pdf

Recently uploaded

HTML-Unit 4 css introduction hi my name is css and i am from html - CSS.pdf