120 likes | 129 Views
Learn types of CSS (In-line, Internal, External), components of a style sheet, selector, properties, values, and how to create and link a style sheet to HTML. Practice with grouping selectors and applying multiple properties.
E N D
UVICELLBasic Web DesignWeek 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 • 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
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" />
Components of a Style Sheet - Overview • All style sheets must have three basic components • Selector • Properties • Values • Proper syntax is - • selector {property: value}
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
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 }
Components of a Style Sheet - Values • Values are the specific change that is being made to the selector’s properties • Example • Blue • 12px • 20%
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
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
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
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