Demonstrating CSS

CSS is an acronym for Cascading Style Sheets. It aids web designers in their quest to control the exact placement of elements in their websites. CSS allows you to control how your web document's layout (presentation) appears in a viewer's web browser separate from the actual HTML markup (content). Since web browsers' and systems default display settings vary, CSS style rules provide a standardized language that gives designers a common ..........

Official W3C Definition:

CSS is a style sheet language that allows authors and users to attach style (fonts, colors, and spacing) to structured documents (e.g., HTML documents).

Rules

Cascading Style Sheets are a collection of styles defined in the form of rules. A rule has 3 main parts. The selector, property, and value. The selector tells the browser which element on the page to apply the style. The property describes a selector's specific characteristic to be modified. The value is the actual value that property “takes on” (e.g., red). The basic syntax of a rule is:

selector{property: value(s)..}
or
h1 {font-color:red }

Styles

External

Save CSS rules in a completely separate file that is linked to the webpage

Embedded

Define CSS rules in a style block in the head of the HTML document

<body>
<style>

</style>
</body>

Inline

The "style" attribute lets you directly define CSS rules within the elements’ HTML tags

<h1 style="font-family: Arial; font-size: 20pt; font-variant: small-caps">Cascading Styles</h1>

<p style = "font-size: 18pt; color: red"> This text has the font-size style applied.</p>