CSS Introduction

CSS INTRODUCTIONWeb Designing with HTML and CSS

byMarlon L LalagunaTLE-ICT TeacherGen. T. de Leon NHS

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 object’s 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

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 CSS’s 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>


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. 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 ACTIVITYCreating 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 ACTIVITYCreating Web Page with External Style1. Now, it’s 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


1. For the second style, type the codes given here.

2. Save your file as Style2.css


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!


1. Now, we’ll 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.html6. Let’s 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.


STYLE 1


STYLE 2


STYLE 3

CSS ElementsELEMENTS ELEMENTS ELEMENTS ELEMENTS

A B DIV HR

A:ACTIVE BLOCKQUOTE CODE I

A:LINK BODY FORM INPUT

A:VISITED CENTER H1-H6 LI

OL P PRE ABBR

SPAN STRONG TABLE TD

TEXTAREA TH TR 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,

xx-small, 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,

lower-roman, 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,

lower-roman, upper-roman, lower-alpha, upper-alpha, none

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

Documents

CSS Introduction