LectureWhat are Styles?Types of StylesInline StylesWaste of TimeExternal Style SheetsStyle Sheet SyntaxRule StructureLinking to External Style SheetThe Style Sheet FileEnd ResultSAMPLES: Text PropertiesColorText-AlignFontText-DecorationText-Transform & Line HeightLinksImagesImages cont.Including ImagesBackground-ImageBackground-SizeBackground-RepeatBackground-AttachmentImage PositioningBackground-PositionBackgroundsListsLists, cont.Border PropertiesBorder Properties, cont.Size VocabularyMargin, Border, PaddingPaddingMarginBrowser Differences!Cascading Style Sheets (CSS)LectureCSS: Cascading Style SheetsWhat are Styles?•Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.•Set of formatting rules •Defines how a website is rendered•Available Properties:–Font and Text–Paragraph and Margin–Borders, Backgrounds and more...Types of Styles1. Inline Styles – Styles that you type “inline” with each tag<h1 style="text-align: center;">2. Internal Style sheets: Styles are defined for each page5<style type="text/css">555555 h1 { 55555555 color: purple;555555 }5555 </style>3. External style sheets: Styles are defined and linked to the entire site. <link rel="stylesheet" type="text/css" href="style.css">Inline Styles<h1Welcome!</h1>Welcome!style=" ">color: greenattributetag property valueOr: Old School styles:<h1 align=“center”>Waste of Time<h1 style="color: red"> Local </h1>5...5<h1 style="color: red"> County </h1>5...5<h1 style="color: red"> State </h1>5...5<h1 style="color: red"> Federal </h1>5... XExternal Style Sheets•Link pages to external definition of styles•Keep entire site matching•Easier to change style definitions all at once•Can also create special styles for mobile devices, accessibility devices, and printersStyle Sheet Syntaxp {margin-left: 2em;font-family: 'Trebuchet MS';color: white;}tag (selector)you are defining, followed by {closing }list of attributes separated by ;attribute name: valuedeclarerRule Structure•Rule StructureLinking to External Style Sheet<link rel="stylesheet" type="text/css" href="style.css">Link goes inside<head> elementhref must match style sheetfilenameThe Style Sheet Filetag redefinedEnd ResultSAMPLES: Text Properties•Color•Text-align•Letter-spacing•Word-spacing•Font•Text-Decoration•Text-TransformCascading Style Sheets (CSS): Pixel-Level Control with HTML Ease•Line-Height•Links•Images•Backgrounds•Lists•Borders•Margins/PaddingColorH1 { color: rgb(231,36,3); } H1 { color: red; } The color property can be specified 3 ways:Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseH1 { color: #FF0000; } Primary colors *Hex color code RGB – red, green, blueText-AlignH1 { color: #FF0000; text-align: center; letter-spacing: 5px; word-spacing: 15px;}The text-align property can center, justify, or align text to the right or left.Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseThe letter-spacing property adds space between letters; The word-spacing property adds space between words.FontH1{Font-family: (“Times New Roman,” Courier, Arial, Helvetica, serif, sans-serif, fantasy, cursive, monospace)Font-size: (percentage, small medium, large, x-small, xx-small, x-large, xx-large)Font-style: (normal, italic)Font-weight: (normal, bold)Color:black; } Note: look at reading for notes on web-safe fonts!Note: color is a text characteristic not font – so no font-color !!! Just color!{Font: italic bold serif;}The font property defines the family, size, style, weight, and variants of fonts.Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseText-DecorationThe text-decoration property allows the text to be underlined, overlined, or line-throughed. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Easeh2 {text-decoration: line-through}h2 {text-decoration: overline}h2 {text-decoration: underline}Text-Transform & Line HeightThe text-transform property allows the text to be capitalized. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Easeh2 {text-transform: capitalize;}CHILDREN’S LITERATURE AWARDSp {text-transform: capitalize;line-height:150%;}The line-height property allows the spacing between lines of a paragraph to be changed.NOTE: Links do best when included in this order. You may use all the font properties for links, too, and the background property.LinksThe links property defines how inactive, hovered, active, and visited links appear to the user.a:link {color: silver;} a:visited {color: yellow;}a:hover {color: orange; background: black; font-weight: bold; font-size: 150%;}a:active {color: green;}Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseImagesThere are a variety of properties that can be used with images. img {vertical-align:bottom;position:absolute; float:left;opacity:0.8; }Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseImages cont. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease•vertical-align: •bottom, top, center, •position: •Absolute – relative to main element•Fixed – relative to browser•Relative – relative to itself•Static – default•Z-index: stacking (bigger # - on top)•float: allows wrapping•left, right, none•opacity: •0.0 (transparent) – 1.0 (solid)img {vertical-align:bottom;position:relative;left: 100px;top:150px; float:left;opacity:0.8; }Including ImagesProperties for working with images include:•Background-image•Background-size•Background-repeat•Background-position•Background-attachmentCascading Style Sheets (CSS): Pixel-Level Control with HTML EaseBackground-Imagebody {background-image:url(‘mountainsandsky.jpg’);}The background-image property sets an image in the background of an element.Cascading Style Sheets (CSS): Pixel-Level Control with HTML EaseBackground-Sizebody {background-image:url(‘mountainsandsky.jpg’);background-size:220px 160px;}The background-size property sets the size of your background imageCascading Style Sheets (CSS): Pixel-Level Control with HTML EasePossible Values•In pixels•As percentage•Cover – large enough to cover•Contain – show full width and heightno-repeatBackground-RepeatBody { background-image:url(‘fairytransparent.gif’); background-repeat:no-repeat;}The background-repeat property sets an image in the background of an element
View Full Document
Unlocking...