Scribd
Upload
17 views

CSS.docx

Uploaded by

sahajram790140
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CSS.docx

Uploaded by

sahajram790140
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 128

CSS(CASCADING STYLE SHEET)

Cascading Style Sheets, fondly referred to as CSS, is a simply


designed language intended to simplify the process of making web
pages presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.CSS is easy to learn and understood but it
provides powerful control over the presentation of an HTML document.

Why to Learn CSS?


Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
CSS is a MUST for students and working professionals to become a
great Software Engineer specially when they are working in Web
Development Domain. I will list down some of the key advantages of
learning CSS:
● Create Stunning Web site - CSS handles the look and feel part
of a web page. Using CSS, you can control the colour of the text,
the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colours are
used, layout designs, variations in display for different devices and
screen sizes as well as a variety of other effects.
● Become a web designer - If you want to start a career as a
professional web designer, HTML and CSS designing is a must
skill.
● Control web - CSS is easy to learn and understand but it
provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup
languages HTML or XHTML.
● Learn other languages - Once you understands the basic of
HTML and CSS then other related technologies like JavaScript,
php, or angular are become easier to understand.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>


<p>This is a paragraph.</p>

</body>
</html>

Output:
Applications of CSS
As mentioned before, CSS is one of the most widely used style
language over the web. I'm going to list few of them here:
● CSS saves time - You can write CSS once and then reuse 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 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 cell phones or for
printing.
● Global web standards - Now HTML attributes are being
deprecated and it is being recommended to use CSS. So its a
good idea to start using CSS in all the HTML pages to make them
compatible to future browsers.

CSS Syntax
A CSS rule-set 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.
A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
Example:

In this example all <p> elements will be center-aligned, with a red text
color

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>
Output:

Example Explained

● 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

Types of CSS (Cascading Style Sheet)


Cascading Style Sheet (CSS) is used to set the style in web pages
which contain HTML elements. It sets the background color, font-size,
font-family, color, etc. property of elements in a web pages.
There are three types of CSS which are given below:

● External CSS
● Internal CSS
● Inline CSS

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. 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.

Example:

External styles are defined within the <link> element, inside the <head>
section of an HTML page:
● link tag is used to link the external style sheet with the html
webpage.
● href attribute is used to specify the location of the external style
sheet file.

<!DOCTYPE html>

<html>

<head>

<title>CSS</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

mystyle.css
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Output:

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.

Example:

Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>

<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:
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.
Example:
Inline styles are defined within the "style" attribute of the relevant
element:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Output:

CSS Selectors-
CSS selectors are used to "find" (or select) the HTML elements you want
to style.

The CSS element Selector


The element selector selects HTML elements based on the element
name.
Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Output:
The CSS id Selector
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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output:

The CSS class Selector


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.

Example:
In this example all HTML elements with class="center" will be red and
center-aligned:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
<p >Normal text. Without css</p></body>
</html>
Output:

We can also specify class to html tag.HTML elements can also refer to
more than one class.
Example:
In this example the <p> element will be styled according to
class="center" and to class="large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and
center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned,
and in a large font-size.</p>
</body>
</html>
Output:

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.

Example:
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<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>
Output:

The 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):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.


To group selectors, separate each selector with a comma.

Example:
In this example we have grouped the selectors from the code above:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Output:

CSS Attribute Selectors


The [attribute] selector is used to select elements with a specified
attribute.

CSS [attribute] Selector

Example:
The following example selects all <a> elements with a target attribute:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://nielit.gov.in">nielit.gov.in</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a


DOCTYPE must be declared.</p>
</body>
</html>

Output:
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a
specified attribute and value.
Example:
The following example selects all <a> elements with a target="_blank"
attribute:

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://nielit.gov.in">nielit.gov.in</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a
DOCTYPE must be declared.</p>
</body>
</html>
Output:
CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an
attribute value containing a specified word.

Example:

The following example selects all elements with a title attribute that
contains a space-separated list of words, one of which is "flower":

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>

<p>All images with the title attribute containing the word "flower" get a
yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">


<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>

Output:
CSS Backgrounds Properties
CSS background-color
The background-color property specifies the background color of an
element.

With CSS, a color is most often specified by:

● a valid color name - like "red"


● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"

You can set the background color for any HTML elements:
Example:

Here, the <h1>, <p>, and <div> elements will have different background
colors:

<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>
<style>
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>


<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Output:
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:

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>
<style>
div {
background-color: #4CAF50;
}

div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the
background of an element, all of its child elements become transparent
as well. This can make the text inside a fully transparent element hard to
read:</p>

<div class="first">
<h1>opacity 0.1</h1>
</div>

<div class="second">
<h1>opacity 0.3</h1>
</div>

<div class="third">
<h1>opacity 0.6</h1>
</div>

<div>
<h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Output:
CSS background-repeat
The background-repeat property allows you to control how a background
image is repeated or tiled in the background of an element. You can set
a background image to repeat vertically (y-axis), horizontally (x-axis), in
both directions, or in neither direction.Let's take a look at the following
illustration to understand how this property actually works.

If the image is repeated only horizontally (background-repeat: repeat-x;),


the background will look better:

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>
Output:

To repeat an image vertically, set background-repeat: repeat-y;

CSS background-position
The background-position property is used to control the position of the
background image.
If no background position has been specified, the background image is
placed at the default top-left position of the element i.e. at (0,0)
Besides keywords, you can also use percentage or length values, such
as px or em for this property.
Let's take a look at the following illustration to understand how this
property actually works.
Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p> NIELIT background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned
away from the text.</p>
<p>In this example we have also added a margin on the right side, so
the background image will never disturb the text.</p>

</body>
</html>

Output:
CSS background-attachment
The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the page):
Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>

<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>


<p>The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with the rest of
the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize


the browser window.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>


<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

Output:
Specify that the background image should scroll with the rest of the
page:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

CSS background - Shorthand property


To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
You can use the shorthand property background:
Example:
Use the shorthand property to set the background properties in one
declaration:

<!DOCTYPE html>
<html>
<head>
<title>CSS BACKGROUND</title>

<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all


the background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also


positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write
over the background image.</p>

</body>
</html>

Output:
When using the shorthand property the order of the property values is:
● background-color
● background-image
● background-repeat
● background-attachment
● background-position
It does not matter if one of the property values is missing, as long as the
other ones are in this order. Note that we do not use the
background-attachment property in the examples above, as it does not
have a value.

CSS background Property Values

Value Description values


background-color Specifies the background color to be used

background-imag Specifies ONE or MORE background images url("paper.gif")


e to be used

background-posit Specifies the position of the background left top


ion images left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
background-size Specifies the size of the background images

background-repe Specifies how to repeat the background repeat


at images repeat-x
repeat-y
no-repeat
background-attac Specifies whether the background images are scroll
hment fixed or scrolls with the rest of the page fixed
CSS Borders
CSS Border Properties
The CSS border properties allow you 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
●
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid 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>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Output:
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:

Example:

Demonstration of the different border widths:


<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

p.five {
border-style: double;
border-width: 15px;
}

p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>


<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>


<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used


alone.
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>
Output:
The border-width Property
This property specifies the width of the four borders:

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

Note: The "border-width" property does not work if it is used alone. Always
specify the "border-style" property to set the borders first.

Specific Side Widths


The border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border):

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom
and 35px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>


<p>The border-width property can have from one to four values (for the
top border, right border, bottom border, and the left border):</p>

<p class="one">Some text.</p>


<p class="two">Some text.</p>
<p class="three">Some text.</p>

</body>
</html>

Output:

CSS Border Color


The border-color property is used to set the color of the four borders.
The color can be set by:
● name - specify a color name, like "red"
● HEX - specify a HEX value, like "#ff0000"
● RGB - specify a RGB value, like "rgb(255,0,0)"
● HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>

<h2>The border-color Property</h2>


<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>


<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used
alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

Output:

Specific Side Colors


The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom
and yellow left */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values (for the
top border, right border, bottom border, and the left border):</p>

<p class="one">A solid multicolor border</p>

</body>
</html>

Output:

HEX Values-

The color of the border can also be specified using a hexadecimal value
(HEX):

Example:

p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
RGB Values-

Or by using RGB values:

Example:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
HSL Values-

You can also use HSL values:

Example:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

CSS Border - Individual Sides


In CSS, there are also properties for specifying each of the borders (top,
right, bottom, and left):

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>


<p>2 different border styles.</p>

</body>
</html>

Output:
If the border-style property has four values:

● border-style: dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

If the border-style property has three values:

● border-style: dotted solid double;


o top border is dotted
o right and left borders are solid
o bottom border is double

If the border-style property has two values:

● border-style: dotted solid;


o top and bottom borders are dotted
o right and left borders are solid

If the border-style property has one value:

● border-style: dotted;
o all four borders are dotted

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}

/* Three values */
p.three {
border-style: dotted solid double;
}

/* Two values */
p.two {
border-style: dotted solid;
}

/* One value */
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>

Output:
CSS Border - Shorthand Property
To shorten the code, it is also possible to specify all the individual border
properties in one property. The border property is a shorthand property
for the following individual border properties:

● border-width
● border-style (required)
● border-color

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p{
border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style,


and border-color.</p>

</body>
</html>

Output:

CSS Rounded Borders


The border-radius property is used to add rounded borders to an
element:

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS BORDER</title>

<style>
p.normal {
border: 2px solid red;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
}

p.round2 {
border: 2px solid red;
border-radius: 8px;
}

p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>


<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>


<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>

Output:

The CSS Box Model


All HTML elements can be considered as boxes. 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:
Explanation of the different parts:

● 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.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>


<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is
also 350px.</div>

</body>
</html>

Output:

CSS Text Properties


Text Color
The color property is used to set the color of the text. The color is
specified by:

● a color name - like "red"


● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"
Text Color and Background Color
Example:

In this example, we define both the background-color property and


the color property:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}
</style>
</head>
<body>

<h1>This Heading is Black with White Text</h1>


<p>This page has a grey background color and a blue text.</p>
<p>Another paragraph.</p>

</body>
</html>

Output:
Text Alignment
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.

Example:

The following example shows center aligned, and left and right aligned
text (left alignment is default if text direction is left-to-right, and right
alignment is default if text direction is right-to-left):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>
Output:
Text Decoration
The text-decoration property is used to set or remove decorations from
text. The value text-decoration: none; is often used to remove underlines
from links.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>
Output:

Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.

Example:

It can be used to turn everything into uppercase or lowercase letters, or


capitalize the first letter of each word:

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

Output:

THIS IS SOME TEXT.


this is some text.
This Is Some Text.

CSS Text Spacing

Text Indentation
The text-indent property is used to specify the indentation of the first line
of a text:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-indent: 50px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some


advice that I've been turning over in my mind ever since. 'Whenever you
feel like criticizing anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Output:

In my younger and more vulnerable years my father gave me some advice


that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this world
haven't had the advantages that you've had.'

Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.

The following example demonstrates how to increase or decrease the


space between characters:

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
</body>
</html>
}
Output:

This is heading 1
This is heading 2

Line Height
The line-height property is used to specify the space between lines:

Example
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}

p.big {
line-height: 1.8;
}
</style>
</head>
<body>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Output:

Word Spacing
The word-spacing property is used to specify the space between the
words in a text.

Example:

The following example demonstrates how to increase or decrease the


space between words:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>

</body>
</html>

Output:

White Space
The white-space property specifies how white-space inside an element
is handled.

Example

This example demonstrates how to disable text wrapping inside an


element:

<!DOCTYPE html>
<html>
<head>
<style>
p{
white-space: nowrap;
}
</style>
</head>
<body>

<h2>White Space</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>Try to remove the white-space property to see the difference.</p>

</body>
</html>

Output:

CSS Lists

All CSS List Properties


Property Description
list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-positio Specifies the position of the list-item markers (bullet


n points)

list-style-type Specifies the type of list-item marker

In HTML, there are two main types of lists:

● unordered lists (<ul>) - the list items are marked with bullets

● ordered lists (<ol>) - the list items are marked with numbers or
letters

The CSS list properties allow you 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

Different List Item Markers


The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>


<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>


<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Output:

Example of unordered lists:

o Coffee
o Tea
o Coca Cola

▪ Coffee
▪ Tea
▪ Coca Cola

Example of ordered lists:

I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola

An Image as The List Item Marker


The list-style-image property specifies an image as the list item marker:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output:

Position The List Item Markers


The list-style-position property specifies the position of the list-item
markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside


the list item. The start of each line of a list item will be aligned vertically.
This is default:
list-style-position: inside;" means that the bullet points will be inside the
list item. As it is part of the list item, it will be part of the text and push the
text at the start:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>


<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which
are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or
boiling water over cured leaves of the Camellia sinensis, an evergreen
shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company. The drink's name refers to two of its original ingredients,
which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which
are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or
boiling water over cured leaves of the Camellia sinensis, an evergreen
shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company. The drink's name refers to two of its original ingredients,
which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

Output:

Remove Default Settings


The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding.
To remove this, add margin:0 and padding:0 to <ul> or <ol>:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding:</p>


<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output:
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output:
When using the shorthand property, the order of the property values are:

● list-style-type (if a list-style-image is specified, the value of this


property will be displayed if the image for some reason cannot be
displayed)

● list-style-position (specifies whether the list-item markers should


appear inside or outside the content flow)

● list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the
missing property will be inserted, if any.

Styling List With Colors


We can also style lists with colors, to make them look a little more
interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while
properties added to the <li> tag will affect the individual list items:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output:
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}


ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>

<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Output:
CSS Tables
The look of an HTML table can be greatly improved with CSS.

Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td>
elements:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>

Output:

Add a border to a table:


Firstname Lastname
Peter Griffin
Lois Griffin

Notice that the table in the example above has double borders. This is
because both the table and the <th> and <td> elements have separate
borders.

Collapse Table Borders


The border-collapse property sets whether the table borders should be
collapsed into a single border:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Let the borders collapse:</h2>


<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse


property can produce unexpected results
in IE8 and earlier versions.</p>

</body>
</html>

Output:

Let the borders collapse:


Firstname Lastname
Peter Griffin
Lois Griffin

Note: If a !DOCTYPE is not specified, the border-collapse property can


produce unexpected results in IE8 and earlier versions.

Table Width and Height


Width and height of a table are defined by
the width and height properties.
Example:
The example below sets the width of the table to 100%, and the height of
the <th> elements to 50px:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
height: 50px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>


<p>Set the width of the table, and the height of the table header
row:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Output:

Horizontal 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.
Example:
The following example left-aligns the text in <th> elements:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>


<p>This property sets the horizontal alignment (like left, right, or center)
of the content in th or td:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>
Output:

Vertical Alignment
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).
Example:

The following example sets the vertical text alignment to bottom for <td>
elements:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The vertical-align Property</h2>


<p>This property sets the vertical alignment (like top, bottom, or middle)
of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Output:

Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 15px;
}
</style>
</head>
<body>

<h2>The padding Property</h2>


<p>This property adds space between the border and the content in a
table.</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Output:

CSS Layout - The display Property


The display property is the most important CSS property for controlling
layout.

The display Property


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>

Inline Elements
An inline element does not start on a new line and only takes up as
much width as necessary.
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. Take a look at our last
example on this page if you want to know how this can be achieved.
The <script> element uses display: none; as default.

Override The Default Display Value


As mentioned, every element has a default display value. However, you
can override this.
Changing an inline element to a block element, or vice versa, can be
useful for making the page look a specific way, and still follow the web
standards.
A common example is making inline <li> elements for horizontal menus:
Example:
<!DOCTYPE html>
<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>

Output:

CSS Layout - display: inline-block

The display: inline-block Value


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.
The following example shows the different behavior of display:
inline, display: inline-block and display: block:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>

<h1>The display Property</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="a">Aliquam</span> <span class="a">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="b">Aliquam</span> <span class="b">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="c">Aliquam</span> <span class="c">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>

</body>
</html>

Output:
Using inline-block to Create Navigation Links
One common use for display: inline-block is to display list items
horizontally instead of vertically. The following example creates
horizontal navigation links:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>

<h1>Horizontal Navigation Links</h1>


<p>By default, list items are displayed vertically. In this example we use
display: inline-block to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically
break when it becomes too crowded.</p>

<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

Output:

CSS Layout - The position Property


The position property specifies the type of positioning method used for
an element (static, relative, fixed, absolute or sticky).

The position Property


The position property specifies the type of positioning method used for
an element.
There are five different position values:
● static
● relative
● fixed
● absolute
● sticky
Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless
the position property is set first. They also work differently depending on
the position value.

position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and
right properties.
Example:

An element with position: static; is not positioned in any special way; it is


always positioned according to the normal flow of the page:
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way;
it is
always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

Output:

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:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal


position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Output:

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:

Notice the fixed element in the middle-right corner of the page. Here is
the CSS that is used:
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 500px;
right: 40px;
width: 300px;
border: 3px solid #73AD21;}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>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:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

Output:

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.
Note: A "positioned" element is one whose position is anything
except static.
Example:

Here is a simple example:


<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</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>

Output:

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).
Example:

In this example, the sticky element sticks to the top of the page (top: 0),
when you reach its scroll position.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky


positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky
position.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page
(top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>

</body>
</html>

Output:
Overlapping Elements
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which
element should be placed in front of, or behind, the others).
Example:

An element can have a positive or negative stack order:


<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the
text.</p>

</body>
</html>
Output:

CSS Layout - Overflow


The CSS overflow property controls what happens to content that is too
big to fit into an area.

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it
renders outside the element's box:</p>

<div>You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.</div>

</body>
</html>

Output:

overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content
is hidden:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the
content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>

<div>You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.</div>

</body>
</html>

Output:

overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is
added to scroll inside the box. Note that this will add a scrollbar both
horizontally and vertically (even if you do not need it):
Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a
scrollbar is added to scroll inside the box. Note that this will add a
scrollbar both horizontally and vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.</div>

</body>
</html>

Output:
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when
necessary:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>The auto value is similar to scroll, only it add scrollbars when
necessary:</p>

<div>You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.</div>

</body>
</html>
Output:

CSS Layout - float


The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the
cleared element and on which side.

The float Property


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.

float: right;
The following example specifies that an image should float to the right in
a text:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.</p>

<p><img src="pineapple.jpg" alt="Pineapple"


style="width:170px;height:170px;margin-left:15px;">
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>
Output:

float: left;
The following example specifies that an image should float to the left in
a text:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>

<p>In this example, the image will float to the left in the paragraph, and
the text in the paragraph will wrap around the image.</p>

<p><img src="pineapple.jpg" alt="Pineapple"


style="width:170px;height:170px;margin-right:15px;">
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>

Output:
No float
In the following example the image will be displayed just where it occurs
in the text (float: none;):
Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>

<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>
Output:

CSS Layout - clear and clearfix


The clear Property
The clear property specifies what elements can float beside the cleared
element and on which side.
The clear property can have one of the following values:

● none - Allows floating elements on both sides. This is default


● left - No floating elements allowed on the left side
● right- No floating elements allowed on the right side
● both - No floating elements allowed on either the left or the right
side
● inherit - The element inherits the clear value of its parent

The most common way to use the clear property is after you have used
a float property on an element.
When clearing floats, you should match the clear to the float: If an
element is floated to the left, then you should clear to the left. Your
floated element will continue to float, but the cleared element will appear
below it on the web page.

Example:

The following example clears the float to the left. Means that no floating
elements are allowed on the left side (of the div):

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}

.div2 {
border: 1px solid red;
}

.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}

.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code.
However, since div1 floats to the left, the text in div2 flows around
div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the
floating div3. The value "left" clears elements floated to the left. You can
also clear "right" and "both".</div>

</body>
</html>

Output:

The clearfix Hack


If an element is taller than the element containing it, and it is floated, it
will "overflow" outside of its container Then we can add overflow: auto; to
the containing element to fix this problem:
The overflow: auto clearfix works well as long as you are able to keep
control of your margins and padding (else you might see scrollbars).
The new, modern clearfix hack however, is safer to use, and the
following code is used for most webpages:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}

.img1 {
float: right;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

.img2 {
float: right;
}
</style>
</head>
<body>

<p>In this example, the image is taller than the element containing it,
and it is floated, so it overflows outside of its container:</p>

<div>
<h2>Without Clearfix</h2>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170"
height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">Add the clearfix hack to the containing element, to


fix this problem:</p>

<div class="clearfix">
<h2>With Clearfix</h2>
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170"
height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

Output:
CSS Menu Design(CSS Navigation
Bar)

Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking
navigation bars.

Navigation Bar = 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 and remove the bullets and the margins
and padding from the list:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default
padding and margin.</p>

<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>

</body>
</html>

Example explained:
● list-style-type: none; - Removes the bullets. A navigation bar does
not need list markers
● Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both
vertical, and horizontal navigation bars
Output:

CSS Vertical Navigation Bar


To build a vertical navigation bar, you can style the <a> elements inside
the list, in addition to the code from the previous example.
Example:

<!DOCTYPE html>
<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>

Example explained:
● display: block; - Displaying the links as block elements makes the
whole link area clickable (not just the text), and it allows us to
specify the width (and padding, margin, height, etc. if you want)
● width: 60px; - Block elements take up the full width available by
default. We want to specify a 60 pixels width

Output:

Vertical Navigation Bar Examples


Create a basic vertical navigation bar with a gray background color and
change the background color of the links when the user moves the
mouse over them:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */


li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<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>

</body>
</html>

Output:
CSS Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar.
Using inline or floating list items.

Inline List Items


One way to build a horizontal navigation bar is to specify the <li>
elements as inline, in addition to the "standard" code from the previous
page:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</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>

</body>
</html>
Example explained:
display: inline; - By default, <li> elements are block elements. Here, we
remove the line breaks before and after each list item, to display them on
one line
Output:

Floating List Items


Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}
li a {
display: block;
padding: 8px;
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><b>Note:</b> If a !DOCTYPE is not specified, floating items can


produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The
whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent
li elements from going outside of the list.</p>

</body>
</html>

Example explained:
● float: left; - use float to get block elements to slide next to each
other
● display: block; - Displaying the links as block elements makes the
whole link area clickable (not just the text), and it allows us to
specify padding (and height, width, margins, etc. if you want)
● padding: 8px; - Since block elements take up the full width
available, they cannot float next to each other. Therefore, specify
some padding to make them look good
● background-color: #dddddd; - Add a gray background-color to
each a element
Output:
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color
and change the background color of the links when the user moves the
mouse over them:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>

<ul>
<li><a class="active" 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>

</body>
</html>

Output:

CSS Image Gallery


Image Gallery
The following image gallery is created with CSS:
Example:

<!DOCTYPE html>
<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>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Output:

You might also like