Styles within HTML tags:
<p style="font-family: Arial; font-size: 20px; color: blue">A truly spectacular paragraph!</p>
<ol style="background-color: yellow;">
<li style="text-align:left">The Hawthorn Football Club</li>
</ol>
<strong> -- bold
<em> -- to italicize
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;border-left:1px solid black;">1</td>
<td style="padding:5px;border-left:1px solid black;">2</td>
</tr>
</tbody>
</table>
Following div will create a 50px X 50px rectangular block of red color:
<div style="width:50px; height:50px; background-color:red"></div>
A very long <span style="color:red;">text</span>!
CSS:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
Stylesheet.css:
/* A comment */
body {
background-color: #C6E2FF;
}
p {
color: green;
}
td {
height: 50px;
border: 1px dashed blue;
}
table {
border:1px solid black;
}
a {
color: #cc0000;
text-decoration: none;
}
img {
display: block;
height: 100px;
width: 300px;
border: 1px solid #4682b4;
margin: auto; -- puts the image in the center
}
div {
height: 50px;
width:120px;
border-color:#6495ED;
background-color:#BCD2EE;
border-style:dashed;
border-width:2px;
border-radius: 5px; -- gives a rounded corner
margin: auto; -- puts the entire block in the center (equal margin on all sides)
text-align: center; -- center the text within the div block
}
Selectors:
Cascading selection:
To select p nested within 2 divs:
<div>
<div>
<p>I like tacos!</p>
div div p {
/*CSS stuff!*/
}
The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using.
<p style="font-size: 0.5em">Half an em!</p>
Universal Selector: applies to all HTML elements on the page
* {
border: 1px dashed #3A5FCD;
}
Classes and IDs based selection:
ID: good for identifying single selector/element on a page.
#summary {
font-size: 20px;
color: #000000;
}
<p id="summary">summary</p>
Class: good for identify a class/group of elements on a page.
.list_item {
font-family: Vivaldi, cursive;
}
<p class="list_item">
Psuedo class selectors: - way of accessing state of HTML elements like mouse hover on element <a>:
a:link {
text-decoration: none;
color:#008B45;
}
a:hover {
color:#00FF00;
}
a:visited {
color:#EE9A00;
}
First child selector: applies to first child <p> element only
p:first-child {
font-family: cursive;
}
p:nth-child(2) { -- 2nd child p selected
font-family:Tahoma;
}
p:nth-child(3) { -- 3rd child p selected
color: #CC0000;
}
Draw circle with div:
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius:100%;
border:2px solid black;
}
Positioning:
Each element gets its own box. The outermost box of each element go all the way across the page.
display property -
• Block - element becomes a block box and takes up the whole width of page (no other element can sit with it on same line) -- this is default behavior in the absence of display property.
• Inline-block: element becomes a block box (no overlapping elements), but allows other elements on same line.
• Inline: allows overlapping and other elements on same line and does not honour dimension settings (height and width etc)
• None: hides the element
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:inline-block;
}
Following universal selector makes all boxes shown in the image above visible.
* {
border: 1px dashed blue;
}
Margins, border and padding: - Refer box model diagram above.
• Margin - outermost box - space around element.
• Border - edge of element
• Padding - space between content and border.
• Content - content within the element like text within <p>.
Margin: auto - sets equal margin on all sides (top, left, bottom and right)
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px;
}
Same goes with padding (padding-top, etc).
We can even set margin and padding on one line as:
padding: [top] [right] [bottom] [left];
Border takes - line size in px, solid/dotted/dashed/none, color.
Float property: no overlapping elements, used to place elements.
div {
height: 300px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
float: right;
}
p {
font-family: Verdana, sans-serif;
font-size: 20px;
width: 280px;
/*Add your CSS here!*/
float: right;
}
In the above snippet, both <p> and <div> contents will be floated to right however first element in the document will occupy the rightmost position followed by the next element in the doc floated to the right on the same line of page.
Clear:
If you tell it to clear: both, it will get out of the way of elements floating on the left and right!
#header { <!DOCTYPE html>
height: 50px; <html>
background-color: #F38630; <head>
margin-bottom: 10px; <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
} <title>Result</title>
</head>
.left { <body>
height: 300px; <div id="header"></div>
width: 150px; <div class="left"></div>
background-color: #A7DBD8; <div class="right"></div>
float: left; <div id="footer"></div>
margin-bottom: 10px; </body>
} </html>
.right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear:both;
}
Positioning:
1. Default is "static" position - so element is position relative to entire page.
Position: static
2. Absolute - position relative to its parent element that does not have position: static. In absence of such a parent the element will position relative to <html> element.
3. Relative - position relative to where it would have landed if it had default static positioning.
4. Fixed - anchors element to the browser window. Element won't change its position even if you scroll up or down. So this element seems to be glued to the screen and when one scrolls its always visible.
z-index property:
You can think of the z-index as a measure of importance: the higher an element's z-index, the higher it will be "stacked" on the page. Giving your header a z-index of 1 while not giving any of the other elements a z-index ensures that your header will sit "on top of" your other elements and won't get stuck behind them.
#header {
height: 50px;
width: 100%;
background-color: violet;
position:fixed;
z-index:1;
}
<p style="font-family: Arial; font-size: 20px; color: blue">A truly spectacular paragraph!</p>
<ol style="background-color: yellow;">
<li style="text-align:left">The Hawthorn Football Club</li>
</ol>
<strong> -- bold
<em> -- to italicize
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;border-left:1px solid black;">1</td>
<td style="padding:5px;border-left:1px solid black;">2</td>
</tr>
</tbody>
</table>
Following div will create a 50px X 50px rectangular block of red color:
<div style="width:50px; height:50px; background-color:red"></div>
A very long <span style="color:red;">text</span>!
CSS:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
Stylesheet.css:
/* A comment */
body {
background-color: #C6E2FF;
}
p {
color: green;
}
td {
height: 50px;
border: 1px dashed blue;
}
table {
border:1px solid black;
}
a {
color: #cc0000;
text-decoration: none;
}
img {
display: block;
height: 100px;
width: 300px;
border: 1px solid #4682b4;
margin: auto; -- puts the image in the center
}
div {
height: 50px;
width:120px;
border-color:#6495ED;
background-color:#BCD2EE;
border-style:dashed;
border-width:2px;
border-radius: 5px; -- gives a rounded corner
margin: auto; -- puts the entire block in the center (equal margin on all sides)
text-align: center; -- center the text within the div block
}
Selectors:
Cascading selection:
To select p nested within 2 divs:
<div>
<div>
<p>I like tacos!</p>
div div p {
/*CSS stuff!*/
}
The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using.
<p style="font-size: 0.5em">Half an em!</p>
Universal Selector: applies to all HTML elements on the page
* {
border: 1px dashed #3A5FCD;
}
Classes and IDs based selection:
ID: good for identifying single selector/element on a page.
#summary {
font-size: 20px;
color: #000000;
}
<p id="summary">summary</p>
Class: good for identify a class/group of elements on a page.
.list_item {
font-family: Vivaldi, cursive;
}
<p class="list_item">
Psuedo class selectors: - way of accessing state of HTML elements like mouse hover on element <a>:
a:link {
text-decoration: none;
color:#008B45;
}
a:hover {
color:#00FF00;
}
a:visited {
color:#EE9A00;
}
First child selector: applies to first child <p> element only
p:first-child {
font-family: cursive;
}
p:nth-child(2) { -- 2nd child p selected
font-family:Tahoma;
}
p:nth-child(3) { -- 3rd child p selected
color: #CC0000;
}
Draw circle with div:
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius:100%;
border:2px solid black;
}
Positioning:
Each element gets its own box. The outermost box of each element go all the way across the page.
display property -
• Block - element becomes a block box and takes up the whole width of page (no other element can sit with it on same line) -- this is default behavior in the absence of display property.
• Inline-block: element becomes a block box (no overlapping elements), but allows other elements on same line.
• Inline: allows overlapping and other elements on same line and does not honour dimension settings (height and width etc)
• None: hides the element
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:inline-block;
}
Following universal selector makes all boxes shown in the image above visible.
* {
border: 1px dashed blue;
}
Margins, border and padding: - Refer box model diagram above.
• Margin - outermost box - space around element.
• Border - edge of element
• Padding - space between content and border.
• Content - content within the element like text within <p>.
Margin: auto - sets equal margin on all sides (top, left, bottom and right)
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px;
}
Same goes with padding (padding-top, etc).
We can even set margin and padding on one line as:
padding: [top] [right] [bottom] [left];
Border takes - line size in px, solid/dotted/dashed/none, color.
Float property: no overlapping elements, used to place elements.
div {
height: 300px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
float: right;
}
p {
font-family: Verdana, sans-serif;
font-size: 20px;
width: 280px;
/*Add your CSS here!*/
float: right;
}
In the above snippet, both <p> and <div> contents will be floated to right however first element in the document will occupy the rightmost position followed by the next element in the doc floated to the right on the same line of page.
Clear:
If you tell it to clear: both, it will get out of the way of elements floating on the left and right!
#header { <!DOCTYPE html>
height: 50px; <html>
background-color: #F38630; <head>
margin-bottom: 10px; <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
} <title>Result</title>
</head>
.left { <body>
height: 300px; <div id="header"></div>
width: 150px; <div class="left"></div>
background-color: #A7DBD8; <div class="right"></div>
float: left; <div id="footer"></div>
margin-bottom: 10px; </body>
} </html>
.right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear:both;
}
Positioning:
1. Default is "static" position - so element is position relative to entire page.
Position: static
2. Absolute - position relative to its parent element that does not have position: static. In absence of such a parent the element will position relative to <html> element.
3. Relative - position relative to where it would have landed if it had default static positioning.
4. Fixed - anchors element to the browser window. Element won't change its position even if you scroll up or down. So this element seems to be glued to the screen and when one scrolls its always visible.
z-index property:
You can think of the z-index as a measure of importance: the higher an element's z-index, the higher it will be "stacked" on the page. Giving your header a z-index of 1 while not giving any of the other elements a z-index ensures that your header will sit "on top of" your other elements and won't get stuck behind them.
#header {
height: 50px;
width: 100%;
background-color: violet;
position:fixed;
z-index:1;
}
No comments:
Post a Comment