Downloaded 42 times
Uploaded bycasestudyhelp
PPT, PDF3,087 views
Cascading Style Sheets (CSS) help
The document provides an overview of Cascading Style Sheets (CSS), explaining its purpose in web development for styling HTML elements either through inline, internal, or external methods. It details the syntax for setting color values using hexadecimal notation and lists common CSS properties for formatting text and backgrounds. Additionally, it discusses the advantages of using external style sheets for consistent design across multiple web pages.
Recommended
More Related Content
What's hot
Similar to Cascading Style Sheets (CSS) help
Recently uploaded
Cascading Style Sheets (CSS) help
- 1.HTML Tutorial 3HTMLTutorial 3Web Development & Design Foundations with XHTMLCascading Style Sheets (CSS)
- 2.Overview ofOverview ofCascadingStyle Sheets (CSS)Cascading Style Sheets (CSS)What is CSS?CSS stands for Cascading Style SheetsStyles define how to display HTML elementsExternal Style Sheets can save a lot of workStyles are normally saved in external .css files. Externalstyle sheets enable you to change the appearance andlayout of all the pages in a Web site, just by editing onesingle file!2
- 3.Methods of usingStyles:Methods of using Styles: Styling can be added to HTML elements in 3 ways:1. Inline - using a style attribute in HTML elements2. Internal - using a <style> element in the HTML <head>section3. External - using one or more external CSS files The most common way to add styling, is to keep theCSS syntax in separate CSS files.
- 4.
- 5.CSS Syntax SampleCSSSyntax SampleConfigure a Web page to display blue text and yellowbackground.body { color: blue;background-color: yellow; }This could also be written using hexadecimal colorvalues as shown below.body { color: #0000FF;background-color: #FFFF00; }5
- 6.Color ValuesColor ValuesCSScolors are defined using ahexadecimal (hex) notation for thecombination of Red, Green, and Bluecolor values (RGB). The lowest value thatcan be given to one of the light sources is0 (hex 00). The highest value is 255 (hexFF).Hex values are written as 3 double digitnumbers, starting with a # sign.
- 7.Using Color onWeb PagesUsing Color on Web Pages7
- 8.Common FormattingCommon FormattingCSSPropertiesCSS Properties See Table 3.1 Common CSS Properties, including:◦ background-color◦ color◦ font-family◦ font-size◦ font-style◦ font-weight◦ line-height◦ margin◦ text-align◦ width8
- 9.Configuring Text withCSSConfiguring Text with CSSCSS properties for configuring text:◦ font-weight Configures the boldness of text◦ font-style Configures text to an italic style◦ font-size Configures the size of the text◦ font-family Configures the font typeface of the text
- 10.The font-family PropertyThefont-family Property Not everyone has the same fonts installed in theircomputer Configure a list of fonts and include a generic familynamep {font-family: Arial,Verdana, sans-serif;}
- 11.1. External StyleSheets1. External Style SheetsCSS style rules are contained in atext file separate from the XHTMLdocuments.The External Style Sheet text file:◦ extension ".css"◦ contains only style rules◦ does not contain any XHTML tags11
- 12.1.External Style Sheets-1.External Style Sheets - cont.cont.◦ Multiple web pages can associate with the same external style sheetfile.◦ Each page must include a link to the style sheet with the <link> tag. The<link> tag goes inside the head section:12mystyle.cssindex.htmindex.htmclients.htmclients.htmabout.htmabout.htmEtc…
- 13.2. Internal StyleSheet2. Internal Style SheetAn internal style sheet should be usedwhen a single document has a uniquestyle.You define internal styles in the headsection of an HTML page, inside the<style> tag, like this:Example:
- 14.Multiple Style SheetsMultipleStyle Sheets If some properties have been set for the same selectorin different style sheets, the values will be inheritedfrom the more specific style sheet. For example, assume that an external style sheet has thefollowing properties for the h1 selector: then, assume that an internal style sheet also has the followingproperty for the h1 selector: The left margin is inherited from the external style sheet and thecolor is replaced by the internal style sheet.
- 15.3. Inline Styles3.Inline StylesTo use inline styles, add the style attribute to therelevant tag. The example shows how to changethe color and the left margin of a h1 element:An inline style loses many of the advantages of astyle sheet (by mixing content withpresentation). Use this method sparingly!
- 16.ReferenceReferencehttp://www.w3schools.com/html/html_css.aspVisit @ www.casestudyhelp.comOrEmailid: casestudyassignmenthelp@gmail.com