CSS Introduction

CSS INTRODUCTION
Web Designing with HTML and CSS

by Marlon L Lalaguna TLE-ICT Teacher Gen. 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 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>

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

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

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, 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.
STYLE 1
STYLE 2
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

CSS Introduction

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CSS Introduction

Загружено:

Авторское право:

Доступные форматы

CSS INTRODUCTION

Web Designing with HTML and CSS

CSS Solved a Big Problem

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

3 Different Ways to Insert CSS

3 Different Ways to Insert CSS

3 Different Ways to Insert CSS

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

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

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

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

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

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

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

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

Вам также может понравиться