Introduction to JavaScript
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1CSS basicsCSS writing optionCSS rulesId,s and ClassesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan2Font propertiesControlling text with CSSStyling linksStyling backgroundStyling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan3CSS works by allowing you to associate rules with the elements that appear in a web pageThese rules govern how the content of those elements should be renderedBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan4A rule consists of A selector: element or elements the declaration applies toDeclaration: how the elements referred to in the selector should be styledproperty: which is the property of the selected elementvalue: which is a specification for this property
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan5To control the presentation of an element, you need to know the corresponding propertiesProperties with related functionalities are grouped togetherExample:Properties to control the presentation of textBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan6Several properties allow you to control the appearance of text in your documentsThese properties directly affect the font and its appearance Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan7Common font properties:font-familyfont-sizefont-weightfont-stylefont-variantBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan8font-family:Specifies the typeface or family of font that should be usedCommon values:Arial, Courier/Courier New, Georgia, Times/Times New Roman and VerdanaExample:H1{font-family:arial}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan9font-size:Specifies the size of a fontCommon values:In pixels (12px,20px etc.)Absolut size (small, medium, lage, x-large etc.)Example:H1{font-size:20px}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan10font-weight:Specifies whether the font should be bold or normalCommon values:Normal, bold, bolder, lighter 100, 200, 300, 400, 500, 600, 700, 800, 900Example:H1{font-weight:bold}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan11font-style:Specifies whether the font should be normal, italic or obliqueCommon values:Normal, italic, obliqueExample:H1{font-style:italic}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan12font-variant:Specifies whether the font should be normal or small-caps (smaller version of upper case)Common values:Normal, small-capsExample:H1{font-variant:small-caps}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan13Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan14
selectorFont propertiesEnd of CSS ruleBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan15
Including stylesheetUsing h1 tagBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan16
colortext-alignvertical-aligntext-decorationtext-transformword-spacingletter-spacingBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan17color: specifies the color of the textP{color : green}text-align: horizontal alignment of the textLeft, right, center or justifyvertical-align:Vertical alignment of the textSub, super, top, middle, bottom
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan18text-decoration: specifies the whether the text should be underline, overline, line-through or blinking text-transform: text should be lowercase, uppercase or capitalizedletter-spacing:Specifies the space between lettersH1{letter-spacing:3px}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan19word-spacing:Specifies the space between wordsH1{word-spacing:4px}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan20Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan21
Basic propertiesClass declarationClass propertiesSecond class propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan22
Title classHorizontal lineBodytext classBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan23
color : Changes the color of the linksbackground-color : Highlights the link, as if it had been highlighted with a highlighter pentext-decoration : Underline, strike through, over-line, blinkBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan24Pseudo-classes of links:Link: Styles for links in generalVisited:Styles the links which are already visitedHover:Styles when some on hovering over a linkActive:Styles the links when a links is being clicked
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan25Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan26
a tag styleLink settingsVisited settingsHover settingsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan27
Link addedbackground-color:Specifies the background colorbackground-image:Specifies the background imagebackground-repeat:Specifies whether the image should repeat or notbackground-position:Where an image should be positionedBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan28Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan29
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan30
text and fontvertical alignwidth height background - color background - imageBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan31border :border-style (solid, dashed, doted, double etc.)border-color border-bottom (solid, dashed, doted, double etc.)padding Padding-leftPadding-rightPadding-toppadding-bottomBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan32Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan33
Table settingsTh settingsTd settingsTr settingsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan34
Font propertiesControlling text with CSSStyling linksStyling backgroundStyling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan35Chapter 7,8. Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 36Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References
