html5-img
1 / 19

Cascading Style Sheets (CSS) Notes

Cascading Style Sheets (CSS) Notes. Computer Applications II. Style Sheets. A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site) as opposed to changing every single page of the site individually.

kieve
Download Presentation

Cascading Style Sheets (CSS) Notes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets (CSS) Notes Computer Applications II

  2. Style Sheets • A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site) as opposed to changing every single page of the site individually. • It is the ‘skeleton’ of a web page that contains the minimum tags required to define and create a basic page.

  3. Purpose and Benefit of Style Sheets • Used to define layout elements of a web page, much like a template. This allows the designer to define several attributes in a single place that are to be shared on pages throughout a site. • Less code to actually be typed, keeping sheets shorter and neater. • Appearance of site is more consistent. • Pages load faster and site accessibility is improved. • Editing and updating is faster and more efficient.

  4. Types of Style Sheets • Cascading Style Sheet (CSS) -- allows web page designers to attach style sheets containing specific information regarding the appearance of web pages, much like a template. • Internal style sheet – used for individual pages containing large amounts of text. The tag <style> is placed inside the <head> section of the HTML code. Attributes and tag properties are then listed inside curly braces { }. • External style sheet – used for numerous web pages that will make up a web site, requiring pages to have a consistent appearance. This is a separate text file, linked to web pages. An HTML tag is indicated, followed by tag properties in the same format as the internal style sheet. This page is then saved in a text-only format with a .css extension. The link can then be placed within the <head> section of all pages to which the style attributes will apply.

  5. Cascading Order • Browser Default • External Default • Internal Style Sheet (in the head section) • Inline Style (inside an HTML element)

  6. CSS Syntax • Three parts of syntax: • Selector – HTML tag you wish to define • Property – attribute you wish to change • Value – each property can take a value • Example: • Selector {property:value} • body {color:black}

  7. CSS Syntax Rules • If value is more than one word • Put quotes around the value • p {font-family:”sans serif”} • If more than one property is specified • You must separate each property with a semicolon • p {text-align:center;color:red} • Grouping selectors • Separate each selector with a comma • h1,h2,h3,h4,h5,h6 {color:green}

  8. CSS Syntax Rules • Class Selector • The class selector allows you to define different styles for the same type of HTML element • p.right {text-align:right} • p.center {text-align:center} • <p class=“right”>This paragraph will be right-aligned</p> • <p class=“center”>This paragraph will be center-aligned</p> • CSS Comments • Comments are used to explain the HTML code-helps when code is edited later. Comments are ignored by browsers. • /*This is a comment*/

  9. Inserting Style Sheets • External • Ideal when style is applied to many pages. Each page must link to the style sheet. CSS file does not contain HTML tags. • hr {color:sienna} • p {margin-left:20px} • body {background-image:url(“images/back40.gif”)} • Internal • Used when a single document has a unique style. • <head> • <style type=“text/css”> • hr {color:sienna} • p {margin-left:20px} • body {background-image:url(“images/back40.gif”)} • </style> • </head>

  10. Inserting Style Sheets • Inline Styles • Use sparingly. Loses many of the advantages of style sheets. • <p style=“color:sienna;margin-left:20px”>This is a paragraph</p> • Multiple Lines • If multiple properties are set for the same selector in different style sheets-values will be inherited from the more specific sheet • External: • h3 {color:red;text-align:left;font-size:8pt} • Internal • h3 {text-align:right;font-size:20pt} • Properties for the h3 will be: color:red; text-align:right; font-size: 20pt

  11. CSS Text – Text Color • Set by Name – specify a color name • body {color:blue} • Set by RGB – specify an RGB value • h2 {color:rgb(255,0,0)} • Set by HEX – specify a hex value • h1 {color:#00ff00}

  12. CSS Text – Text Alignment • Used to set horizontal alignment of text • Examples: • h1 {text-align:center} • p.date {text-align:right} • p.main {text-align:justify}

  13. CSS Text – Text Decoration • Used to set or remove decorations from text. Used primarily to remove underlines from links for design purposes • Examples: • a {text-decoration:none} • h2 {text-decoration:line-through}

  14. CSS Text – Text Transformation • Used to specify uppercase and lowercase letters in text • Examples: • p.uppercase {text-transform:uppercase} • p.lowercase {text-transform:lowercase} • p.capitalize {text-transform:capitalize}

  15. CSS Text – Text Indentation • Used to specify indentation of first line of text • Examples: • p {text-indent:50px}

  16. CSS Font – Font Family • Family – Serif • Have small lines at the ends on some characters • Times New Roman, Georgia • Family – Sans Serif • Fonts that do not have lines at the end of characters • Arial, Verdana • Family – Monospaced • All characters have the same width • Courier New, Lucida Console • Setting Font Family • Set with the font-family property. If font family is more than one word, use quotation marks. Specify several font names in case browser does not support first font • p {font-family:”Times New Roman”,Georgia,Serif}

  17. CSS Font – Font Style • Normal • Text is shown normally • p.normal {font-style:normal} • Italic • Text is shown in italics (most common use of font-style property) • p.italic {font-style:italic} • Oblique • Text is leaning-similar to italic, but less • p.oblique {font-style:oblique}

  18. CSS Font – Font Size • Headings – Do not use font size adjustments to make paragraphs look like headings or headings look like paragraphs. Always use proper HTML tags, like <h1> - <h6>. • Absolute – Sets text to a specified size • Does not allow a user to change text size in all browsers • Useful when the physical size of the output is known • Relative – Sets the size relative to surrounding elements • Allows a user to change the text size in browsers

  19. CSS Font – Font Size • Set using Pixels • Gives full control over the text size • h1 {font-size:40px} • Set using EM • Recommended by the W3C. 1em is equal to the current font size (default text size for browsers is 16px, so default of 1em is 16px) • h1 {font-size:2.5em} /*40px/16=2.5em*/ • Set using Combination of Percentage and EM • Works in all browsers. Set a default font-size in % for body element • body {font-size:100%} • h1 {font-size:2.5em}

More Related