CSS properties

CSS propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1Summary of the previous lectureCSS basicsCSS writing optionCSS rulesId,s and ClassesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan2OutlineFont propertiesControlling text with CSSStyling linksStyling backgroundStyling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan31. CSS propertiesCSS 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, Pakistan41. CSS propertiesA 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 propertyBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan51. CSS propertiesTo 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, Pakistan62. Font propertiesSeveral 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, Pakistan72. Font propertiesCommon font properties:font-familyfont-sizefont-weightfont-stylefont-variantBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan82. Font propertiesfont-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, Pakistan92. Font propertiesfont-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, Pakistan102. Font propertiesfont-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, Pakistan112. Font propertiesfont-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, Pakistan122. Font propertiesfont-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, Pakistan132. Font propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan14selectorFont propertiesEnd of CSS rule2. Font propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan15Including stylesheetUsing h1 tag2. Font propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan163. Text propertiescolortext-alignvertical-aligntext-decorationtext-transformword-spacingletter-spacingBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan173. Text propertiescolor: 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, bottomBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan183. Text propertiestext-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, Pakistan193. Text propertiesword-spacing:Specifies the space between wordsH1{word-spacing:4px}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan203. Text propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan21Basic propertiesClass declarationClass propertiesSecond class properties3. Text propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan22Title classHorizontal lineBodytext class3. Text propertiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan233. Styling Linkscolor : 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, Pakistan243. Styling linksPseudo-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 clickedBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan253. Styling linksBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan26a tag styleLink settingsVisited settingsHover settings3. Styling linksBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan27Link added4. Styling Backgroundbackground-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, Pakistan284. Styling BackgroundBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan294. Styling BackgroundBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan305. Styling tablestext and fontvertical – alignwidth height background - color background - imageBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan315. Styling tablesborder :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, Pakistan325. Styling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan33Table settingsTh settingsTd settingsTr settings5. Styling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan34SummaryFont 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