cascading style sheet

css->server->higher capacity->world wide->connect

CSS was first proposed by Håkon Wium Lie on 10 October 1994. At the time, Lie was working with Tim Berners-Lee at CERN.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML .

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

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

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

CSS Syntax

PROPERTY - GREEN

VALUE - COLOR

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

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External CSS
Internal CSS
Inline CSS

External CSS

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

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

ouput

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.

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

h1 {
color: tomato;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

ouput

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.

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

CSS Color Names

<!DOCTYPE html>

<html>

<head>

h1 {

color: orange;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>

</html>

output

CSS Background Color

<!DOCTYPE html>

<html>

<head>

<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

CSS Text Color

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightgrey;

color: blue;

}

h1 {

background-color: black;

color: white;

}

div {

background-color: blue;

color: white;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

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

</body>

</html>

output

CSS Border Color

<!DOCTYPE html>

<html>

<head>

<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

CSS Lists

Unordered Lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Ordered Lists:

I. Coffee

II. Tea

III. Coca Cola

a) Coffee

b) Tea

c) Coca Cola

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

<h2>The list-style-type Property</h2>

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

<li>Coffee</li>

</ul>

<li>Coffee</li>

</ul>

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

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

</body>

</html>

output

CSS margin

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

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

output

css Table

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid;

}

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

</tr>

</table>

</body>

</html>

output

color gradient

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background-color: red; /* For browsers that do not support gradients */

background-image: linear-gradient(red, yellow);

}

</style>

</head>

<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

</body>

</html>

Output

css button

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>

<button class="button button5">Black</button>

</body>

</html>

output

Page Redirect using href and Id

Home.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>Sample page</h2>

<a href="main.html#para1">paragraph1</a>

<h3 style="color:orangered;background-color:yellowgreen;">Gradient Different Format</h3>

</div>

</div>

</div>

</div>

</body>

</html>

Main.html

<!DOCTYPE html>

<head>

<title>Document1</title>

</head>

<body>

</body>

<p id="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate adipisci alias labore ad, autem perspiciatis voluptas eum ab iure soluta, et assumenda explicabo magni maxime, minus at. Beatae, earum repudiandae.</p>

<br>

<p id="para1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, excepturi aspernatur earum nulla nostrum optio maxime atque mollitia reprehenderit possimus, cupiditate hic neque quo. Minus praesentium illo saepe? Facere, distinctio.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, excepturi aspernatur earum nulla nostrum optio maxime atque mollitia reprehenderit possimus, cupiditate hic neque quo. Minus praesentium illo saepe? Facere, distinctio.

</html>

Output

home.html

main.html

ProgramTechie

Welcome to ProgramTechie

Learn Programming languages

CSS

cascading style sheet

Three Ways to Insert CSS

External CSS

Internal CSS

Inline CSS

CSS Color Names

CSS Background Color

CSS Text Color

CSS Border Color

Unordered Lists:

Ordered Lists:

CSS margin

css Table

color gradient

css button

0 comments:

Post a Comment

Programming language

Categories

Pages