CSS Rules

Type Descendant Selectors

are like generic styles that are applied across the board, that is, on every page site-wide unless explicitly indicated otherwise.

Descedant Selectors

are selectors specified by another selector.

Values

-A property requires a value. -A value specify the settings for the chosen property. -For example, the color property requires a color value like red or its hex equivalent #ff0000

CSS rules

-All CSS rules should be within the style element in the head section. -A css rule requires a selector.

External Style Sheet

-An external style sheet is saved in a separate document called CSS file. -The document uses the .css extension. -An external style sheet is ideal when the style is applied to many pages. -The advantages of using external style sheets, instead of the inline or internal styles, is that the appearance and layout of all the pages in a website can be changed by editing just one CSS file.

Inline Styles

-Are defined inside a tag with the use of the style attribute. -the style attribute can contain one or more CSS declarations. -An inline style can be used if a unique style is to be applied to a single occurrence of an HTML -It affects only the content element within the start and end tags.

CSS Units of Measure

-Dimension refers to the size of an element. -Most properties are measured by width, height, and length expressed in a variety of units of measurement. -Most common ones are pixels, percent, and em. -A measure can be absolute or relative. -If absolute, the size does not change at all. It is not affected by other elements or the browser size. -If relative, the size varies depending on the size of the browser window and other elements.

CSS Declarations

-Each CSS declarations are enclosed within curly brackets. -There can be or more declarations. -No space is required between declarations and between the property and its value but may be used for legibility.

Class Selectors

-If the id selector can only be used once on every page, the class selector can be used multiple times on every page by more than one element because the class selector is used to specify a style for a group of elements. -The class selector should be named with a dot or period before it.

Adding CSS to HTML

-Inline (as style attribute of a tag) -Internal (within the page in the head section) -External (on separate page with a .css extension)

Internal Style Sheet

-It defines sheets is defined in the head section of an HTML document using the <style type="text/css"> element. -Any style or formatting defined within it applies only to the document where it is defined. It has no effect on other HTML documents. -An internal style sheet can be used if one single document has a unique style.

CSS DECLRATIONS

-It has 2 parts: property and value. -A colon separates the property from the value. -No space is necessary before and after the colon:but for eligibility purposes, a space after the colon is just fine. -Every declaration should end with a semi-colon. -In CSS rule, the declarations are enclosed in {} (curly brackets)

Properties

-It indicate the aspect of the element that needs to be changed or altered. -For example, width, height, color, etc. -These are a number of CSS roperties. The most common and useful ones are discussed in detail in the succeeding lessons.

Naming IDs and Classes

-Name id's and classes according to the CSS rule's usage. -For id and class names are case sensitive. For example, #excerpt and #Excerpt -For eligibility, hyphenating multiple words, though not necessary, is a good practice as well.

Uses a CSS selector

-Only internal and external CSS use a selector. -Inline styles need not use a selector because the style is in the tag itself.

Best used for screen output

-Px -Pixels. A pixel is equal to a dot on the computer screen. Use px if main consideration is screen display

Best used for print output

-The in, cm, mm are best used if layout on print media is the main consideration.

To add an external CSS to an HTML document.

-The link attributes rel, type and href, are all required. -The values of rel and type are constant -Only the value of href, which refers to the external CSS file is variable. -Using external CSS is the preferred way to add CSS to HTML.

Types Selectors

-are also referred to as element or simple selectors. -They are used to target a particular type of element. It corresponds to an HTML tag. -On CSS, tag selector should not have any single brackets. If a tag selector is used, the effect is either page wide, (Internal CSS) or site wide (external CSS, assuming all pages are linked to the CSS file)

ID Selector

-is used to specify a style for a single, unique element. It is written with a # symbol(hash character) before the name. -In order for this to work, it should be called by the attribute value defined inside the HTML tag. -An id name can be a mix of letters and numbers. Preferably, start with a letter because Mozilla/Firefox does not recognize an id name that starts with a number.

5 Types of CSS Selector

-type -id -class -the universal selector (*) -Selector with pseudo-classes such as a:link, a:visited,a:hover, and a:active

In an HTML document, the preceding CSS is applied as follows:

<div id="footer"> the text here appears on a footer section of this page as defined by a CSS with an id selector named "#footer". </div>

In an HTML document, the preceding CSS is shown as follows

<p class="excerpt">. This paragraph is styled with CSS as defined by a class selector name ".excerpt". </p>

Inline Syntax

<tag style="property:value: [property2:value2:]....>

CSS Comment

An external CSS file can contain comments to serve as editing notes or guides. Comments are ignored by browsers. A CSS comment begins with /*and ends with*/

em

It follows the measurement of the current font size. For example, if 1em is equal to the current font size, then 2 em means 2 times the size of it. Em is good for the screen and print output. It is best for dynamic sizing of fonts. Em is based on the size of uppercase M.

CSS Selectors

It identifies a declaration or a set of declarations that act as reference to either an HTML element or attribute value in an HTML document

ex

It is equivalent to the size of the lowercase letters. It may be used both screen and print output. It is rarely used because it is not necessary. Rather than using ex, the other units are much preferred. Ex is based on the size of the lowercase "x".

Property

It is separated by a colon from its value. No space is required but may be used for readability. Every declaration ends with a semi-colon. A value can have one or more declarations.

Tag

It refers to any HTML element. The required attribute is style.

Value

Its value called declarations, is enclosed with either single or double quotes.

%

Percentage. It is good for either screen or print output. Use % if the main consideration is dynamic sizing or liquid layout designs so that it fits any screen resolution.

External CSS Syntax

Writting CSS in an ixternal file is exactly the same as that in internal CSS. The only different is that, for the reason that a .css file is not an HTML document it does not require the <head> and <style> elements . In fact, it should not contain any HTML tags. If the selector corresponds to an HTML element, it should not have any angle brackets.