Embed Size (px)
DESCRIPTION
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 HTML page marks up content/CSS defines how content will look - PowerPoint PPT Presentation
Citation preview
CSSPrecise 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 pageo 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 screeno 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 codeo <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
h1 { font-family: Times; color: black; }
p { font-family: Times; color: black; }
<body><h1>Hey</h1><p>Some paragraph</p></body>
body { font-family: Times; color: black;
HTML Too Much CSS All You Need
<p> will inherit the 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/pagecolor: defines color of fontfont-family: defines font typefont-size: defines size of fontmargin: change white space above or belowtext-align: justifies or centers textfont-weight: defines amount of boldinglist-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
3rd MethodThe 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
ExampleOne 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 elemento They are most often used to mark page divisions (<div>)
• Examples:o <div id=“container”>Content goes here</div>o <div id=“ banner”></div>o <div id=“content”></div>o <div id=“sidebar”></div>o <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 IDo Each page can only have one element with that IDo 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 Tagsh1 {
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 TargetingHTML:
<div id=“container”>
CSS:
#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>
• CSSo .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.
<a href=“http://markdpepper.com”>Home</a>
<a class=“bodylink” href= “http://wikipedia.org/spider-man”>Spider-Man</a>
a.link { font-family: arial, sans-serif; font-size: 12px; }
a.bodylink { font-family: arial, sans-serif; font-size: 15px; color: green; }
HTML CSS
Note that the class target is now written:tag.classname {
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
Numbero 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 classo I can address everyone in the Digital Document Design at once. I can
send out a course email.
Class TargetingHTML:
<p class=“stylized”><ul class=“stylized”>
CSS:
.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 TargetingHTML:
<p class=“stylized”><ul class=“stylized”>
CSS:
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
h1 {
}
Just type the tag name.
IDs
#column {
}
Pound sign with ID name you assigned.
Classes
.script {
}
Period withclass nameyou assigned.
Classes
ul.script {
}
Tag, period,and classname.
Span ClassesA 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;}
IframeWhen embedding a video from Youtube:• Click Share• Click Embed• Copy Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/0oYH8OVseQE" frameborder="0" allowfullscreen></iframe>
Without CSS, this will follow normal stack order.
IframeSince 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).
