Embed Size (px)
Citation preview
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>
<head><style>
body {background-color: linen;}h1 {color: maroon;margin-left: 40px;}
</style></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
•
•
•
•
•
•
•
•
•
•
• <p>
<p>Every paragraph will be affected by the style.</p><p id="para1">Me too!</p><p>And me!</p>
p {text-align: center;color: red;
}
•
•
•
<p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p>
#para1 {text-align: center;color: red;
}
•
•
<h1 class="center">Red and center-aligned heading</h1><p class="center">Red and center-aligned paragraph.</p>
.center {text-align: center;color: red;
}
•
•
h1 {text-align: center;color: red;
}h2 {
text-align: center;color: red;
}p {
text-align: center;color: red;
}
h1, h2, p {text-align: center;color: red;
}
•
<h1>Welcome to My Homepage</h1><div>
<h2>Lorem ipsum dolor sit.</h2><p>Lorem ipsum dolor sit.</p>
</div><p>Lorem ipsum dolor sit.</p>
div p {background-color: yellow;
}
•
<h1>Welcome to My Homepage</h1><div>
<h2>Lorem ipsum dolor sit.</h2><p>Lorem ipsum dolor sit amet.</p>
</div><div>
<span><p>I will not be styled.</p></span></div><p>Lorem ipsum dolor sit amet.</p>
div > p {background-color: yellow;
}
•
<h1>Welcome to My Homepage</h1><div>
<h2>Lorem ipsum dolor sit.</h2><p>Lorem ipsum dolor sit amet.</p>
</div><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
div + p {background-color: yellow;
}
•
•
•
p {color: red;/* This is a single-line comment */text-align: center;
}
/* This isa multi-linecomment */
•
<h1 style="background-color: blue;">Hello World!</h1>
<h1 style="color:Tomato;">Hello World</h1>
•
•
•
<h1 style="border:2px solid Violet;">Hello World</h1>
•
•
•
•
<h1 style="background-color:rgb(255, 99, 71);">...</h1><h1 style="background-color:#ff6347;">...</h1><h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
•
•
body {background-color: lightblue;
}
body {background-image: url("paper.gif");
}
body {background-image: url("img_tree.png");background-repeat: no-repeat;
}
body {background-image: url("img_tree.png");background-repeat: no-repeat;background-position: right top;
}/* OR */body {
background: url("img_tree.png") no-repeat right top;}
•
p {padding-top: 5px;padding-bottom: 5px;padding-right: 10px;padding-left: 10px;
}
p {padding: 5px 10px 5px 10px;/* [top] [right] [bottom] [left] */
}
p {padding: 5px 10px; /* [top & bottom] [left & right] */
}
p {margin-top: 5px;margin-bottom: 5px;margin-right: 10px;margin-left: 10px;
}
p {margin: 5px 10px 5px 10px; /* [top] [right] [bottom] [left] */
}
p {margin: 5px 10px; /* [top & bottom] [left & right] */
}
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: dotteddashed solid double;}
p.one {border-style: solid;border-width: 5px;
}p.two {
border-style: solid;border-width: medium;
}p.three {
border-style: dotted;border-width: thick;
}p.four{
border-style: solid;border-width: 2px 10px 4px 20px;
}
p.one {border-style: solid;border-color: red;
}p.two {
border-style: solid;border-color: green;
} p.three {
border-style: solid;border-color: red green blue yellow;
}
•
p {border: 5px solid red;
}
•
•
•
•
h1 {color: red;color: #FF0000;color: rgb(255, 0, 0);
}
h1 {text-align: center;}h2 {text-align: left;}h3 {text-align: right;}div {text-align: justify;}
a {text-decoration: none;}h1 {text-decoration: overline;}h2 {text-decoration: line-through;}h3 {text-decoration: underline;}
p.uppercase {text-transform: uppercase;}p.lowercase {text-transform: lowercase;}p.capitalize {text-transform: capitalize;}
p {text-indent: 50px;}
h1 {letter-spacing: 3px;}h2 {letter-spacing: -3px;}
p.small {line-height: 0.8;}p.big {line-height: 1.8;}
h1 {word-spacing: 10px;}h2 {word-spacing: -5px;}
h1 {text-shadow: 3px 2px red;}
p {font-family: "Times New Roman", Times, serif;
}
•
•
p.normal {font-style: normal;}p.italic {font-style: italic;}p.oblique {font-style: oblique;}
h1 {font-size: 40px;
}
•
•
•
•
h1 {font-size: 2.5em; /* 40px/16=2.5em */}h2 {font-size: 1.875em; /* 30px/16=1.875em */}p {font-size: 0.875em; /* 14px/16=0.875em */}
p.normal {font-weight: normal;}p.thick {font-weight: bold;}
h1.txt-resp{font-size: 10vw;}
<head>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Some Font Awesome icons:</p><i class="fa fa-cloud"></i><i class="fa fa-heart"></i><i class="fa fa-car"></i><i class="fa fa-file"></i><i class="fa fa-bars"></i>
<head>
<link rel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons">
<p>Some Google icons:</p><i class="material-icons">cloud</i><i class="material-icons">favorite</i><i class="material-icons">attachment</i><i class="material-icons">computer</i><i class="material-icons">traffic</i>
/* unvisited link */a:link {color: red;}
/* visited link */a:visited {color: green;}
/* mouse over link */a:hover {color: hotpink;}
/* selected link */a:active { color: blue;}
•
•
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad1 {height: 200px;/* For browsers that do not support gradients */background-color: red; /* Standard syntax (must be last) */background-image: linear-gradient(red, yellow);
}
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
#grad1 {height: 150px;width: 200px;/* For browsers that do not support gradients */background-color: red; /* Standard syntax (must be last) */background-image: radial-gradient(circle, red, yellow, green);
}
h1 {/* [x-offset] [y-offset] [blur] [color] */text-shadow: 2px 2px 5px red;
}
div {/* [x-offset] [y-offset] [blur] [color] */box-shadow: 10px 10px 5px grey;
}
•
•
•
•
•
•
•
•
•
span {display: block;
}
li {display: inline;
}
h1.hidden {display: none;
}
•
•
•
•
•
div.relative {position: relative;left: 30px;
}
div.fixed {position: fixed;bottom: 0;right: 0;
}
•
•
•
div.relative {position: relative;width: 400px;height: 200px;
}div.absolute {
position: absolute;top: 80px;right: 0;width: 200px;height: 100px;
}
div.sticky {position: sticky;top: 0;background-color: green;
}
•
•
•
img {position: absolute;left: 0px;top: 0px;z-index: -1;
}
<div class="container"><div class="topleft">Top Left</div><div class="topright">Top Right</div><div class="center">Centered</div><div class="bottomleft">Bottom Left</div><div class="bottomright">Bottom Right</div>
</div>
.bottomleft {position: absolute;bottom: 0;left: 0;
}.bottomright {
position: absolute;bottom: 0;right: 0;
}.center {
position: absolute;left: 0;top: 50%;width: 100%;text-align: center;
}
body {background-color: purple;color: white;font-size: 24px;
}.container {
position: relative;height: 50vh;
}.topleft {
position: absolute;top: 0;left: 0;
}.topright {
position: absolute;top: 0;right: 0;
}
div {overflow: visible;
}div {
overflow: hidden;}div {
overflow: scroll;}div {
overflow: auto;}div {
overflow-x: hidden; /* Hide horizontal scrollbar */overflow-y: scroll; /* Add vertical scrollbar */
}
•
•
-
-
-
-
img {float: right;
}
•
•
.div1 {float: left;width: 100px;height: 50px;margin: 10px;border: 3px solid #73AD21;
}.div2 {
border: 1px solid red;}.div3 {
float: left;width: 100px;height: 50px;margin: 10px;border: 3px solid #73AD21;
}.div4 {
border: 1px solid red;clear: left;
}
<h2>Without clear</h2><div class="div1">div1</div><div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div><br><br>
<h2>With clear</h2><div class="div3">div3</div><div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
•
•
•
.clearfix {overflow: auto;
}
.clearfix::after {content: "";clear: both;display: table;
}
•
•
•
selector:pseudo-class {property: value;
}
div {background-color: green;color: white;
}div:hover {
background-color: blue;}
<p>This is some text.</p><p>This is some text.</p><p>This is some text.</p>
p:first-child {color: blue;
}
p {color: #000000;
}
:not(p) {color: #ff0000;
}
<h1>This is a heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><div>This is some text in a div element.</div><a href="https://www.w3schools.com" target="_blank">W3Schools</a>
p:nth-child(2) {background: red;
}
<p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p>
p:nth-child(odd) {background: red;
}
p:nth-child(even) {background: blue;
}
<p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p><p>The fifth paragraph.</p><p>The sixth paragraph.</p><p>The seventh paragraph.</p><p>The eight paragraph.</p><p>The ninth paragraph.</p>
p:nth-child(3n+0) {background: red;
}
<p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p><p>The fifth paragraph.</p><p>The sixth paragraph.</p><p>The seventh paragraph.</p><p>The eight paragraph.</p><p>The ninth paragraph.</p>
p:nth-child(3n+1) {background: red;
}
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<meta name="viewport" content="width=device-width, initial-scale=1.0">
•
•
•
@media only screen and (max-width: 600px) {body {
background-color: lightblue;}
}
•
•
•
![FOLD LINE [DASHED LINES DO NOT PRINT]](https://img.pdfslide.us/doc/110x75/62e81a46a64b7b1ee606b123/fold-line-dashed-lines-do-not-print.jpg)
