Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.

Introduction To CSS

History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were other styling languages proposed at this time, such as Style Sheets for HTML and JSSS but CSS won. ► ► CSS2 became the recommendation in 1998 by W3C ► ► CSS3 was started in 1998 but it has never been completed. Some parts are still being developed and some components work on some browsers.

What is CSS? CSS stands for Cascading Style SheetsCSS stands for Cascading Style Sheets Styles - define how to display HTML elementsStyles - define how to display HTML elements Styles are normally stored in Style SheetsStyles are normally stored in Style SheetsDefinition: Cascading Style Sheets (CSS) – is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border thickness, font size, etc.

Examples of CSS ► Example 1: http://www.csszengarden.com/ http://www.csszengarden.com/ ► Example 2: http://w3schools.com/css/demo_default.htm http://w3schools.com/css/demo_default.htm ► If you notice each time we click on a different CSS style sheet on the two pages above the look and feel of each page changes dramatically but the content stays the same. ► HTML did not offer us this option. ► HTML was never intended to contain tags for formatting a document. ► HTML was intended to define the content of a document, like: ► This is a heading ► This is a heading ► This is a paragraph. ► This is a paragraph. ► When tags like, 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.

HTML Formatting Review ► What are the starting tags in HTML? ► What are the ending tags in HTML? ► How do you save in a Notepad document so it becomes a web page? ► What is the tag for creating paragraphs in HTML? ► What is the tag for creating heading tags in HTML? ► What are the tags we use to format font: family, color, size, alignment in HTML?

Syntax oF CSS  The CSS syntax is made up of 5 parts:  The CSS syntax is made up of 5 parts:  selector  property/value  declaration  declaration block  curly braces We will explore each part in the next slides.

Selector  Definition: identifies the HTML elements that the rule will be applied to, identified by the actual element name, e.g., or by other means such as class attribute values.  Example: *The selector is normally the HTML element you want to style

Property & Value  Definition:  Definition: The property is the style attribute you want to change. Each property has a value. *Properties are separated from their respective values by colons : Pairs are separated from each other by semicolons ; *Pairs are separated from each other by semicolons ;

Declaration  Definition: Each CSS line that includes property and value *Each declaration consists of a property and a value.

Declaration Block  Definition: multiple declaration lines including the curly braces

Curly Braces  Definition: the curly braces contain the properties of the element you want to manipulate, and the values that you want to change them to. The curly braces plus their content is called a declaration block.  Example:

Let’s Create Our First CSS Page ► Open Notepad ► Type the following Code <html><head> p {color:red; text-align:center;} </style></head><body> Hello World! Hello World! This paragraph is styled with CSS. This paragraph is styled with CSS. </body></html> ► Save Your File as css-myfirstpage.html into a new folder called CSS

Class and id Selectors  In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". id - The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#".  The style rule below will be applied to the element with id="para1":  #para1 {text-align:center;color:red;}

Class and id Selectors Class - The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.  This allows you to set a particular style for any HTML elements with the same class.  The class selector uses the HTML class attribute, and is defined with a "."  In the example below, all HTML elements with class="center" will be center-aligned: .center {text-align:center;}

Class and id Selectors  In the image below what is the h1 selector an ID or a Class? #.

Let’s Create A CSS Page that uses “id” ► Open Notepad ► Type the following Code #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style. ► Save Your File as css-id.html into a your folder called CSS.

Let’s Create A CSS Page that uses “class” ► Open Notepad ► Type the following Code.center { text-align:center; } Center-aligned heading Center-aligned paragraph. ► Save Your File as css-class.html into a your folder called CSS.

Comments ► Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. ► You add comments by enclosing them in /* and */ /* and */ ► Comments can span several lines, and the browser will ignore these lines. ► Example: ► /* This is a basic comment it will not appear on the page*/ ► /* This is a basic comment it will not appear on the page*/ /* starts the comment /* starts the comment */ is the end of the comment /*This is a comment*/ p{ text-align:center; color:black; font-family:arial;}

Let’s Add A Comment ► Open Your CSS-ID example in Notepad ► Type the following Code right above the style you had written previously. /*This is an example of how to use ID in a CSS web page*/ /*This is an example of how to use ID in a CSS web page*/ #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style. ► Save Your File as css-comment.html into a your folder called CSS.

How CSS is Applied to A Web Page ► CSS is applied to a web page using three different methods:  Inline style  Internal style sheet  External style sheet

► Inline CSS ► Applies styles directly to the elements by adding declarations into the style ► For Example: This is a simple paragraph and the inline style makes it red. This is a simple paragraph and the inline style makes it red. How CSS is Applied to A Web Page

► Internal Style Sheet ► Applies styles to HTML by placing the CSS rules inside the tag inside the document tag. ► For Example: <head> my page my page p{color:red}</style></head><body> this is a simple paragraph this is a simple paragraph</p></body> How CSS is Applied to A Web Page

► External CSS ► Applies styles as a separate file with a.css extension. The file is then referenced from inside the element by a link to the file. ► For Example: <head> my external style sheet page my external style sheet page <body> this is a simple paragraph this is a simple paragraph </body> ► You can create an external style sheet in your text editor. How CSS is Applied to A Web Page

► What style sheet is best? ► Web developers rarely use inline CSS. Since they prefer to not mix content with presentation. And it is not efficient since you have to declare the style individually for every component. ► Internal and External style sheets are more popular because you can style multiple elements with one rule. ► External style sheets are best because they allow you to save all the style information on a separate file from the content. You can then modify a style for a site and it will update all of the pages in a site. How CSS is Applied to A Web Page

CSS Background CSS properties used for background effects ► background-color ► background-image ► background-repeat ► background-attachment ► background-position CSS Text

CSS Text h1 { color: #00ff00; h1 { color: #00ff00; text-align: right;text-decoration: overline;text-transform: uppercase; text-indent: 50px; }

CSS Text ► color Sets the color of text color ► direction Specifies the text direction/writing direction ► letter-spacing Increases or decreases the space between characters in a text letter-spacing ► line-height Sets the line height line-height ► text-align Specifies the horizontal alignment of text text-align ► text-decoration Specifies the decoration added to text text-decoration ► text-indent Specifies the indentation of the first line in a text-block text-indent ► text-shadow Specifies the shadow effect added to text text-shadow ► text-transform Controls the capitalization of text text-transform ► unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text unicode-bididirectionvertical-alignwhite-spaceword-spacing unicode-bididirectionvertical-alignwhite-spaceword-spacing

CSS Font ► font Sets all the font properties in one declaration font ► font-family Specifies the font family for text font-family ► font-size Specifies the font size of text font-size ► font-style Specifies the font style for text font-style ► font-variant Specifies whether or not a text should be displayed in a small-caps font font-variant ► font-weight Specifies the weight of a font font-weight

CSS Lists ► list-style Sets all the properties for a list in one declaration list-style ► list-style-image Specifies an image as the list-item marker list-style-image ► list-style-position Specifies if the list-item markers should appear inside or outside the content flow list-style-position ► list-style-type Specifies the type of list-item marker list-style-type

CSS list-style-type Property disc Default value. The marker is a filled circle armenian The marker is traditional Armenian numbering circleThe marker is a circle cjk- ideographic The marker is plain ideographic numbers decimalThe marker is a number decimal- leading- zero The marker is a number with leading zeros (01, 02, 03, etc.) georgianThe marker is traditional Georgian numbering

CSS list-style-type Property hebrewThe marker is traditional Hebrew numbering hiraganaThe marker is traditional Hiragana numbering hiragana-irohaThe marker is traditional Hiragana iroha numbering katakanaThe marker is traditional Katakana numbering katakana-irohaThe marker is traditional Katakana iroha numbering lower-alphaThe marker is lower-alpha (a, b, c, d, e, etc.) lower-greekThe marker is lower-greek lower-latinThe marker is lower-latin (a, b, c, d, e, etc.) lower-romanThe marker is lower-roman (i, ii, iii, iv, v, etc.) noneNo marker is shown squareThe marker is a square upper-alphaThe marker is upper-alpha (A, B, C, D, E, etc.)

CSS Border Properties border Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-colorSets the color of the bottom border border-bottom-styleSets the style of the bottom border border-bottom-widthSets the width of the bottom border border-colorSets the color of the four borders border-left Sets all the left border properties in one declaration border-left-colorSets the color of the left border border-left-styleSets the style of the left border border-left-widthSets the width of the left border

CSS Border Properties border-right Sets all the right border properties in one declaration border-right-colorSets the color of the right border border-right-styleSets the style of the right border border-right-widthSets the width of the right border border-styleSets the style of the four borders border-top Sets all the top border properties in one declaration border-top-colorSets the color of the top border border-top-styleSets the style of the top border border-top-widthSets the width of the top border border-widthSets the width of the four borders

CSS Border Style noneDefault value. Specifies no border hiddenThe same as "none", except in border conflict resolution for table elements dottedSpecifies a dotted border dashedSpecifies a dashed border solidSpecifies a solid border doubleSpecifies a double border groove Specifies a 3D grooved border. The effect depends on the border-color value ridgeSpecifies a 3D ridged border. The effect depends on the border-color value insetSpecifies a 3D inset border. The effect depends on the border-color value outsetSpecifies a 3D outset border. The effect depends on the border-color value initialSets this property to its default value. Read about initialRead about initial inheritInherits this property from its parent element. Read about inheritRead about inherit

CSS Margin The CSS margin properties define the space around elements. ► Margin A shorthand property for setting the margin properties in one declaration Margin ► margin-bottom Sets the bottom margin of an element margin-bottom ► margin-left Sets the left margin of an element margin-left ► margin-right Sets the right margin of an element margin-right ► margin-top Sets the top margin of an element margin-top

CSS Padding The CSS padding properties define the space between the element border and the element content. ► padding-bottom Sets the bottom padding of an element padding-bottom ► padding-left Sets the left padding of an element padding-left ► padding-right Sets the right padding of an element padding-right ► padding-top Sets the top padding of an element padding-top

CSS Layout – The position Property ► The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute).

Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.

Similar presentations

Presentation on theme: "Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.

Similar presentations

Presentation on theme: "Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were."— Presentation transcript:

Similar presentations

About project

Feedback