1 / 12

UVICELL Basic Web Design Week 6 - Using CSS

UVICELL Basic Web Design Week 6 - Using CSS. Instructor - Dave Gilliss. Types of CSS (Cascading Style Sheets). In line Put right in the HTML Tag using the STYLE attribute <p style="color: green">text</p> Avoid use. Types of CSS (Cascading Style Sheets) Continued. Internal

summerville
Download Presentation

UVICELL Basic Web Design Week 6 - Using CSS

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. UVICELLBasic Web DesignWeek 6 - Using CSS Instructor - Dave Gilliss

  2. Types of CSS(Cascading Style Sheets) • In line • Put right in the HTML Tag using the STYLE attribute • <p style="color: green">text</p> • Avoid use

  3. Types of CSS(Cascading Style Sheets) Continued • Internal • Used to mark up the whole page • Placed inside the <Head> Tag <head> <title>My Great Page</title> <style type="text/css"> p { color: green; } a { color: blue; } </style> • Needs to be added to each page - Avoid use

  4. Types of CSS(Cascading Style Sheets) Continued • External • Used for all pages in a multiple page website • Styles are contained in a separate document that ends with .CSS • The .CSS file is linked in the <Head> section of your HTML document • Example: <head> <title>My Great Page</title> <link rel="stylesheet" type="text/css" href="web.css" />

  5. Components of a Style Sheet - Overview • All style sheets must have three basic components • Selector • Properties • Values • Proper syntax is - • selector {property: value}

  6. Components of a Style Sheet - Selector • Selector • Names given to styles in a style sheet • HTML Selectors are the names of HTML tags and are used to change the style of a specific tag. • <P> is the HTML tag for “Paragraph” • P is the HTML selector to change the paragraph style

  7. Components of a Style Sheet - Properties • Properties are the attribute of the selector that you would like to change • Color • Font-weight • Background-color • Go inside curly brackets { and }

  8. Components of a Style Sheet - Values • Values are the specific change that is being made to the selector’s properties • Example • Blue • 12px • 20%

  9. Creating A Style Sheet • Open the “NotePad” application • Type in the following exactly as shown (note spaces) • p { color: green; } a { color: blue; } • Save file as “web.css” (no quotes) into the same directory as the example.html file

  10. Linking A Style Sheet To An HTML Document • In the <Head> tag of the HTML document place the following tag: <link rel="stylesheet" type="text/css" href="web.css" /> • Now the styles used in the style sheet will be applied to the HTML document

  11. Selectors With Multiple Properties • You can add many properties to most selectors • Example - The <Body> tag replaced by the Body selector Body { margin-left: 25px; margin-top: 25px; background-color: #FFFFCC; } • Values only have to be declared in the CSS file and not in each HTML file

  12. Grouping Selectors • If you have several selectors that all share common properties and values, they can be grouped together • Example: H1, H2, H3, { color: brown } • All Header text will now be brown

More Related