high level overview: css css syntax consists of a set of rules that have 3 parts: a selector, a...
TRANSCRIPT
1
HIGH LEVEL OVERVIEW:
CSSCSS 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 }
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
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 CSSInline Example: <p style="color:#ff9900">CSS
tutorial.</p>
Embedded CSS<style type="text/css" media=screen>p {color:#ff9900;} </style>
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 <head>... </head> tags of all HTML documents that you want to reference the external style sheet.
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
Imported CSS• You can use the @import rule to import rules from other style
sheets.
• Add either of the following between the <head>... </head> tags of all HTML documents that you want to import a style sheet into.
@import "imported_style_sheet.css";@import url("imported_style_sheet.css");
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
<head><style type="text/css"> d iv.css-section { border:1px dotted red; }
p.css-section { color:green; }</style></head><body><div class="css-section">
CSS Class</div><p class="css-section">CSS classes can be very useful</p></body>
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 Elementshtml-element-name.class-name { property:value; }
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<head> <style type="text/css">
div.css-section { border:1px dotted red; }
div.css-section p { color:green; } </style></head><body>
<div class="css-section"> CSS Class
<p>CSS classes can be very useful</p></div> </body>
• Note: Using div.css-section>p (note the >) will only select the first <p> element inside the same <div> element.
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<head> <style type="text/css">
div#css-section { border:1px dotted red; } </style></head>
<body> <div id="css-section">CSS IDs can be very useful</div> </body>
8
IDs vs ClassesWhen 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 <h1> 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 <div> 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
CSS Font Examples
<p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p>
<p style="font-weight:bold;">This text is bold.</p>
<p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>
<p style="font-style:italic;">This text is in italics.</p>
<p style="font-size:20px;">This text is using a font size of 20 pixels.</p>
<p style="color:olive;">This CSS text color is olive</p>
<p style="text-align:right;">This CSS text is aligned right</p>
<p style="text-indent:50px;">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!</p>
<p style="letter-spacing:5px;">This text has letter spacing applied</p>
<p style="word-spacing:50px;">This text has word spacing applied</p>
10
CSS - Text Decoration - Property
<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >This hyperlink has no underline</a>
<p style="text-decoration:blink;">This text is blinking</p>
CSS Text Shadow<p style="text-shadow:2px 2px 8px orange;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>
CSS Background Image<p style="height:100px;background-image:url(/pix/smile.gif);">This text has a background image applied.</p>
<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;">This background image does not repeat.</p>
11
CSS - Margins- Property
<p style="border:1px solid orange;margin-left:60px;">This text has a left margin of 60 pixels.</p>
CSS - Cell Padding - Property<p style="border:1px solid orange;padding:20px;">This text has padding of 20 pixels on all four sides.</p>
CSS - List Style - Property<ul style="list-style-type:circle;"> <li>List item one</li><li>List item two</li> </ul>
CSS - List Style - Short Hand<ul style="list-style-image: url(/pix/printer_icon.gif);">
<li>List item one</li> <li>List item two</li></ul>
<ul style="list-style:square inside;">
<li>List item one</li> <li>List item two</li> </ul>
12
CSS - Fixed Positioning - Property
<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">
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!
</div>
CSS - Fixed Positioning - Property<div style="width:180px;">
<div style="float:left;min-height:60px;margin-right:10px;padding:5px;background-color:cornsilk;">
<a href="http://www.zappyhost.com/">Hosting</a><br>
<a href="http://www.html.am/">HTML</a><br>
<a href="http://www.htmlcodes.me/">Codes</a><br></div>
<p>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!</p></div>
13
CSS - Layers- Property
<div style="background-color:red;width:80px;height:100px;position:relative;top:10px;left:80px;z-index:2;">
</div>
<div style="background-color:yellow;width:80px;height:100px;position:relative;top:-60px;left:35px;z-index:1;">
</div>
Some of the source information was adopted for this guide from:
http://www.quackit.com/css/tutorial/