css intro (1) - jordon brown · mc 4315 –web design and publishing css syntax css is composed of...
Post on 24-Jul-2020
6 Views
Preview:
TRANSCRIPT
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
CSSI n t r o d u c t i o n t o C S S
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A B O U T
CSS stands for Cascading Style Sheet. It defines how
HTML elements look, including color, position, size, etc.
CSS and HTML work hand in hand. HTML sorts out the
page structure. CSS defines how HTML elements are
displayed.
A benefit of CSS is that it allows you to separate style from
content. Using just HTML, all the styles and formatting are
in the same place, which becomes difficult when you have
multiple pages.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C S S S Y N T A X
CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document.
A style has three parts: selector, property, value
The selector points to the HTML element that you want to style
h1 { color: purple; }selector property value
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C S S S Y N T A X E X A M P L E S
For example, when we want to define the body background color, we know that we need to make changes to the body. Let’s say we want the body
background color to be blue, we would put…
body { background-color: blue; }
We can also give a selector more than one property, and each property has a value. In addition to background color, we can also change the text color.
We would put…
body { background-color: blue;
color: red; }
We can also define multiple selectors at a time. For example, all the h tags…
h1, h2, h3, h4 { font-size: 17px;
color: black; }
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
TYPES OFSELECTORS
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
T Y P E S E L E C T O R S
The most common and easy to understand selectors are type selectors. This targets element types on the page.
For example, to target all the paragraphs on the page:
THE HTML
<p>Here is a paragraph</p>
A CSS declaration ends with a semicolon, and declaration groups are surrounded by curly braces
THE CSS
p {
color: purple;
font-size: 12px;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
I D S E L E C T O R S
ID selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree.
THE HTML
<div id="intro">
<p>Here is a paragraph</p>
</div>
THE CSS
#intro {
background-color: tan;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C L A S S S E L E C T O R S
Class selectors work in a similar way. The major difference is IDs are typically applied once per page, while classes can be used as many times on
a page as needed.
THE HTML
<div id="intro">
<p class="first">
Here is a paragraph
</p>
</div>
THE CSS
.first {
font-size: 15px;
color: pink
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
D E S C E N D A N T S E L E C T O R S
These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many
levels deep as you need.
For example, to target only <em> elements in the first paragraph of the intro section:
THE HTML
<div id="intro">
<p class="first">
Here is a <strong>paragraph</strong>
</p>
</div>
THE CSS
#intro .first strong {
color: blue;
font-size: 15px;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
INTERNAL CSS
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
I N T E R N A L C S S
Internal styles are defined within the <style> element that is inside the <head>
<head>
<style>
p {
color: blue;
font-size: 13px;
}
</style>
</head>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
EXTERNAL CSS
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
E X T E R N A L C S S
With this method, all styling rules are contained in a single file, which is saved with the .css extension
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
This is a relative path since the stylesheet is in the same place as the index.html file
An absolute path would include an http:// link
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
COMMENTS
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C OMMEN T S
Comments are used to explain your code, and may help you when you edit the source code later. Comments are ignored by browsers
/* Comment goes here */
THE CSS
/* This is the intro section */
#intro {
background-color: tan;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
COMMON PROPERTIES
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
F O N T P R O P E R T I E S
font-family: Arial, Verdana, etc
font-size: 20px (use px)
font-weight: bold, normal
font-style: italic, normal
Example
p {
font-family: arial;
font-size: 13px;
}
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C O L O R A N D B A C K G R O U N D P R O P E R T I E S
color: color of text (black or #000000)
background-color: color of background (black or #000000)
background-image: url("name.jpg")
background-repeat: repeat-x, no-repeat
background-position: right top, center top, left top, center, etc
background-size: cover, 100% 100%
Example
body { body { p {
background-color: tan; background-image: url("name.jpg") color: red;
} background-position: center; }
}
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
T E X T P R O P E R T I E S
text-decoration: underline, overline, line-through
text-transform: uppercase, lowercase, capitalize
text-align: center, left, right
text-indent: first line indent (use px)
letter-spacing: space between characters (use px)
line-height: space between lines (use px)
Example
p {
text-align: left;
text-transform: uppercase;
}
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
B O R D E R P R O P E R T I E S
border-color: select color (black or #000000)
border-style: dotted, dashed, solid, none, double, groove, ridge, inset, outset
border-width: 5px
Shorthand Example
border: 1px solid red
Example
table {
border: 3px dotted green;
}
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
L I S T P R O P E R T I E S
list-style-type: circle, square, upper-roman, lower-alpha, none, etc
display: inline (makes list present horizontally – use this for navigation)
Example
ol { ul {
list-style-type: upper-roman; list-style-type: square;
} }
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
O T H E R P R O P E R T I E S
width: use px
height: use px or auto
float: used for positioning and wrapping around an element (left or right)
display: inline, block, none (See More)
position: absolute, relative, fixed, etc (See More)
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
MARG I N
Sets the size of the white space outside of the border
margin-top, margin-right, margin-bottom, margin-
left: use px
Shorthand Example
margin: 1px 1px 1px 1px (top, right, bottom, left)
margin: 10px 20px (top/bottom, left/right)
margin: 10px (all around)
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
P ADD I NG
Sets the size of the white space between the content and
border
padding-left, padding-right, padding-top, padding-
bottom: use px
Shorthand Example
padding: 1px 1px 1px 1px (top, right, bottom, left)
padding: 10px 20px (top/bottom, left/right)
padding: 10px (all around)
See More
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
M A R G I N A N D P A D D I N G
HTML
<div id="intro">
<p>This is my content</p>
</div>
CSS
#intro {
margin: 20px;
border: 1px solid blue;
padding: 20px;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
D I V I D E X A M P L E
Use div ids as containers for layout
We will use relative for positioning
You can size containers with px
#header {
position: relative;
width: 950px;
height: auto;
padding: 5px;
margin: auto;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C L A S S E X A M P L E
You can use classes more than once
.centered {
text-align: center;
}
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
U S I N G H T M L 5
HTML CSS
<header></header> header {
<nav></nav> width: 950px;
<section></section> height: 100px;
<footer></footer> padding: 10px; }
top related