1. CSS Text Properties
a. Font-family property
Within the
<style></style>tag add the font-family property to change the font.
font-family : "Helvetica", sans-serif;The font within the quotations will be applied with priority.
If the font isn't appliable the one behind the commawill be applied.
sans-serif, serif, fantasy, monospace, and cursive.b. Font size property
within the
<style></style>tag add one of the following units
font-size : 11px; = pixel
font-size : 1.5em; = proportional size
~etc~c. font style property
within the
<style></style>tag add
font-style : italic;d. CSS font property shorthand
the three font properties family, size, style can be declared together
font: italic 13px fantasy;e. font weight property
The font weight is used to change the thickness of the font
within the<style></style>tag add
font-weight : bold;f. line-height property
The line height is used to change the height of the text
within the<style></style>tag add
line-height: 1.5em;g. text-align property
The text align property changes the text position.
within the<style></style>tag add
text-align: center;h. text-decoration property
This property creates an undeline but isn't used alot
within the<style></style>tag add
text-decoration: underline;CSS Inheritance
Most of the properties learned are inherited. Once declared in the body section all of the parts in body will take on the properties unless otherwise declared.
The child elements take on the properties of the parent element.
2. CSS grouping elements
a. The Span Tag
Use the
<span></span>tag to change parts within tags.
creates an inline element
****** (within <style> tag) ******
.part1{
font-style : italic;
}
****** (within <body> tag) *******
<h3>Why I <span class="part1">Love</span> Cats</h3>
********************************** b. The Div Tag
Use the
<div></div>tag to group multiple tags together
creates a block element
****** (within <style> tag) ******
#information{
font-weight : bold;
}
****** (within <body> tag) *******
<div id = information>
<h3>Why I <span class="part1">Love</span> Cats</h3>
<p>
This is a random sentence<br>
Roses are red violets are blue<br>
When are they gonna deliver my new laptop...
</p>
</div>
**********************************
3. CSS width, height, and overflow
a. Div width,height
Just add a (width : "some-value";) and (height : "somevalue";)
****** (within <style> tag) ******
#information{
background-color : orange;
width : 70%;
height : 180px;
}
****** (within <body> tag) *******
<div id = information>
<h3>Why I <span class="part1">Love</span> Cats</h3>
<p>
This is a random sentence<br>
Roses are red violets are blue<br>
When are they gonna deliver my new laptop...
</p>
</div>
********************************** b. Div overflow
Overflow happens when the content of the
<div>tag cannot be shown within the given width and height
The default is set so that the overflow spills over the edge
(overflow: visible;)
overflow: hidden => hides the excess
overflow: auto => creates a scrollbar for the Div
-> The overflow can be divded into the X and Y dimentions
overflow-y: auto;
overflow-x: hidden;4. CSS Box Model
All tags within the webpage is considered as a box divided into
4 sections of content, padding, border and margin
a. Margins
Margins are invisible spacing between the boxes
margin: 10px => makes the margins on all sides 10px
margin: 10px 11px 12px 13px => top, right, bottom, left margin
margin-top,margin-right,margin-bottom,margin-left
=> can be specified seperately
margin: auto => cneter Divs on a pageb. Borders
Borders are visible spacing around the content
Think of them like picture frames
border: 6px ridge red;
border: 6px double red;
border: 6px groove red;
border: 2px dashed red;c. Padding
Adding borders may make the content of the box hard to read by being too close to the text
Padding allows for space between the frame and the text
padding: 6px;5. CSS Position
a. Relative Positioning
You can move the elements on your page while keeping the default
format of the page
#landscape{
position: relative;
top: 20px;
left: 10px;
}b. Absolute Positioning
You can move the elements on your page without regard for
the default format
#landscape{
position: relative;
top: 20px;
left: 10px;
}c. Z-Indexing
You have to add indexing in order to specify which box goes on top
The higher value index gets placed on top
#landscape {
width: 250px;
position: absolute;
top: 20px;
left: 10px;
z-index: 1;
}d. Fixed Positioning
The element stays on the same spot of the page even if you scroll down
ex)
#landscape{
position: fixed;
top: 220px;
left: 10px;
}e. Floating elements
You can make Divs wrap around other Divs using float
float: left;
float: right;You can use clear in order to stop divs from stacking
on top of each other
clear: both;