CSS Introduction
Post on 30-Oct-2014
119 Views
Preview:
DESCRIPTION
Transcript
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
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>
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 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
HANDS-ON/MINDS-ON ACTIVITYCreating 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 ACTIVITYCreating 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 ACTIVITYCreating Web Page with External Style
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.
HANDS-ON/MINDS-ON ACTIVITYCreating Web Page with External Style
STYLE 1
HANDS-ON/MINDS-ON ACTIVITYCreating Web Page with External Style
STYLE 2
HANDS-ON/MINDS-ON ACTIVITYCreating Web Page with External Style
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
top related