Scribd
Upload
29 views

Introduction To CSS

Cascading Style Sheets (CSS) allow you to define styles for HTML elements that can be applied consistently across web pages. There are three ways to apply CSS styles: inline, internal, and external style sheets. CSS syntax consists of selectors that target HTML elements, properties to style those elements, and property values. For example, the CSS rule "p{font-family:arial; font-style:italic;}" would apply the specified font family and style to all <p> elements.

Uploaded by

Kelly Tolentino Penaflor
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
29 views

Introduction To CSS

Cascading Style Sheets (CSS) allow you to define styles for HTML elements that can be applied consistently across web pages. There are three ways to apply CSS styles: inline, internal, and external style sheets. CSS syntax consists of selectors that target HTML elements, properties to style those elements, and property values. For example, the CSS rule "p{font-family:arial; font-style:italic;}" would apply the specified font family and style to all <p> elements.

Uploaded by

Kelly Tolentino Penaflor
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 8

Introduction to CSS

Cascadin g

Style
Sheet

You can create one style sheet for an entire Web site to keep the
layout and look of your content consistent from page to page. Style sheets are easy to build and even easier to integrate into Web pages, you can add (1) style markup to individual HTML elements (inline style sheet), (2) create sequences of style instructions in the head of an HTML document (internal style sheet), (3) separate stand-alone style sheet using some kind of link or other reference (external style sheet) inside your HTML document.

CSS Structure and Syntax


The CSS syntax is made up of three parts: Selector, Property, and Value selector { property:value } corresponds to an attribute HTML tag that you want to define You separate the property from the value in a declaration with a colon ( : ) and each declaration ends with a semi-colon ( ; )

Example: p{
font-family:arial; font-style:italic; }

3 Types of CSS
1. In-Line Style Sheet ~ CSS commands are embedded or placed inside the HTML tags, most specific and highest priority but least flexible Example:

<p style=color: green;>Green text.</p>

2. Internal Style Sheet ~ a summary of the CSS commands are located at the upper portion of the Html document (head tag) Example: <html> <head> <title>Internal Style Sheet Example</title> <style type=text/css> body { background: black; color: white; font-size: 16px; font-family: Garamond; margin-left: 72px; margin-right: 72px; margin-top: 72px; }

</style> </head> <body> <!-- Document content goes here --> </body> </html>

3. External Style Sheet ~ holds all your style rules in a separate text document you can reference from any HTML file on your site. Example <html> <head> <title>External Style Sheet Example</title> <link rel=stylesheet type=text/css href=styles.css /> <head> <body> <!-- Document content goes here --> </body> </html>

You might also like