Scribd
Upload
434 views

Unit III - Introduction To CSS

The document discusses CSS (Cascading Style Sheets) which allows specifying attributes like color and font size for HTML elements. It describes CSS syntax and properties, and different ways to insert CSS like inline, embedded and external styles. Hands-on examples are provided to create web pages using external CSS stylesheets.

Uploaded by

mllalaguna
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
434 views

Unit III - Introduction To CSS

The document discusses CSS (Cascading Style Sheets) which allows specifying attributes like color and font size for HTML elements. It describes CSS syntax and properties, and different ways to insert CSS like inline, embedded and external styles. Hands-on examples are provided to create web pages using external CSS stylesheets.

Uploaded by

mllalaguna
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Unit III CSS INTRODUCTION

Web Designing with HTML and CSS


by Marlon L Lalaguna TLE-ICT Teacher Gen. T. de Leon NHS Scribd: http://www.scribd.com/doc/118557694/CSSIntroduction

WHAT IS CSS?
Cascading Style Sheets This is a tool that allows you to specify attributes such as color and font size for all page elements marked by specific tag, name of ID. CSS not only give designers a more efficient way to specify style but also more control over an objects attributes as well as how each object should be displayed in certain situations.

CSS Solved a Big Problem


HTML 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>

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

Image source: http://www.w3schools.com/css/css_syntax.asp

CSS Example
A CSS declaration always ends with a semicolon ;, and declaration groups are surrounded by curly brackets { }:

p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:

p { color:red; text-align:center; }

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. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

3 Different Ways to Insert CSS


1. Inline Style use inline style to take advantage of CSSs extended options for a small text block of other objects a single time in you document. This is the most basic level of using CSS.

Inline Style
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Inline Style
The example shows how to change the color and the left margin of a paragraph: Sample of Inline Style:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

3 Different Ways to Insert CSS


2. Embedded Style also called as internal style. to create a style, you associate style attributes with HTML tags between the HEAD tags at the of your web page. However, you can specify inline styles in a page that uses embedded styles when you have single objects that need their own style or style adjustment. Inline styles supersede the embedded style defined for the object where it is used.

Embedded Style
An embedded style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head> < style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} < /style> < /head>

3 Different Ways to Insert CSS


3. External Style use this style to apply the global formatting of embedded style to multiple pages. External style also is known as linked style because, instead of listing style specification at the top of your web page, you create a link to an external document that contains the style code, know as eternal style sheet.

External Style
An 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> < link rel="stylesheet" type="text/css" href="mystyle.css"> < /head>

External Style
In external style, we usually use CLASS and ID.
CLASS is just adding an extension to the typical CSS code and make a specify extension in the HTML, symbol (.) ID is used to specify a style for a single, unique element, symbol (#)

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style


1. Create a web page with different page formatting using External CSS linking. 2. Type the source codes given for the original web page (without style). 3. Save your web page as without styles.html

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style


1. Now, its time to create the cascading style sheets. 2. We have three different styles to be applied in our original webpage. 3. For the first style, type the codes given here. 4. Save your file as Style1.css

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style 1. For the second style, type the codes given here. 2. Save your file as Style2.css

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style


1. For the third style, type the codes given here. 2. Save your file as Style3.css

IMPORTANT: BE SURE THAT YOU ARE SAVING YOUR FILE IN THE SAME DIRECTORY/FOLDER!

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style


1. Now, well apply the tweak in the original web page applying different page layout styles through CSS. 2. Open the source code of original web page -> without styles.html 3. Add the external style syntax to call the style sheet . 4. Also, change the text between the title tags. 5. Save your webpage as With Style1.html 6. Lets also use the other two style sheets. 7. Repeat steps 2 to 4, this time calling Style2.css and Style3.css 8. Save your webpage as With Style2.html and With Style3.html respectively.

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style

STYLE 1

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style

STYLE 2

HANDS-ON/MINDS-ON ACTIVITY Creating Web Page with External Style

STYLE 3

CSS Elements
ELEMENTS A A:ACTIVE A:LINK A:VISITED B BLOCKQUOTE BODY CENTER ELEMENTS ELEMENTS DIV CODE FORM H1-H6 I INPUT LI ELEMENTS HR

OL
SPAN TEXTAREA

P
STRONG TH

PRE
TABLE TR

ABBR
TD UL

CSS Properties
Background:
Background-color color, transparent Background-image URL, none Background-position percentage, length , center Background-attachment scroll, fixed

CSS Properties
Border:
Border-bottom length, color (thin, medium, thick, none, dotted, dashed, solid) Border-bottom-width length, thin, medium, thick Border-color color Border-left length, color (thin, medium, thick,

none, dotted, dashed, solid) Border-left-width length, thin, medium, thick

CSS Properties
Font:
Font-family arial, san serif, monospace, cursive, fantasy etc. Font-size percentage, length, larger, smaller, xxsmall, x-small, small, medium, large, x-large, xx-large Font-style normal, italic, oblique Font-variant normal, small-caps Fornt-weight normal, bolder, bold, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

CSS Properties
List:
List-style URL, disc, circle, square, decimal, lowerroman, upper-roman, lower-alpha, upper-alpha, none, inside, outside List-style-image URL, none List-style-position inside, outside List-style-type disc, circle, square, decimal, lowerroman, upper-roman, lower-alpha, upper-alpha, none

Develop a passion for learning. If you do, you will never cease to grow. ~ Anthony J. D'Angelo

You might also like