2021 08 20 - 01 55 24.Css

Chapter three
CSS lab
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts
Complied by Getachew B.
How use .css in body of html
<html>
<head>
<style>
font-family: verdana;
body { font-size: 20px;
background-color: lightblue; }
</style>
} </head>
<body>
h1 { <h1>My First CSS Example</h1>

<p>This is a paragraph.</p>
color: white;
</body>
text-align: center; </html>
}
p{
Here, all <p> elements on the page will be center-aligned, with a red text color :
• <html>
• <head>
• <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>
The CSS rule below will be applied to the HTML element with id="para1":
• <html>
• <head>
• <style>
• #para1 {
• color: red;
• }
• </style>
• </head>
• <body>
• <p id="para1">Hello World!</p>

• <p>This paragraph is not affected by the style.</p>
• </body>
In this example all HTML elements with class="center" will be red and center-aligned:
• <html>
• <head>
• <style>
• .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>
External styles are defined within the <link> element, inside the
<head> section of an HTML page:
• <html>
• <head>
• <link rel="stylesheet" href="mystyle.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
• <html>
• <head>
• <style>
• body {
• background-color: linen;
• }
• h1 {
• color: maroon;
• margin-left: 40px;
• }
• </style>
• </head>
• <body>
• <p>This is a paragraph.</p>
• </body>
Inline styles are defined within the "style" attribute of the relevant element:
• <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>
The style of this document is a combination of an external stylesheet, and internal style
• <html>
• <head>
• <link rel="stylesheet" type="text/css" href="mystyle.css">
• <style>
• h1 {
• color: orange;
• }
• </style>
• </head>
• <body>
• <p>The style of this document is a combination of an external stylesheet, and internal
style</p>
• </body>
• </html>
CSS Comments
.Comments are used to explain the code
• <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>
CSS Color Names
• <html>
• <body>
• <h1 style="background-color:Tomato;">Tomato</h1>
• <h1 style="background-color:Orange;">Orange</h1>
• <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
• <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
• <h1 style="background-color:Gray;">Gray</h1>
• <h1 style="background-color:SlateBlue;">SlateBlue</h1>
• <h1 style="background-color:Violet;">Violet</h1>
• <h1 style="background-color:LightGray;">LightGray</h1>
• </body>
CSS Background Color
• <html>
• <body>
• <h1 style="background-color:DodgerBlue;">Hello World</h1>
• <p style="background-color:Tomato;">
HTML (Hypertext Markup Language) is the code that is used to
structure a web page and its content.
• </p>
• </body>
• </html>
CSS Text Color
• <html>
• <body>
• <h3 style="color:Tomato;">Hello World</h3>
• <p style="color:DodgerBlue;">The content is essentially the elements which make up the page.</p>
• <p style="color:MediumSeaGreen;">The content is essentially the elements which make up the page..</p>
• </body>
• </html>
CSS Border Color
• <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 Color Values
• <html>
• <body>
• <p>Same as color name "Tomato":</p>
• <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

• <h1 style="background-color:#ff6347;">#ff6347</h1>
• <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
• <p>Same as color name "Tomato", but 50% transparent:</p>

• <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
• <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
• <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or
even transparent colors using RGBA or HSLA color values.</p>
• </body>
CSS Backgrounds
• <html>
• <head>
• <style>
• body {
• background-color: lightblue;
• }
• </style>
• </head>
• <body>
• <h1>Hello World!</h1>
• <p>This page has a light blue background color!</p>
• </body>
Here, the <h1>, <p>, and <div> elements will have different background colors:
• <html>
• <head> p{
background-color: yellow;
• <style> }
</style>
• h1 { </head>
• background-color: green; <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>
• div { We are still in the div element.
</div>
</body>
•} </html>
CSS Background Image
• <html>
• <head>
• <style>
• body {
• background-image: url("bgdesert.jpg");
• }
• </style>
• </head>
• <body>
• <p>This text is not easy to read on this background image.</p>
• </body>
By default, the background-image property repeats an image both horizontally and vertically .
• <html>
• <head>
• <style>
• body {
• background-image: url("gradient_bg.png");
• }
• </style>
• </head>
• <body>
• <p>Strange background image...</p>
• </body>
• </html>
The background-position property is used to specify the position of the background image.
<html>
<head>
<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>W3Schools 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>
Border style
<body>
• <html>
<h2>The border-style Property</h2>
• <head> <p>This property specifies what kind of border to
• <style> display:</p>
• p.dotted {border-style: dotted;} <p class="dotted">A dotted border.</p>
• p.dashed {border-style: dashed;} <p class="dashed">A dashed border.</p>
• p.solid {border-style: solid;} <p class="solid">A solid border.</p>
<p class="double">A double border.</p>
• p.double {border-style: double;} <p class="groove">A groove border.</p>
• p.groove {border-style: groove;} <p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
• p.ridge {border-style: ridge;} <p class="outset">An outset border.</p>
• p.inset {border-style: inset;} <p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
• p.outset {border-style: outset;} <p class="mix">A mixed border.</p>
• p.none {border-style: none;}
</body>
• p.hidden {border-style: hidden;}
</html>
• p.mix {border-style: dotted dashed solid double;}
• </style>
<html>
The border-width property specifies the width of the four borders. <head>
• <html> <style>
• <head> p.one {
• <style> border-style: solid;
• p.one { border-width: 5px;
• border-style: solid; }
• border-width: 5px;
• } p.two {
• p.two { border-style: solid;
• border-style: solid; border-width: medium;
• border-width: medium; }
• } p.three {
• p.three { border-style: dotted;
• border-style: dotted; border-width: 2px;
• border-width: 2px; }
• } p.four {
• p.four { border-style: dotted;
• border-style: dotted; border-width: thick;
• border-width: thick; }
• } p.five {
• p.five { border-style: double;
• border-style: double; border-width: 15px;
The border-color property is used to set the color of the four borders.
• <html>
• <head>
• <style>
• p.one {
<body>
• border-style: solid;
• border-color: red; <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.two {
<p class="two">A solid green border</p>
• border-style: solid; <p class="three">A dotted blue border</p>
• border-color: green;
• } <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>
• p.three { </body>
• border-style: dotted; </html>
• border-color: blue;
• }
• </style>
• </head>
The CSS margin properties are used to create space around elements, outside of any defined borders
• <html>
• <head>
• <style>
• div {
• border: 1px solid black;
• margin-top: 100px;
• margin-bottom: 100px;
• margin-right: 150px;
• margin-left: 80px;
• }
• </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>
• <html>
a{
• <head> text-decoration: none;
• <style> color: #008CBA;
• div { }
• border: 1px solid gray; </style>
</head>
• padding: 8px; <body>
• }
<div>
• h1 { <h1>text formatting</h1>
• text-align: center; <p>This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transform, and color properties.
• text-transform: uppercase;
The paragraph is indented, aligned, and the space between
• color: #4CAF50; characters is specified. The underline is removed from this colored
• } <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it
Yourself"</a> link.</p>
• p{ </div>
• text-indent: 50px; </body>
• text-align: justify; </html>
• letter-spacing: 3px;

2021 08 20 - 01 55 24.Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2021 08 20 - 01 55 24.Css

Uploaded by

Copyright:

Available Formats

Chapter three

h1 { <h1>My First CSS Example</h1>

• <p>Every paragraph will be affected by the style.</p>

• <p id="para1">Hello World!</p>

• <h1 class="center">Red and center-aligned heading</h1>

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

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

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

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

• <p>Same as color name "Tomato":</p>

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

• <p>Same as color name "Tomato", but 50% transparent:</p>

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

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

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

• <h2>Using individual margin properties</h2>

You might also like