Class 9 | Cascading Style Sheet | Website Design Notes

Types of CSS

In line CSS: using <style> attributes inside html tag
Internal CSS: using <style> attributes inside head tag
External CSS: use<link> element to external CSS file.

Inline CSS:
If we want to add with in a line or within a same tag then we use the inline CSS.eg: <p style=” color: red” ;>.

E.g.:

<!DOCTYPE html>

<html>

<body>

<h1 style=”color: blue;”>A Blue Heading</h1>

<p style=”color: red;”>A red paragraph. </p>

</body>

</html>

Internal CSS

Internal CSS are defined with in <style> element, inside the head section of an html page.

e.g.:

External<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
{color: red;}
</style>
</head>
<body>

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

</body>
</html>

external CSS

If we have more than 1 webpage than we use external CSS. If we want to add CSS with example HTML then we have to used <link> element in <head> section.

E.g.:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>

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

</body>
</html>

CSS selector

CSS selector are used to select the html element based on their name, id, class, attribute and more.

Types of CSS selector

Id selector
Class selector
Element selector/Tag selector
Grouping selector
Universal selector

Id selector

The id selector uses the id attribute of Html element to select a specific element.

The id of an element is unique within a page, so that id selector is used to select one unique element.

e.g.:

Class selector

the class selector select element with a specific class attribute. To select element with a specific class, write a period(.) character followed by name of class.

e.g.:

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

Element selector

The element selector select element based on the element name.

e.g.:

<!doctype html>

<head>

<style>

<body> {

Background -color: “red”;

}

P {

Text-align: center;
Font-size :20px;

Color: blue;

}

</style>

</head>

<body>
<p> Hello world! This is the paragraph tag </p>

</body>

< /html>

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>

Universal selector

The style rules that are defined inside the ‘*’ selector will be applied to each element in the document.

e.g.:

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

</body>

</html>

CSS background

The background color property specifies the background color of an element.

e.g.:

<!doctype html>

<head>

<style>

Body {

Background-color: blue;

}

</style>

</head>

<body>

<h1> Hello world <h1>

<P> This page has light blue background color </p>

</body>

</html>

CSS background properties

Background – color
Background – image
Background – repeat
Background – attachment
Background – position

Background – color: the background color property specifies the background color of an element.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: light-blue;

}

</style>

</head>

<body>

<h1>Hello World! </h1>

<p>This page has a light blue background color! </p>

</body>

</html>

Background – image: The background image property sets one or more background image for an element.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Hello World! </h1>

<p>This page has an image as the background! </p>

</body>

</html>

Background – repeat: The background repeat property sets if how a background image will be repeated.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image…</p>

</body>

</html>

Background – attachment: A background attachment property sets with a background image scroll with the rest of the page is fixed

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

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>

</body>

</html>

Background – position: The background position property sets the starting position of a background image.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}

</style>

</head>

<body>

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

<p>Here, the background image will be positioned in the center of the element (in this case, the body element). </p>

</body>

</html>

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

CSS Borders Types

Border style: The border style property sets the style of an elements for borders. /Specifies what kind of border to display.

<!doctype html>

<html>

<head>

<style>

h1{

border-style: dotted;

}

div {

border-style: dotted;

}

</style>

</head>

<body>

<h1> A heading with a dotted border </h1>

<div> A div element with a dotted border </div>

</body>

</html>

Border width: The border width property sets the width of an element for borders. / Specifies the width of the four borders.

Examples:

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: dotted;

border-width: 2px;

}

two {

border-style: dotted;

border-width: thick;

}

three {

border-style: double;

border-width: 19px;

}

four {

border-style: solid;

border-width: thin;

}

</style>

</head>

<body>

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

<p>This property specifies the width of the four borders:</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>

Border color: The border color property sets the color or an element for border.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red;

}

two {

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

CSS margins

The CSS margins properties are used to create space around elements, outside of any defined borders. All margin properties can have the following values:

Auto-the browsers calculate the margins.
Length-specifies a margin in px , pt ,cm ,etc.

its properties are:

Margin-top
Margin-right

Margin-bottom

Margin-left

Example:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: light blue;

}

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px. </div>

</body>

</html>

CSS Padding

The CSS padding properties are used to generate space around an elements content, inside of any defined bodies.

All margin properties can have the following values:

Length: specifies a padding in px,
%: specifies a padding in 100% of the width of the containing element.

Its properties are:

padding-top
padding-right
padding-bottom
padding-left

Example:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: light blue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px. </div>

</body>

</html>

CSS text

CSS has a lot of properties for formatting text.

Its properties are:

text-color
text-decoration
text-transformation
text-shadow
text-spacing
text-alignment
text-color: The color property is used to set the color of text.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

}

p {

color: green;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is paragraph for text color</p>

<p>another paragraph</p>

</body>

</html>

text-decoration: This property is used to set or remove decoration from text.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

</style>

</head>

<body>

<h1>This is first heading</h1>

<h2>Line-through text decoration</h2>

<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses

the reader. </p>

</body>

</html>

Text transformation: This property is used to specify upper case, lower case and capitalize.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

uppercase {

text-transform: uppercase;

}

lowercase {

text-transform: lowercase;

}

capitalize {

text-transform: capitalize;

}

</style>

</head>

<body>

<p class=”uppercase”>This text is transformed to uppercase. </p>

<p class=”lowercase”>This text is transformed to lowercase. </p>

<p class=”capitalize”>This text is capitalized. </p>

</body>

</html>

Text shaow: The text-shadow property adds shadow to text
Example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 3px;

}

</style>

</head>

<body>

<h1>Text-shadow effect! </h1>

</body>

</html>

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:

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

Text-spacing:

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

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

Example:

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

letter-spacing: 5px;

}

h3 {

letter-spacing: -2px;

}

</style>

</head>

<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>

<h3>This is heading 2</h3>

</body>

</html>

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

Example:

<!DOCTYPE html>

<style>

small {

line-height: 0.7;

}

big {

line-height: 1.8;

}

</style>

</head>

<body>

<h1>Using line-height</h1>

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

This is a paragraph with a smaller line-height. <br>

</p>

This is a paragraph with a bigger line-height. <br>

</p>

</body>

</html>

Text-indent: The text-indentproperty 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>

<h1>Using text-indent</h1>

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

White-space: This property specifies how white-space inside an element is handled.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

p {

white-space: no wrap;

}

</style>

</head>

<body>

<h1>Using white-space</h1>

<p>

This is some text that will not wrap.

</p>

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

</body>

</html>

Word spacing:

The wordspacing property is used to specify the space between the words in a text.

Example:

<!DOCTYPE html><html><head><style>p.one { word-spacing: 10px;}p.two { word-spacing: -2px;}</style></head><body><h1>Using word-spacing</h1><p>This is a paragraph with normal word spacing.</p><p class=”one”>This is a paragraph with larger word spacing.</p><p class=”two”>This is a paragraph with smaller word spacing.</p></body></html>

CSS height/weidht

The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element.

Eg:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}

CSS position and float

CSS position and float are two properties used to control the layout of elements on a webpage. They serve different purposes and offer different ways of positioning elements within the document flow.

The position property specifies the type of positioning method used for an element. It can have several values:

static: This is the default value. Elements are positioned according to the normal flow of the document.

relative: The element is positioned relative to its normal position. Using `top`, `right`, `bottom`, or `left` will move it from that position.

absolute: The element is positioned relative to the nearest positioned ancestor (not static). If there is no such ancestor, it uses the document body, and moves along with page scrolling.

fixed: The element is positioned relative to the browser window. It stays in the same place even if the page is scrolled.

sticky: The element is treated as `relative` until it crosses a specified threshold, then it is treated as `fixed`.

<!DOCTYPE html>

<head>

<title>CSS Position Example</title>

<style>

.box {

width: 100px;

height: 100px;

margin: 20px;

background-color: lightblue;

border: 1px solid #000;

}

.static {

position: static;

}

.relative {

position: relative;

top: 20px;

left: 20px;

}

.absolute {

position: absolute;

top: 50px;

left: 50px;

}

.fixed {

position: fixed;

top: 10px;

right: 10px;

}

.sticky {

position: -webkit-sticky; /* For Safari */

position: sticky;

top: 0;

background-color: yellow;

padding: 50px;

font-size: 20px;

}

.container {

height: 1500px;

background-color: lightgray;

padding: 10px;

}

</style>

</head>

<body>

<div class=”box static”>Static</div>

<div class=”box relative”>Relative</div>

<div class=”box absolute”>Absolute</div>

<div class=”box fixed”>Fixed</div>

<div class=”box sticky”>Sticky</div>

Scroll down to see the sticky behavior.

</div>

</body>

</html>

The float property is used for positioning and formatting content. It allows elements to float to the left or right of their container, allowing text and inline elements to wrap around them.

The `float` property can have the following values:

left: The element floats to the left.

right: The element floats to the right.

none: The element does not float. This is the default value.

inherit: The element inherits the float value of its parent.

<!DOCTYPE html>

<head>

<title>CSS Float Example</title>

<style>

.container {

width: 600px;

margin: 0 auto;

}

.box {

width: 200px;

height: 150px;

margin: 10px;

background-color: lightblue;

border: 1px solid #000;

}

.left {

float: left;

}

.right {

float: right;

}

.clear {

clear: both;

}

</style>

</head>

<body>

<div class=”box left”>Float Left</div>

<div class=”box right”>Float Right</div>

<p>This paragraph will appear below the floated elements because of the clear: both property applied to the div above.</p>

</div>

</body>

</html>

CSS overflow

The CSS `overflow` property controls what happens to content that is too large to fit into an element’s box. This property can be applied to block-level elements and determines whether to clip the content, add scrollbars, or let it overflow outside the box.

visible: The default value. Content is not clipped and may overflow outside the element’s box.

hidden: The overflow is clipped, and the content that overflows is not visible.

scroll: The overflow is clipped, but a scrollbar is added to see the rest of the content.

auto: If the overflow is clipped, a scrollbar should be added to see the rest of the content. Scrollbars will appear only when necessary.

inherit: The overflow value is inherited from its parent element.

visible

This is the default value where the content overflows the element’s box and is visible.

<!DOCTYPE html>

<head>

<title>CSS Overflow – visible</title>

<style>

.box {

width: 200px;

height: 100px;

border: 1px solid #000;

overflow: visible;

background-color: lightblue;

}

</style>

</head>

<body>

This is a box with overflow set to visible. The content will overflow outside the box if it is too large.

</div>

</body>

</html>

hidden

The content that overflows the element’s box is clipped and not visible.

<!DOCTYPE html>

<head>

<title>CSS Overflow – hidden</title>

<style>

.box {

width: 200px;

height: 100px;

border: 1px solid #000;

overflow: hidden;

background-color: lightblue;

}

</style>

</head>

<body>

This is a box with overflow set to hidden. The content will be clipped and not visible if it overflows outside the box.

This is some extra text to show the clipping behavior.

</div>

</body>

</html>

scroll

Scrollbars are always present, even if the content does not overflow.

<!DOCTYPE html>

<head>

<title>CSS Overflow – scroll</title>

<style>

.box {

width: 200px;

height: 100px;

border: 1px solid #000;

overflow: scroll;

background-color: lightblue;

}

</style>

</head>

<body>

This is a box with overflow set to scroll. Scrollbars are always present, even if the content does not overflow.

This is some extra text to show the scrolling behavior.

</div>

</body>

</html>

auto

Scrollbars appear only when necessary (i.e., when content overflows the element’s box).

<!DOCTYPE html>

<head>

<title>CSS Overflow – auto</title>

<style>

.box {

width: 200px;

height: 100px;

border: 1px solid #000;

overflow: auto;

background-color: lightblue;

}

</style>

</head>

<body>

This is a box with overflow set to auto. Scrollbars appear only when necessary.

This is some extra text to show the auto overflow behavior.

</div>

</body>

</html>

overflow-x: Controls the horizontal overflow.

overflow-y: Controls the vertical overflow.

These properties can be used to handle overflow in one specific direction:

<!DOCTYPE html>

<head>

<title>CSS Overflow – overflow-x and overflow-y</title>

<style>

.box {

width: 200px;

height: 100px;

border: 1px solid #000;

background-color: lightblue;

}

.overflow-x {

overflow-x: auto;

}

.overflow-y {

overflow-y: auto;

}

</style>

</head>

<body>

This is a box with overflow-x set to auto. Scrollbars appear only when necessary horizontally.

This text is long enough to cause horizontal overflow.

</div>

<br>

This is a box with overflow-y set to auto. Scrollbars appear only when necessary vertically.

<br><br>This is some extra text to show the vertical scrolling behavior.

</div>

</body>

</html>

CSS box modelThe CSS Box Model is a fundamental concept in web design and layout, representing the structure and layout of elements on a webpage. It defines how the size of an element is calculated and how it interacts with other elements in terms of spacing and borders.
Components of the CSS Box ModelContent:
The actual content of the box, such as text, images, or other elements. The size of the content area can be defined using properties like `width` and `height`. Padding:
The space between the content and the border. Padding adds space inside the element’s border, around the content. It can be set using the `padding` property. Border:
The border surrounds the padding (if any) and the content. The thickness and style of the border can be set using the `border` property. Margin:
The space outside the border, creating space between the element and other elements. Margins are set using the `margin` property. Example with CSS<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>CSS Box Model Example</title><style> .box { width: 200px; /* Content width */ height: 100px; /* Content height */ padding: 20px; /* Padding around content */ border: 5px solid black; /* Border around padding */ margin: 10px; /* Margin outside border */ background-color: lightblue; /* Background color of content area */ }</style></head><body><div class=”box”> This is a box model example.</div></body></html> The total width and height of an element are calculated as follows:Total Width =
`width` + `padding-left` + `padding-right` + `border-left` + `border-right` + `margin-left` + `margin-right`Total Height
= `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom` + `margin-top` + `margin-bottom`

CSS navigation bar
Creating a navigation bar using CSS involves combining various properties to achieve the desired layout and functionality. Below are examples of different types of navigation bars:

Horizontal Navigation Bar

<!DOCTYPE html>

<head>

<title>Horizontal Navigation Bar</title>

<style>

body {

font-family: Arial, sans-serif;

}

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

</style>

</head>

<body>

<a href=”#about”>About</a>

<a href=”#services”>Services</a>

<a href=”#contact”>Contact</a>

</div>

</body>

</html>

Border Divider Navigation Bar

<!DOCTYPE html>

<head>

<title>Border Divider Navigation Bar</title>

<style>

body {

font-family: Arial, sans-serif;

}

.navbar {

overflow: hidden;

background-color: #333;

border-bottom: 2px solid #ddd;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

border-right: 1px solid #ddd;

}

.navbar a:last-child {

border-right: none;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

</style>

</head>

<body>

<a href=”#about”>About</a>

<a href=”#services”>Services</a>

<a href=”#contact”>Contact</a>

</div>

</body>

</html>

Fixed Navigation Bar

<!DOCTYPE html>

<head>

<title>Fixed Navigation Bar</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #333;

position: fixed;

top: 0;

width: 100%;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

.content {

padding: 60px;

}

</style>

</head>

<body>

<a href=”#about”>About</a>

<a href=”#services”>Services</a>

<a href=”#contact”>Contact</a>

</div>

<h1>Fixed Navigation Bar</h1>

<p>Scroll this page to see the effect.</p>

</div>

</body>

</html>

Sticky Navigation Bar

<!DOCTYPE html>

<head>

<title>Sticky Navigation Bar</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #333;

position: -webkit-sticky; /* For Safari */

position: sticky;

top: 0;

width: 100%;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

.content {

padding: 60px;

}

</style>

</head>

<body>

<a href=”#about”>About</a>

<a href=”#services”>Services</a>

<a href=”#contact”>Contact</a>

</div>

<h1>Sticky Navigation Bar</h1>

<p>Scroll this page to see the effect.</p>

</div>

</body>

</html>

Dropdown Navigation Bar

<!DOCTYPE html>

<head>

<title>Dropdown Navigation Bar</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

.dropdown {

float: left;

overflow: hidden;

}

.dropdown .dropbtn {

cursor: pointer;

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 20px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: #ddd;

}

.dropdown:hover .dropdown-content {

display: block;

}

.content {

padding: 60px;

}

</style>

</head>

<body>

<a href=”#about”>About</a>

<button class=”dropbtn”>Services

</button>

<a href=”#service1″>Service 1</a>

<a href=”#service2″>Service 2</a>

<a href=”#service3″>Service 3</a>

</div>

<a href=”#contact”>Contact</a>

</div>

<h1>Dropdown Navigation Bar</h1>

<p>Hover over the “Services” button to see the dropdown menu.</p>

</div>

</body>

</html>

CSS advance properties
CSS rounded corner:
With the CSS border-radius property, you can give any element “rounded corners”.

CSS border-radius Property

The CSS border-radius property defines the radius of an element’s corners.

Here are three examples:

1 Rounded corners for an element with a specified background color.

2 Rounded corners for an element with a border.
3 Rounded corners for an element with a background image.

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<pid= “rcorner1”>rounder corner!</p>
<pid= “rcorner2”>rounder corner!</p>
<pid= “rcorner3”>rounder corner!</p>
</body>
</html>

CSS border image
The `border-image` property in CSS allows you to use an image as the border of an element. This can create more complex and visually appealing borders compared to standard CSS borders. The `border-image` property is a shorthand for setting `border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, and `border-image-repeat`.

Basic Syntax

element {

border-image: url(‘image.png’) slice width outset repeat;

}

Detailed Explanation of Each Property

border-image-source: Specifies the path to the image to be used as the border.

border-image-slice: Specifies how to slice the image into regions (top, right, bottom, left). It can be a percentage or number (in pixels).

border-image-width: Specifies the width of the border image. It can be a percentage, length, or the keyword `auto`.

border-image-outset: Specifies the amount by which the border image area extends beyond the border box.

border-image-repeat: Specifies how the image is scaled or tiled to fill the border area. Values can be `stretch`, `repeat`, `round`, or `space`.

Example

<!DOCTYPE html>

<head>

<title>CSS Border Image Example</title>

<style>

.border-image-box {

width: 300px;

height: 200px;

border: 20px solid transparent;

border-image: url(‘https://via.placeholder.com/150’) 30 round;

/* Explanation:

– url(‘https://via.placeholder.com/150’): The source image.

– 30: Slice the image into 30% from each side.

– round: The border image will be rounded to fill the border area.

}

</style>

</head>

<body>

This box has a border image.

</div>

</body>

</html>

CSS text effects
– text-overflow
– word-wrap
– word-break
– writing-mode

CSS Text Overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
Example
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.

Example
p {
word-wrap: break-word;
}

CSS Word Breaking

The CSS word-break property specifies line breaking rules.

Example

p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Example
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}

CSS gradients

CSS gradients allow you to create smooth transitions between two or more specified colors. They are commonly used for backgrounds, buttons, and other design elements to add visual interest without the need for images. CSS supports two types of gradients: linear and radial.

CSS Linear Gradients

A linear gradient transitions colors along a straight line.
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, …);
Basic Linear Gradient

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Linear Gradient Example</title>
<style>
.linear-gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<div class=”linear-gradient-box”>
Basic Linear Gradient
</div>
</body>
</html>

Linear Gradient with Angles
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Linear Gradient with Angles</title>
<style>
.linear-gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(45deg, blue, green);
}
</style>
</head>
<body>
<div class=”linear-gradient-box”>
Linear Gradient with Angles
</div>
</body>
</html>

Linear Gradient with Multiple Colors
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Linear Gradient with Multiple Colors</title>
<style>
.linear-gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
</style>
</head>
<body>
<div class=”linear-gradient-box”>
Linear Gradient with Multiple Colors
</div>
</body>
</html>

CSS Radial Gradients
A radial gradient transitions colors radiating from an origin (center or a specified point).

Syntax
background: radial-gradient(shape size at position, color-stop1, color-stop2, …);

Basic Radial Gradient
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Radial Gradient Example</title>
<style>
.radial-gradient-box {
width: 300px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
</style>
</head>
<body>
<div class=”radial-gradient-box”>
Basic Radial Gradient
</div>
</body>
</html>

Radial Gradient with Specified Position

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Radial Gradient with Position</title>
<style>
.radial-gradient-box {
width: 300px;
height: 200px;
background: radial-gradient(circle at left top, blue, green);
}
</style>
</head>
<body>
<div class=”radial-gradient-box”>
Radial Gradient with Position
</div>
</body>
</html>

Radial Gradient with Multiple Colors

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Radial Gradient with Multiple Colors</title>
<style>
.radial-gradient-box {
width: 300px;
height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
</style>
</head>
<body>
<div class=”radial-gradient-box”>
Radial Gradient with Multiple Colors
</div>
</body>
</html>

CSS shadows
CSS Text Shadow
The CSS text-shadow property applies shadow to text.

Example:
h1 {
text-shadow: 2px 2px;
}

CSS box-shadow Property
The CSS box-shadow property is used to apply one or more shadows to an element.

Example:
div {
box-shadow: 10px 10px;
}

CSS measurement unit
CSS measurement units are essential for defining the sizes, positions, and spacing of elements on a webpage. Understanding these units helps you create responsive and well-structured designs. CSS supports various measurement units, which can be categorized into absolute and relative units.

px (pixels):
Represents a single dot on the screen. Pixels are the most commonly used unit in web design.
example:
.box {
width: 200px;
height: 100px;
}

pt (points):
Traditionally used in print media, 1pt equals 1/72 of an inch.
example:
.box {
font-size: 12pt;
}

cm (centimeters):
Used for specifying dimensions in centimeters.
example:
.box {
width: 5cm;
}

mm (millimeters):
Used for specifying dimensions in millimeters.
.box {
width: 50mm;
}

in (inches):
Used for specifying dimensions in inches.
example:
.box {
width: 2in;
}

pc (picas):
Used in print media, 1pc equals 12pt.
example
.box {
width: 2pc;
}

% (percentage):
Defines sizes relative to the parent element.
example
.box {
width: 50%; /* 50% of the parent element’s width */
}

em:
Relative to the font size of the element. If the font size of the element is 16px, 1em equals 16px.
example:
.box {
font-size: 2em; /* 32px if the parent font size is 16px */
}

rem (root em):
Relative to the font size of the root element (`<html>`). If the root font size is 16px, 1rem equals 16px.
example:
.box {
font-size: 1.5rem; /* 24px if the root font size is 16px */
}

vw (viewport width):
Relative to 1% of the width of the viewport.
example:
.box {
width: 50vw; /* 50% of the viewport width */
}

vh (viewport height):
Relative to 1% of the height of the viewport.
example:
.box {
height: 50vh; /* 50% of the viewport height */
}

vmin:
Relative to 1% of the viewport’s smaller dimension (width or height).
example:
.box {
width: 50vmin; /* 50% of the smaller viewport dimension */
}

vmax:
Relative to 1% of the viewport’s larger dimension (width or height).
example:
.box {
width: 50vmax; /* 50% of the larger viewport dimension */
}

ch:
Relative to the width of the “0” (zero) character in the element’s font.
example:
.box {
width: 20ch; /* Width of 20 “0” characters */
}

ex:
Relative to the height of the “x” character in the element’s font.
example:
.box {
height: 5ex; /* Height of 5 “x” characters */
}

Example Usage in a Single HTML Document

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Measurement Units</title>
<style>
.pixel-box {
width: 200px;
height: 100px;
background-color: lightblue;
}
.percentage-box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.em-box {
width: 10em;
height: 5em;
background-color: lightcoral;
}
.rem-box {
width: 20rem;
height: 10rem;
background-color: lightgoldenrodyellow;
}
.viewport-box {
width: 50vw;
height: 50vh;
background-color: lightpink;
}
.minmax-box {
width: 20vmin;
height: 20vmax;
background-color: lightgray;
}
.character-box {
width: 30ch;
height: 10ex;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class=”pixel-box”>200px x 100px</div>
<div class=”percentage-box”>50% width</div>
<div class=”em-box”>10em x 5em</div>
<div class=”rem-box”>20rem x 10rem</div>
<div class=”viewport-box”>50vw x 50vh</div>
<div class=”minmax-box”>20vmin x 20vmax</div>
<div class=”character-box”>30ch x 10ex</div>
</body>
</html>

CSS website design

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:
Example
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links – change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops)

Example:

/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
/* Responsive layout – makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Comments

No comments yet. Why don’t you start the discussion?

Class 9 | Cascading Style Sheet | Website Design Notes

Comments

Leave a Reply Cancel reply