Scribd
Upload
25 views47 pages

CH 3css

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements on various media. It allows for the control of layout and design across multiple web pages, significantly reducing development time. CSS can be applied through external, internal, or inline styles, and includes features such as selectors, properties, and comments for better organization and readability.

Uploaded by

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

CH 3css

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements on various media. It allows for the control of layout and design across multiple web pages, significantly reducing development time. CSS can be applied through external, internal, or inline styles, and includes features such as selectors, properties, and comments for better organization and readability.

Uploaded by

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

What is CSS?

• CSS stands for Cascading Style Sheets.


• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files.

Why Use CSS?


CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Solved a Big Problem


HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

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

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information
were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

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.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
EXAMPLE

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

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

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

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

Example
External styles are defined within the <link> element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css
extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

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

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

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

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

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}

Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will
be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Example
However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later
date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

EXAMPLE -1

<!DOCTYPE html>

<html>

<head>

<style>

/* This is a single-line comment */

p{

color: red;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

EXAMPLE-2

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red; /* Set text color to red */

}
</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

HTML and CSS Comments


From the HTML tutorial, you learned that you can add comments to your HTML source by using
the <!--...--> syntax.

In the following example, we use a combination of HTML and CSS comments:

Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>
CSS Color Names
In CSS, a color can be specified by using a predefined color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

CSS Background Color


<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>


<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

</p>

</body>

</html>

CSS Text Color


<!DOCTYPE html>

<html>

<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

CSS Border Color


<!DOCTYPE html>
<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

</html>

CSS RGB Colors


RGB Value
In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)


Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED (255)

GREEN (99)
BLUE (71)

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>

<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>

<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>


<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>

</html>

CSS background-image

<!DOCTYPE html>

<html>

<head>

<style>

Body

background-image: url("gradient_bg.png");

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

</html>

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>

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

example
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: scroll;

}
</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 scrolls. Try to scroll down the page.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

</body>

</html>

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

1. The CSS element Selector

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

<!DOCTYPE html>

<html>

<head>

<style>

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>

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

<!DOCTYPE html>

<html>

<head>

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

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

<!DOCTYPE html>
<html>

<head>

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

</body>

</html>

Another example

<!DOCTYPE html>

<html>

<head>

<style>

p.center

text-align: center;

color: red;

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

</body>

</html>

4. The CSS Universal Selector

The universal selector (*) selects all HTML elements 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>
5. The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

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

6. CSS [attribute] Selector

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

The following example selects all <a> elements with a target attribute:

<!DOCTYPE html>

<html>

<head>
<style>

a[target] {

background-color: yellow;

</style>

</head>

<body>

<h2>CSS [attribute] Selector</h2>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</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 [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

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>

<h2>CSS [attribute="value"] Selector</h2>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</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 [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a
specified word.

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>

<h2>CSS [attribute~="value"] Selector</h2>

<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 [attribute~="value"] Selector
All images with the title attribute containing the word "flower" get a yellow border.

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting
with the specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen(
- ), like class="top-text"!

<!DOCTYPE html>

<html>

<head>

<style>
[class|=top] {

background: yellow;

</style>

</head>

<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>

<p class="top-text">Hello world!</p>

<p class="topcontent">Are you learning CSS?</p>

</body>

</html>

output

CSS [attribute|="value"] Selector

Welcome

Hello world!

Are you learning CSS?

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a
specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value does not have to be a whole word!

<!DOCTYPE html>
<html>

<head>

<style>

[class^="top"] {

background: yellow;

</style>

</head>

<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>

<p class="top-text">Hello world!</p>

<p class="topcontent">Are you learning CSS?</p>

</body>

</html>

Output

CSS [attribute^="value"] Selector

Welcome

Hello world!

Are you learning CSS?

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a
specified value.
The following example selects all elements with a class attribute value that ends with "test":

Note: The value does not have to be a whole word!

<!DOCTYPE html>

<html>

<head>

<style>

[class$="test"] {

background: yellow;

</style>

</head>

<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>

<div class="my-test">The third div element.</div>

<p class="mytest">This is some text in a paragraph.</p>

</body>

</html>

output

CSS [attribute$="value"] Selector


The first div element.

The second div element.


The third div element.

This is some text in a paragraph.

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a
specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!

<!DOCTYPE html>

<html>

<head>

<style>

[class*="te"] {

background: yellow;

</style>

</head>

<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>

<div class="my-test">The third div element.</div>

<p class="mytest">This is some text in a paragraph.</p>

</body>

</html>
output

CSS [attribute*="value"] Selector


The first div element.

The second div element.

The third div element.

This is some text in a paragraph.

CSS Border Properties


The CSS border properties allow you to specify the style, width, and color of an element's border.

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

example
<!DOCTYPE html>

<html>

<head>

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

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

<html>

<head>

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

Example 2

<!DOCTYPE html>

<html>

<head>

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

2. CSS Border - Individual Sides


From the examples on the previous pages, you have seen that it is possible to specify a different
border for each side.

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

Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

3. CSS Rounded Borders


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

<!DOCTYPE html>

<html>

<head>

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

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

Display a list of links as a horizontal menu:

HTML CSS JavaScript

block
<!DOCTYPE html>

<html>

<head>

<style>

span {

display: block;

</style>

</head>

<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two
elements.</span>

</body>

</html>

Output

A display property with a value of "block" results in

a line break between the two elements.

<!DOCTYPE html>
<html>

<head>

<style>

a{

display: block;

</style>

</head>

<body>

<p>Display links as block elements:</p>

<a href="/html/default.asp" target="_blank">HTML</a>

<a href="/css/default.asp" target="_blank">CSS</a>

<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>

</html>

output

Display links as block elements:

HTML

CSS

JavaScript

<!DOCTYPE html>

<html>

<head>

<style>
h1.hidden

visibility: hidden;

</style>

</head>

<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>

<p>Notice that the hidden heading still takes up space.</p>

</body>

</html>

Output

This is a visible heading

Notice that the hidden heading still takes up space.

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 {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>
</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins,
and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

</html>

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.

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

<!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: static;
An element with position: static; is not positioned in any special way; it is always positioned according
to the normal flow of the page:

This div element has position: static;

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

This <div> element has position: relative;

<!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: relative;
An element with position: relative; is positioned relative to its normal position:

This div element has position: relative;

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

<!DOCTYPE html>

<html>

<head>

<style>

div.fixed

position: fixed;

bottom: 0;

right: 0;

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>

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

<!DOCTYPE html>

<html>

<head>

<style>

div.relative

position: relative;

width: 400px;

height: 200px;

border: 3px solid #73AD21;

}
div.absolute

position:absolute;

top: 10px;

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>

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

<!DOCTYPE html>

<html>

<head>

<style>

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

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

You might also like