www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Lesson 2 Adobe Dreamweaver - Step by Step
CSS Selectors


   
CSS allow us to define style rules for various elements in our page, all in one external file which can then be linked to the html or webpage.

Gives us more control and editing capability by editing only one file.

Open a style sheet -- CSS rule

CSS rule is identified by a selector and then there are properties from which you can choose a value.
You can use these style rules to target different elements on your page.


1.  Element, class and ID Selectors - There are three different selectors that allow you to do that:
2.  Descendent Selectors
3.  DIV (Box Model)

Hand Code or CSS Style Panels

Rule Definitions Dialog Box - is like a menu
Typically you would link your web page to a CSS file

Element Selector
Create a rule for a body element -

New CSS rule icon - pick TAG - dropdown and select an element - pick BODY
apply CSS within the document for this example only - typically you would like to an external document.

Apply background color.
Type - choose font
TIP:  It is always important to choose 100% for your font size in your BODY.  Then you can scale down from there as you design.

Class Selector
(this rule can be applied anywhere on the page)
Click on the NEW CSS RULE icon.
Pick the selector type CLASS
We're going to create a rule we can apply anywhere on our page.
For our class tag WE MUST USE A DECIMAL for the prefix.
We can name our class anything we want.  For this example we'll name it ".highlight"
It is IN our document - this rule is for highlighting certain types of text on our page.  So I'm going to choose a text style, italic and a blue color and click OK

Now you can see that in the CSS panel. Apply to a page element. (code view or split view)  Properties, drop down for style and select HIGHLIGHT.

ID Selector (only applied to one page element at a time)
ID Selectors are most often applied to DIV ELEMENTS.
The DIV is a page element but is also a block element which is primarily used to contain content within our page.  We can apply layout and style to each one specifically through use of our ID Selector.  So in this case, selected all content on the page and wrapped it in a DIV Element by going up to the toolbar, selecting INSERT DIV TAG and wrap it around my selection which is all the content on my page and I can choose CONTENT because I have already predefined an ID Selector called CONTENT with rules attached.  That is the white box with the dotted border.

DESCENDENT SELECTOR
Which lets you target elements more specifically.  If I wanted to define a rule for text within this paragraph, I put my cursor within the text (within a paragraph element) click on that and go to the NEW CSS RULE icon. (Dreamweaver helps by auto populating the name)  If we already had a CSS rule for paragraph elements in general throughout the webpage, this rule will now specifically override that by targeting paragraph elements WITHIN the CONTENT DIV TAG.

BOX MODEL
The DIV is a block element which follows the box model.  There are 5 spacing properties here, Width, Height, Padding, Border and Margin.  By default the Width will fill 100% of whatever parent element its in.   Padding is space that's created INWARD, inside the box, Borders size will also increase the Width and Height values of the box.  Margin values will create space away from other block elements.
 




 

 

 

 

 

dreamweaver cs3, dreamweaver tutorials, learning dreamweaver, adobe dreamweaver, learn dreamweaver, dreamweaver classes, dreamweaver lessons, how to define a site in dreamweaver, web design, web design tutorials, css, stylesheets in dreamweaver, support, free dreamweaver tutorials, templates, how to adobe
Site Map         

 

Please add us to your website or blog!

Privacy Policy - Disclaimer
free sound files, free media files, free tutorials, free web hosting, cheapest domain names, inexpensive domain names, screen capture software, Computer Software Tutorials, online training videos, computer basics tutorial, free windows tutorial, free computer tutorial for kids, computer programming tutorials, free computer courses, pc tutorial, beginner computer tutorials, free computer software tutorials, free internet tutorial, free typing tutorial programs, computing tutorials, computer science tutorials, graphic design tutorials, free visual basic tutorials, free Photoshop tutorials, newbie computer tutorials free flash tutorials, access tutorial online, computer course, pc maintenance online tutorials, absolute beginners computer tutorials, free online computer classes, frshirtsbestee online learning, free computer training download, free computer tutorial for seniors, computer parts tutorial, computer tutorials for children, computer hardware tutorials, free excel tutorials, computer fundamental introduction basics tutorial, Microsoft tutorial, free grocery coupons, Free computer software tutorials, tech support, technical support, the tech support forum, game development, 3d game development software tutorials, graphic design tutorials, graphic illustration tutorials, character animation and design tutorials, web development, Clipart and Banner Ads, adobe photoshop tutorials and downloads, software lessons, how to do it yourself, Fierce Layouts learn adobe Photoshop, learn silverlight, learn microsoft expressions, asp.net, video editing, youtube video, digital image editing software, national association of Photoshop professionals (naap) Flash Animation, graphics, computer software, computer books, manhattan flash animation presentations for advertising and banner ads, adobe, photoshop, macromedia, microsoft, software and application development, learn to, how to, tutorials, hardware, software Tech Support - Free Technical Support for Beginners and Advanced Users of Computers, Videographers, photographers, Programmers and Web Designers, Tutorials and How To Start, computer help, video, audio, nonlinear editing, cameras, microsoft excel free online video lessons, learn excel, learn microsoft word

Free software tutorials, downloads and technical support information for computer geeks, photographers and videographers.