CSS - Mark D. Pepper
advertisement
CSS
Precise Aesthetic
Control
Cascading Style Sheets
• Though they can be put in HTML header, usually a
separate page that the HTML links to
• Contains style commands for elements and tags on
the HTML page
o HTML page marks up content/CSS defines how content will look
• Will define colors, positions, white space, behaviors,
and much more
Inside the Box
• Imagine most every HTML element has an invisible
box around it
• With CSS we can define colors, borders, positions,
arrangements, margins, etc. of what these boxes
will do.
<h1>This is an H1 heading</h1>
This is an H1 heading
Block vs Inline
• The majority of elements are “Block.” This means
they will start on a new line on the left of the screen
o H1-H9, <p>, <ul>, <div>
• Many of these come with automatic margins on top
and bottom (lists automatically push out to the
right)
• A Firefox extension like Firebug or “Inspect Element”
in Chrome will help show you these so you can alter
them with CSS.
Inline
• Inline elements do not start on a new line, rather
they flow within the text based on where you put
them in the code
o <b>, <i>, <img>, <a>
• This word is bold.
• <p>This word is <b>bold</b>
• <p>Follow me<a href=“http://twitter.com”>
Here</a></p>
Linking to Style Sheet
• Create a new document in text editor and “Save
As” a .css file
• Type this into your <head> on html page:
<link href="stylesheet.css" rel="stylesheet"
type="text/css" />
• The bolded part above should correspond with
whatever you named the style sheet file
• Note this is a self-closing tag (like img) even though
normal links are not
Format: Selector and
Declarations
h1
{
font-family: Arial, sans-serif;
color: green;
font-size: 50px;
•
•
•
•
•
}
Element being defined
Open moustache bracket
Property followed by colon
Value followed by semi-colon
Close moustache bracket
Selectors & Declarations
h1
{
font-family: Arial, sans-serif;
color: green;
font-size: 50px;
}
• Properties cannot be made up. There are officially
named properties and must be spelled exactly.
• You can put as many properties as you need on a
selector.
• Order of declarations (usually) does not matter
Comments in CSS
• Are a bit different than HTML (of course)
h1
{
font-family: Arial, sans-serif; /*This defines font style of headers */
color: green; /* This will turn header font green */
font-size: 50px; /*This sets font point size for headers */
}
• Format is: /*
*/
• Has no effect on page; only there to remind you
what lines are doing
• Use as few or many as you want
Multiple Elements With
Same Values
• Sometimes you want multiple tags to do the same thing.
There is no need to write individual CSS for all of them
h1, h2, h3 {
font-family: Arial, sans-serif;
color: green;
}
• Write each tag out, separated with commas, and all
these headers will have the same properties and values
Inheritance
• When elements are nested inside other ones, they
become “children” to the “parent” element they
are inside of.
<body>
<h1>Hey</h1>
<p>Some paragraph</p>
</body>
Because of this, we can define a
font on the body (which is
everything) and that same font
will cascade to everything in the
document. So you don’t need to
define a font for the paragraphs,
lists, etc. (unless you want them
to be different from what you
define on the body).
Inheritance
HTML
<body>
<h1>Hey</h1>
<p>Some
paragraph</p>
</body>
Too Much CSS
All You Need
body {
h1 {
font-family: Times;
font-family: Times;
color: black;
color: black;
<p> will inherit the
}
p {
font-family: Times;
color: black;
}
Times New Roman
and black because it’s
a child of the <body>.
Only write <p>
declarations, or
something else, if it
needs to be different
from what’s defined
on body.
Some Basic CSS We Can
Use Now
background-color: defines bg color of
element/page
color: defines color of font
font-family: defines font type
font-size: defines size of font
margin: change white space above or below
text-align: justifies or centers text
font-weight: defines amount of bolding
list-style-type: removes or changes look of bullets
Important!
Margin (and later on, padding and border) can be
added or subtracted from all 4 sides of an element
with precision control. There are 3 ways to write it:
Precision One Side at a Time
h1 {
margin-top: 20px;
margin-bottom: 30px;
}
Type margin with a dash and the side
you want to change.
Top, bottom, left, or right.
All Four Sides at Once (different
amounts)
h1 {
margin: 20px 0px 30px 0px;
}
Just type margin then define all four
directions.
Direction order is top, right, bottom,
left (clockwise)
So this puts 20px on top, 0 on the
right, 30px on the bottom, and 0 on the
left
rd
3
Method
The third method defines all 4 sides at once if each
side is an equal amount:
margin: 20px;
Written this way, all 4 sides will have 20px;
The Need for IDS and Classes
• A tag will only act one way unless we use IDs and
Classes!
• An <a> (or any tag) will behave a certain way with
no CSS styling (browser default)
• We can go to the CSS and make the <a>s be a
different color, have no underline, etc.
• But we’re left with the problem that ALL <a>s will
then do that and sometimes we want one (or
some) <a>s to behave slightly differently
Example
One type of Link
Another type of Link
• With what we’ve learned so far, you couldn’t do
this. Without IDs and Classes, links could only look
one way.
IDs
• Short for identifier.
o An ID is a unique identifier for an element
o They are most often used to mark page divisions (<div>)
• Examples:
o
o
o
o
o
<div id=“container”>Content goes here</div>
<div id=“ banner”></div>
<div id=“content”></div>
<div id=“sidebar”></div>
<div id=“footer”></div>
They’re Attributes and
Written the Same Way
• IDs are written into the HTML with the tag/element
name, an equal sign, and the ID name in quotation
marks
• <p id=“fancyquote”>
o One paragraph that might be stylized differently from the rest of the
paragraphs on the page.
• <ul id=“navigation”>
o An unordered list that will be turned into a navigation bar with CSS
• NOTE: BOTH ID AND CLASS NAMES CAN BE MADE UP.
BUT YOU USUALLY WANT TO NAME BY FUNCTION
Rules
• IDs
o Each element can have only one ID
o Each page can only have one element with that ID
o Once you use an ID on a page, you can not use it on that page again. It
can be used again on a different page in the same site.
• You Can’t Do This:
o <div id=“footer” id=“container”> (has more than one ID)
o <div id=“column”>
o <ul id=“column”>
• You’ve got a div and an unordered list with the same ID.
• This will not validate and probably not give the effect you want.
Targeting Tags
h1
{
font-family: Arial, sans-serif;
color: green;
font-size: 50px;
}
• Note that tags are selected/hooked (the part before the
brackets) merely by writing the tag name.
body {
background-color: black;
}
ID Targeting
HTML:
CSS:
<div id=“container”>
#container {
width: 800px;
height: auto;
}
• IDs are targeted from the CSS with a pound
sign in front of the ID name
• The rest of the CSS syntax rules stay the
same
Classes
• Classes are much more flexible.
• They are not unique.
• Classes let you take a style that might be used often
in your document and apply it liberally all around.
• Classes also let you style an element differently from
how its styled by default without the class applied.
Target Multiple Elements
with Same Class
• <p class=“fancyscript”></p>
• <li class=“fancyscript”></p>
• CSS
o .fancyscript {
font: blackadder;
}
• Now any element you assign a “fancyscript” class
will appear in the blackadder font.
Two (or more) different
kinds of an element
• I often have different link styles for my navigation
versus inside the body text. Classes work wonders
here.
HTML
<a
href=“http://markdpepper.com”>Home</a>
<a class=“bodylink” href=
“http://wikipedia.org/spider-man”>SpiderMan</a>
Note that the class target is now
written:
tag.classname {
CSS
a.link {
font-family: arial, sans-serif;
font-size: 12px;
}
a.bodylink {
font-family: arial, sans-serif;
font-size: 15px;
color: green;
}
Stacking Classes
• I rarely do it, but unlike IDS, you can technically
stack multiple classes on an element
<img src=“groot.jpg” alt=“pic of groot”
class=“displayblock” class=“fancyborder” />
• Now this image, and just this image, will display as a
block with a decorative border. Images not given
these classes will behave per usual.
A Useful Metaphor
• Think of an ID as a student’s unique Student ID
Number
o This student ID# allows me to address one unique singular student. I can
send an email to just him or her.
• Think of a Class as a way to address every single
person who is a member of that class
o I can address everyone in the Digital Document Design at once. I can
send out a course email.
Class Targeting
HTML:
CSS:
<p class=“stylized”>
<ul class=“stylized”>
.stylized {
color: green;
font-size: 20px;
}
• Classes are targeted from the CSS with a
period in front of the class name
• Anything with that class name will have
these behaviors.
Class Targeting
HTML:
CSS:
<p class=“stylized”>
<ul class=“stylized”>
p.stylized {
color: green;
font-size: 20px;
}
• Only <p> tags with the class will have this
style. Other <p> tags without the style
attached (and the <ul> will ignore this style
and behave differently.
The 4 Types of Targeting
Tags
IDs
Classes
Classes
h1 {
#column {
.script {
ul.script {
}
}
}
}
Just type the Pound sign with Period with
Tag, period,
tag name. ID name you
class name
and class
assigned.
you assigned. name.
Span Classes
A span class is used to make divisions out of otherwise
inline text.
For example, without them, could you figure out how
to do this?
This is My Cool Title
Though we have <b> and <i> for inline effects, there
are no similar tags to make one letter big or one letter
colored.
Span Classes
<h1><span class=“bigletter”>T</span>his Is
My <span class=“blueletters”>Cool</span>
Title</h1>
.bigletter {
font-size: 50px;
}
.blueletters {
color: blue;
}
Iframe
When embedding a video from Youtube:
• Click Share
• Click Embed
• Copy Code
<iframe width="560" height="315"
src="https://www.youtube.com/embed/0oYH8OVseQ
E" frameborder="0" allowfullscreen></iframe>
Without CSS, this will follow normal stack order.
Iframe
Since normal stack order is rarely where you want it, you
can use CSS to make changes.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/0oYH8OVseQE"
frameborder="0" allowfullscreen></iframe>
iframe {
margin-left: 50px;
}
You can also change the pre-defined width and height
from Youtube’s code (just make sure to make equal
changes to both to keep the correct proportions).
![[#PFR-664] [ACCESS] Using em, percent, named for font sizes and](http://s3.studylib.net/store/data/008524257_1-e1b711369b412e0cc1e52963d3e370f9-300x300.png)
