Presentation is loading. Please wait.

Presentation is loading. Please wait.

HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.

Similar presentations


Presentation on theme: "HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS."— Presentation transcript:

1 HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS SYNTAX IN ORDER TO CODE CSS. ONCE YOU START CODING CSS, YOU WILL CREATE CODE WITHOUT THINKING OF THE PARTICULARS OF THE SYNTAX SUCH AS, "THIS IS A SELECTOR“, OR "THIS IS A PROPERTY". BY REVIEWING THE EXAMPLES PRESENTED IN THIS GUIDE, THEN CSS SYNTAX WILL BEGIN TO MAKE SENSE INTUITIVELY SYNTAX: SELECTOR { PROPERTY: VALUE } 1

2 2 CSS For example, h1 { color: blue } The above shows us that the selection, “h1”, is an HTML tag. And, often HTML tags are the “Selection” clause in an CSS Statement. Selectors: It’s possible to apply a style to many selectors. The selectors only have to be separate by a comma. For example, h1,h2,h3,h4,h5,h6 { color: blue }

3 3 CSS Applying Multiple Properties: h1 { color: blue; font-family: arial, helvetica,"sans serif" } Readability h1 { color:blue; font-family:arial,helvetica,"sans serif"; font-size:150%; } Implementing CSS Inline Example: CSS tutorial. Embedded CSS p {color:#ff9900;}

4 4 CSS External CSS: p {font-family: georgia, serif; font-size: x-small;} h1 {color: #000099; } The above CSS would need to be saved to a plain text file with the extension.css Add the following between the... tags of all HTML documents that you want to reference the external style sheet. Imported CSS You can use rule to import rules from other style sheets. Add either of the following between the... tags of all HTML documents that you want to import a style sheet url("imported_style_sheet.css");

5 5 CSS Classes: In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assign the class to the element. Syntax.class-name { property:value; } Class Example div.css-section { border:1px dotted red; } p.css-section { color:green; } CSS Class CSS classes can be very useful CSS Class Syntax You declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class. CSS Class with Multiple Elements html-element-name.class-name { property:value; }

6 6 Nesting Elements or Classes within Another Element One major benefit of doing this is that you don't need to apply a class to every instance of an element when it's nested within another element that uses a class. Class Example div.css-section { border:1px dotted red; } div.css-section p { color:green; } CSS Class CSS classes can be very useful Note: Using div.css-section>p (note the >) will only select the first element inside the same element.

7 7 CSS ID Syntax IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style that can only be used by the element you assign the ID to. The syntax for declaring a CSS ID is the same as for classes - except that instead of using a dot, you use a hash (#). Class ID Example #id-name { property:value; }div.css-section { border:1px dotted red; } Applying Class ID’s to multiple elements html-element-name#id-name { property:value; } Class ID Example div#css-section { border:1px dotted red; } CSS IDs can be very useful

8 8 IDs vs Classes When to use classes You should use classes when your style needs to be applied multiple times on the same page. For example, you might have many elements that need the same style applied. When to use ID’s Use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a tag which contains your left menu. The styles for this ID could contain the position, background-color, float properties, size etc. You probably wouldn't want any other element on the page to use this particular style. Another useful thing about IDs is that you can use the Document Object Model (DOM) to refer to them. This enables you to use JavaScript/DHTML techniques to build a much more interactive web site.

9 9 CSS Font Examples The styles for this text has been specified with the 'font' shorthand property. This text is bold. This Text Is Using Small Caps. This text is in italics. This text is using a font size of 20 pixels. This CSS text color is olive This CSS text is aligned right This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text! This text has letter spacing applied This text has word spacing applied

10 10 CSS - Text Decoration - Property This text has a line over the top This text has a line through the middle This text has a line underneath This hyperlink has no underline This text is blinking CSS Text Shadow If your browser supports the CSS text-shadow property, this text will have a shadow. CSS Background Image This text has a background image applied. This background image does not repeat.

11 11 CSS - Margins- Property This text has a left margin of 60 pixels. CSS - Cell Padding - Property This text has padding of 20 pixels on all four sides. CSS - List Style - Property List item one List item two CSS - List Style - Short Hand List item one List item two List item one List item two

12 12 CSS - Fixed Positioning - Property This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL! CSS - Fixed Positioning - Property Hosting HTML Codes Feel free to check out the links in the box that's floating to the left of this text. Whether you need web hosting or copy/paste HTML codes, there's bound to be something for you!

13 13 CSS - Layers- Property Some of the source information was adopted for this guide from:


Download ppt "HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS."

Similar presentations


Ads by Google