Css File Is Embedded in Head AS:: Case), and Makes The Font Available To
Uploaded by
mrahroyCss File Is Embedded in Head AS:: Case), and Makes The Font Available To
Uploaded by
mrahroyCSS FILE IS EMBEDDED IN HEAD
AS:
Inside theheadelement are twolink
elements. The order of theselink
elements matters.
The browser first sees thelinkfor the
custom fontfont.css(shift.css in this
case), and makes the font available to
use in the page.
Next the browser sees
thelinkformain.css. Since the
browser now knows about the custom
font, we can use it frommain.cssto
style elements.
<html>
<head>
<link
href="http://s3.amazonaws.com/codecade
mycontent/courses/ltp/css/shift.css"
rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
CSS Rules
Selectors
color
Font size
Font weight n type
Background
border
Padding
Margin
Position
Clear (position) for next
element
Color
.jumbotron h1 {
color: red; or
#9933CC
H1 = heading
Jumbotron is a class name as ;
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192
countries.</p>
</div>
</div>
Fonts
Three fonts commonly
used with font-family are:
font-family: Arial,
Helvetica, sans-serif;
font-family: "Times New
Roman", Times, serif;
font-family: "Courier New",
Courier, monospace;
Selector
font-family: 'Shift', sans-serif;
Fonts
Text size can be measured
inpixels,ems, orrems.
We will use pixels here.
Weight is used to tell Bold
Itelic etc
Selector
font-size: 16px; (or 1em or 3
rem)
font-weight: bold;
Background
background-color: #cccccc;
background-image:
url('http://goo.gl/04j7Nn');
Selector
background-color: #cccccc;
Border
Theborderproperty sets the
width, style, and color of an
element's border
Padding
Thepaddingproperty creates space
between the content and border of
an element from each side.
The propertiespaddingtop,padding-bottom,
padding-left,
andpadding-rightare
available to set the padding
on each side of an HTML
element.
Selector
padding: 23px; or
padding-top: 0px;
padding-bottom: 0px;
Margin
Themarginproperty creates space for multiple HTML
elements. The margin is a transparent area outside the border
of an element.
The propertiesmargin-top,margin- bottom, margin-left,
andmargin-rightare available to set the margin on each
side of an HTML element.
To center an element, setmargin-right:
autoandmargin-left:auto. The margin
to the left and right will be equal and the
element will be centered.
.header h1{
margin:16px 32px;
margin:1rem 2rem;
}
Formatting different areas of
html
.class a{
}
a elements can be formatted by;
.class h1{
h elements can be formatted by;
Paragraph by P as:
}
.jumbotron p{
}
Display
.nav .container li{
display : inline;
CSS treats HTML elements like boxes. A box can be "block" or
"inline".
Block = (as a box in two
lines)
Inline = keep in same line
