Web design Tutorials Lesson 3.( Part 2)

Cascading Style Sheet Rules

 We've created a video to travel with this lesson. It's counseled that you just browse the text below similarly, though. The video is here:

Cascading sheet of paper Rules

A Cascading sheet of paper rule tells the browser what the markup language appears like, and what it ought to do. A rule will dictate what only one markup language tag ought to appear as if, otherwise you will construct your own rule to be applied as and wherever you wish it.

For example, a rule may be discovered that tells the browser to format each  tag so its 1st line is indented. otherwise you may construct your own paragraph rule, and simply apply the fashion to sure paragraphs, not all paragraphs.

There Ar 3 components to a Rule: The Selector, the Property, and also the price.


The Selector

There Ar 3 totally different types of CUSS Selector: associate markup language selector, a category selector, associated an ID selector.

An markup language Selector is that the text a part of associate markup language tag. the whole paragraph tag is . thus its Selector is simply P ' in alternative words, strip the angle brackets off and you get the markup language Selector.

A Class Selector is one you discovered yourself, to be used anyplace on your page. The Font1 from our vogue example higher than was a category Selector. we have a tendency to picked the name ourselves then applied the fashion to some text on the page.

An ID Selector is comparable to a category selector, however you utilize them to spot a selected component, a text box component on a type, for instance.

Here's associate example of what all 3 selectors look in a very vogue tag.

A upright showing all three CUSS Selectors

The first one, H1, is that the markup language Selector. Notice that it's had its angle brackets removed. With associate markup language selector, all the markup language tags on the page are going to be formatted within the vogue you've got set. thus for H1 higher than, all the text between the  tags on the page can currently be in Red.

The second, .New Font, is that the category selector. Note that a category selector should begin with a stop (period). Then you kind the name for your selector (anything you want). No area is another between the total stop and also the name of your selector.

The third one, #New Text box Co-lour, is that the ID selector. associate ID selector starts with the hash/pound (#) image. You then kind the name you wish to use for your ID selector. Again, no area is another between the image and also the name of your selector.


Property and price

Once you've got discovered your Selector, you then outline the Properties and Values for that selector.

The Property for the selector is that the factor you are making an attempt to vary. For Examples Font, Color, Background.

The Value for the selector is that the new setting for the property. for instance, for our visual property, we will set it to a worth of associate actual color (red, blue, yellow), or a color code (#FFFF00, #000000).

The property and also the price Ar fogbound in curling brackets . The syntax for the entire factor would then be:

Selector

An example is:

H1

H1 is that the selector, Color is that the property, and Red is that the price of the property. Note the colon ( : ) when the Property. this can be wont to separate a Property from a worth, so the browser is aware of that one is that.

If you wish to feature quite one property and price, there Ar 2 thanks to do it: all on one line, with every try of properties and values separated by a semi-colon ( ; ). otherwise you will place every try of properties and values on multiple lines separated by a semi-colon ( ; ). Like this:

H1

The multiple lines version is this:

The Properties and Values of a mode.

The multiple lines version is simpler to browse.

So, to sum up:

    A CUSS rule has 3 components, a Selector, a Property, and a worth
    The Selector may be a markup language selector, a category selector, or associate ID selector
    You separate the Property and price from the Selector by inclosure them in curling brackets, a left curling bracket 1st { and a right curling bracket to shut the rule }
    A Property is separated from a worth by a colon ( : )
    If you are mistreatment quite one try of properties and values for identical selector, separate them with semi-colons ( ; )
In the next lesson, you will see wherever to place your designs.