Web Technologies and Programming Lecture 13

1Web Technologies and ProgrammingLecture 13 2CSS Properties3Summary of the previous lectureCSS basics. Versions of CSSAdvantages/Disadvantages of CSSCSS writing optionExternal style sheetInternal style sheetInline styleCSS rulesCSS Precedence OrderId,s and Classes4OutlineFont propertiesControlling text with CSSStyling linksStyling backgroundStyling tables51. 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 rendered61. 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 property71. 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 text82. Font propertiesWhen text is displayed in a browser it appears in a default font face, size, style, and color. Most browsers use the Times New Roman font face at approximately 12-point size and rendered in black. CSS settings permit you to change these default settings to bring a different look to your pages.Several properties allow you to control the appearance of text in your documentsThese properties directly affect the font and its appearance 92. Font propertiesCommon font properties:font-familyfont-sizefont-weightfont-stylefont-variant102.1 font-familyA generic description of a range of font types all having a similar design supported by all CSS capable browsersThe font-family property needs to be specified to change the browser's default setting from Times New Roman.Five generic font families are supported by Cascading Style Sheets:Serif (e.g., Times) Sans-serif (e.g., Arial or Helvetica) Cursive (e.g., Zapf-Chancery) Fantasy (e.g., Western) Monospace (e.g., Courier)112.1 font-familyA computer may provide additional font families that supplement generic font familiesYou cannot assume these additional families will be availableSo if used specify a generic font to use if the specific font family is not availableThe following font faces are typical on a Windows-based PC:arialarial narrowcomic sans mscourier newgeorgiaimpacttahomatimes new romanverdana122.1 font-family (Example)Example:h1, h2, h3, h4, h5, h6 {font-family: Arial Helvetica sans-serif}As with the tag proceed from the most unlikely to the most likely font familySimilar to attribute132.2 font-sizeThe font-size property is used to change the browser's default 12-point size. You can use pixels to set letter heights for special styling.In pixels (12px,20px etc.)Absolute size (small, medium, lage, x-large etc.)Two ways to specify:AbsoluteRelativeUsing a Keyword descriptionAs a percent of the default font size for a tag142.2 font-size (Absolute Font)millimeters (use mm)inches (use in)points (72 points per inch; use pt)pica (6 picas per inch; use pc)pixel (use px)Smallest display element on computer monitorCan specify decimal units:h1 {font-size: 0.5in}152.2 font-size (Relative Font)Specify according to relationship to the standard characterStandard characters: em and exEM UnitEqual to width of capital letter “M” in the default fontEX UnitEqual to the height of a lower case “x” in the default font162.2.1 Advantages of relative unit.Allows for scalable fontsMonitors vary in size of display and screen resolutionSpecifying a relative unit ensures a uniform viewing experience across the variety of monitors rendering your pageAs a scalable font:body {font-size: 150%}Use descriptive keywords: xx-small through xx-large:b {font-size: xx-large}172.3 font-styleSpecifies appearance of fontBrowser default is the normal style.Syntax: font-style: style_typeStyle Types:normalitalicoblique (similar to italic)Example:p {font-style: italic}182.3 font-weightSpecifies the degree of “boldness” of the typeSpecifies whether the font should be bold or normalSpecified from 100-900 in intervals of 100100 is lightest900 is heaviestExample:p {font-weight: 300}192.3 font-variantSpecifies whether the font should be normal or small-caps (smaller version of upper case)Attribute values:normalsmall-caps (EXAMPLE) Uppercases but reduces font sizeSpecifying normal returns the text to standard display. Example:H1{font-variant:small-caps}202.3 font PropertyPools together a variety of text and font attributesAttribute values are positional: font-style specified first, font-variant second, font-weight lastExample:h2 {font: italic small-caps bold}(instead of)h2 {font-style:italic; font-variant:small-caps; font-weight:bold}212. Font properties (Example)22selectorFont propertiesEnd of CSS rule2. Font properties (Example)23Including stylesheetUsing h1 tag2. Font properties (Example)243. Text propertiesFont settings can be paired with other style sheet properties to apply additional formatting to strings of text. The following text properties can be paired with font settings to bring more variety to text displays. word-spacing letter-spacingline-heighttext-alignvertical-aligntext-indenttext-decorationtext-transformation253. Text propertiesWord, letter and line spacing specify amount of white space to leave between words, letters and linesSyntax:word-spacing: sizeletter-spacing: sizeline-height: sizeSize can be expressed as “normal” (browser determines spacing) or a specific unit263. Text propertiesp {letter-spacing: 1 em}Might render: L e t t e rp {word-spacing: 2 em}Might render: This is an examplep {line-height: 2}Indicates line height is twice the font size heightDefault is 1.2273. Text propertiescolortext-alignvertical-aligntext-decorationtext-transformword-spacingletter-spacing283. 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, bottom293. 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}303. Text propertiesword-spacing:Specifies the space between wordsH1{word-spacing:4px}313. Text properties32Basic propertiesClass declarationClass propertiesSecond class properties3. Text properties33Title classHorizontal lineBodytext class3. Text properties343. 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, blink353. 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 clicked363. Styling links37a tag styleLink settingsVisited settingsHover settings3. Styling links38Link 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 positioned394. Styling Background404. Styling Background415. Styling tablestext and fontvertical – alignwidth height background - color background - image425. Styling tablesborder :border-style (solid, dashed, doted, double etc.)border-color border-bottom (solid, dashed, doted, double etc.)padding Padding-leftPadding-rightPadding-toppadding-bottom435. Styling tables44Table settingsTh settingsTd settingsTr settings5. Styling tables45SummaryFont propertiesfont-familyfont-sizefont-weightfont-stylefont-variantControlling text with CSSword-spacing letter-spacingline-heighttext-alignvertical-aligntext-indenttext-decorationtext-transformation46SummaryStyling linksStyling backgroundbackground-colorbackground-imagebackground-repeatbackground-position Styling tablestext and fontvertical – alignwidth height background - color background - image47THANK YOU48