What is CSS?
CSS DemoLearn 3 different ways to insert CSS into your website. Styles Solved a Big ProblemHTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today. CSS Saves a Lot of Work!CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! CSS (Cascading Style Sheets) is used to style HTML elements. ---------------------------------------------------------------------------------------------------------------------------------------------------------------- Styling HTML with CSSCSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways:
The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files. However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself. Inline StylesAn inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph: <p style="color:blue;margin-left:20px;">This is a paragraph.</p> HTML Style Example - Background ColorThe background-color property defines the background color for an element: <!DOCTYPE html> * The background-color property makes the "old" bgcolor attribute obsolete. HTML Style Example - Font, Color and SizeThe font-family, color, and font-size properties defines the font, color, and size of the text in an element: <!DOCTYPE html> * The font-family, color, and font-size properties make the old <font> tag obsolete. HTML Style Example - Text AlignmentThe text-align property specifies the horizontal alignment of text in an element: <!DOCTYPE html> * The text-align property makes the old <center> tag obsolete. Internal Style SheetAn internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> body {background-color:yellow;}p {color:blue;} </style> </head> External Style SheetAn external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> Assignment: Complete the Intro to CSS Tutorial PageNeed help? Read: CSS How To... and see an example of an HTML page linked with a CSS page here Want to style even more things with CSS? See here HTML Style Tags ReviewEXTERNAL STYLE SHEETS |