Upload
sabina
View
21
Download
0
Embed Size (px)
DESCRIPTION
WDV 101 Intro to Website Development. Tutorial #3 Cascading Style Sheets. Review: Last Class. Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission. Tutorial #2 Review - Anchors. Links to Site - PowerPoint PPT Presentation
Citation preview
WDV 101 Intro to Website Development
Tutorial #3 Cascading Style Sheets
Review: Last ClassImage sizingPathnames Project
Default PathRelative PathAbsolute Path
Blackboard Homework Submission
Tutorial #2 Review - AnchorsLinks to Site
<a href = http://www.dmacc.edu>DMACC </a>
Internal Links<section id = “top”> </section><a href=“#top”>Go to Top <a/>
Mail To<a href=“mailto:[email protected]”>Email me
</a>Local Links
<a href=“page2.html”> Page2</a>
Cascading Style Sheets (CSS)CSS – Used to format the web page
Bold, Italics, fonts, outlining, highlighting, positioning
AdvantagesConsistencyEasy modification of a lot of codeMore flexible formatting.
CSS – Style RuleA style sheet is a collection of rulesFormatSelector {
property1: value1;property2: value2;property3: value3;…
}
CSS – Style Ruleh1{
color: yellow;text-align: center;
}Colors (color: color_value;)
Name, Hex code, RGB tripletBlack, #000000, RGB(0,0,0)Page 141 has a list.On the web
http://www.w3.org/TR/css3-color/#svg-color
CSSInline Style Sheet<h1 style = “color: orange;”> Orange </h1>Embedded Style Sheet
Wrapped in <style> tagsPut in the head section
<style type= “text/css”>style rules
</style>
CSS – Embedded Style <style type = "text/css">h1 {
color: blue;text-align: center;
}h2 {
color: green;}</style>
CSS – Lab1. Modify Firstpage.html – Add Color to h1 and
h2 tags using CSS 2. Move“hello world” inside of a paragraph tag
if it’s not already there.<style type = "text/css">h1 {
color: blue;}h2 {
color: green;}</style>
External Style SheetsStyling across multiple pages can be handled
with external cssUsed a link element in the head sectionSame code but in its own file
<link href= “url” rel=“stylesheet” type=“text/css” />
Good practice for styling to build it locally then copying the CSS to an external file
The Link ElementLink element is used to link an external style
sheet into a web page.Placed in the head section
<link href=“url” rel=“stylesheet” type =“text/css” />
CSS - CommentsComments
In CSS comments are wrapped in /* */
/*Everything In here Is a CSSComment*/
CSS Background ColorIn CSS background-color
h1{background-color: gray;color: blue;
}
CSSCSS styles can be applied for all HTML
elementsa {
color: orange;}body{
background-color: white;}
FontsFont is a distinct set of charactersFont Family – A set of fonts with similar
characteristicsIn CSS the font-family property can be used
change the font.Font-family: Font1, Font2, …, GenericFont;Font-family: “Times New Roman”, Times, serif;
Fonts with spaces need to be in quotes.
Fonts - SizeFont-size: size;Unit of Measurements
Absolute unitsRelative units
Centimeters (cm)/Millimeters (mm)Inches (in)Points (pt) – 1/72 of one inchPixels (px)Em – Roughly equal to the size of the letter MPercent
CSS – More text formattingItalic – In CSS use font-styleBold – In CSS use font-weighth2{
font-style: italic;font-weight: bold;
}
HTML5 CSS
<strong> Font-weight: bold;
<em> Font-style: italic;
Transforming TextCapitalize – Capitalized the first letter of each
wordLowercase UppercaseNone – Removes and of the other values
h1{
text-transform: uppercase;}
Transforming TextOther text options:Letter-spacing
White space between lettersWord-spacing
White space between wordsText-indent
How much to indent the first line of each paragraph
Line-heightWhite space between lines.
Text Transform - LabModify your firstpage to have1. h1 tags in uppercase2. h2 in lowercase3. Change the paragraph font to "Courier
new", monospace4. Change paragraph font size to 2em;5. Add a CSS Comment at the start of the style
saying This style provided by: <your name>6. Add letter spacing to h4 to 25px;
CSS – Font Shorthand For fonts you could type out all properties or
use the shorthandDoes not have to have all but needs to be in
orderFont styleFont weightFont variantFont sizeFont family
h3{font: italic bold 1em Courier monospace;
}
CSS- Text AlignmentCan use text-align propertyLeftRightCenterJustify
h1{text-align: center;
}
CSS – Anchor UnderlineAnchor tags (links) can be modified with CSSText-decoration can be used to modify the
default underline of a linkOptions are none, underline (done by
default), overline or line-through a{
text-decoration: none;}
This can be useful for setting up a menu of links where you don’t want the line.
CSS - LabModify firstpage_css.hml:1. Make the h4 tag in italics (Using CSS)2. Add a link to http://www.dmacc.edu (if it’s
not there)3. Modify the link to have an overline style4. Modify the link to have a font-size of 3em;5. Change the background-color of the body to
be #00FFFF and paragraph to #90EE90
CSS ValidationValidate the CSS similar to the way we did
the HTMLCan alert of possible errorshttp://jigsaw.w3.org/css-validator/