Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links...
-
Upload
dayna-lang -
Category
Documents
-
view
215 -
download
0
Transcript of Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links...
![Page 1: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/1.jpg)
CIS 204 Intro to Website Development
Tutorial #3 Cascading Style Sheets
![Page 2: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/2.jpg)
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>
![Page 3: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/3.jpg)
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.
![Page 4: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/4.jpg)
CSS – Style RuleA style sheet is a collection of rulesFormatSelector {
property1: value1;property2: value2;property3: value3;…
}
![Page 5: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/5.jpg)
CSS – Style Ruleh1{
color: yellow;text-align: center;
}Colors (color: color_value;)
Name, Hex code, RGB tripletBlack, #000000, (0,0,0)Page 141 has a list.On the web
http://www.w3.org/TR/css3-color/#svg-color
![Page 6: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/6.jpg)
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>
![Page 7: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/7.jpg)
CSS – Embedded Style <style type = "text/css">h1 {
color: blue;text-align: center;
}h2 {
color: green;}</style>
![Page 8: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/8.jpg)
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>
![Page 9: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/9.jpg)
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
![Page 10: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/10.jpg)
CSS - CommentsComments
In CSS comments are wrapped in /* */
/*Everything In here Is a CSSComment*/
![Page 11: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/11.jpg)
CSS Background ColorIn CSS background-color
h1{background-color: gray;color: blue;
}
![Page 12: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/12.jpg)
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” />
![Page 13: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/13.jpg)
CSSCSS styles can be applied for all HTML tagsa {
color: orange;}body{
background-color: white;}
![Page 14: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/14.jpg)
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.
![Page 15: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/15.jpg)
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
![Page 16: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/16.jpg)
Transforming TextCapitalize – Capitalized the first letter of each
wordLowercase UppercaseNone – Removes and of the other values
h1{
text-transform: uppercase;}
![Page 17: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/17.jpg)
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.
![Page 18: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/18.jpg)
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;
![Page 19: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/19.jpg)
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;
}
![Page 20: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/20.jpg)
CSS- Text AlignmentCan use text-align propertyLeftRightCenterJustify
h1{text-align: center;
}
![Page 21: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/21.jpg)
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.
![Page 22: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/22.jpg)
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;
![Page 23: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/23.jpg)
CSS - LabModify firstpage.hml:1. Make the h4 tag in italics (Using CSS)2. Add a new paragraph tag3. Added link to http://www.dmacc.edu in the
new paragraph4. Modify the link to have an overline style5. Modify the link to have a font-size of 3em;6. Change the background-color of the body to
be #00FFFF and paragraph to #90EE90
![Page 24: Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To Email me Local.](https://reader036.fdocuments.us/reader036/viewer/2022062804/56649e9f5503460f94ba113d/html5/thumbnails/24.jpg)
CSS ValidationValidate the CSS similar to the way we did
the HTMLCan alert of possible errorshttp://jigsaw.w3.org/css-validator/