1 / 25

INTRO CSS

INTRO CSS. CSS Cascading Style Sheets Tutorial: http://www.w3schools.com/Css/css_intro.asp http://www.tizag.com/cssT/index.php Benefits Separates presentation from structure Allows for easier updates of pages Allows for more control of presentation More efficient. Location of Styles.

john
Download Presentation

INTRO CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INTRO CSS • CSS Cascading Style Sheets • Tutorial: http://www.w3schools.com/Css/css_intro.asp • http://www.tizag.com/cssT/index.php • Benefits • Separates presentation from structure • Allows for easier updates of pages • Allows for more control of presentation • More efficient

  2. Location of Styles • Where to put CSS styles • Inline • Embedded • External style sheets • Inline • Added to the html tags • <p style=“color:blue;”> text </p> • Has effect only on that tag • Similar to adding presentational markup like font tag • Use sparingly • Use to test a style

  3. Embedded Style Sheets • Embedded • Place in the head section of HTML document <head> <style type=“text/css”> h2 {font-size: 12px;} P {color:red;} </style> </head>

  4. Embedded Style Sheets • Embedded • Styles affect the whole page • Embedded styles are “closer” to the document so they take precedence over external style sheets • Inline styles are closer to the document than embedded and take precedence over embedded • This is only important if there is a conflict

  5. External Style Sheets • External Style Sheets • All styles exist in a separate document with the file extension .css • Web pages are linked to the style sheet(s) through the <link> tag in the head section of webpage • <link href=“stylesheet_filename.css” media=“screen” rel=“stylesheet” type=“text/css” /> • Styles are applied to each page that links to stylesheet • Easy to write styles that affect the whole website

  6. CSS Rules • CSS Rules • Consists of the selector and the declaration • Selectors • Usually HTML tags • This is the target for the style • Declaration • Property – like color, font-size etc • Value – actual size, type of color etc

  7. CSS Rules • p {color:blue;} • p – selector – it’s the paragraph tag without the <> • color – property • blue – value • Don’t leave out semicolon • Syntax errors cause rule to be ignored

  8. Selectors • Common selectors to start with include: • p • h1-h6 • Common properties include: • font-size • font-family • color • background color • Example of CSS properties • http://htmlhelp.com/reference/css/properties.html

  9. CSS Rules • Writing rules • Multiple declarations in one rule • p {color:blue; font-size:16px; background-color:orange;} • Multiple selectors on one line • H1, h2, h3 {color:red; background-color:green;}

  10. Document Hierarchy • Document Hierarchy • Browser reads tags and creates a hierarchy – like a tree • Parent • Child • Sibling(s) • Ancestry • Important to know for CSS

  11. Structure Document Hierarchy - Tree-like structure of nested tags. - Helps to use indents to tell anyone looking at your code which tags belong in which “branch” of the tree. - Understanding this concept is the basis of understanding the power of CSS.

  12. Document Hierarchy • Document Hierarchy <html> <body> <div> <h1> <h2> <p></p> </div> </body> </html> • Look at relationships between parent and children and siblings

  13. Contextual Selectors • Contextual Selectors • Regular selector such as p targets all paragraphs on the page • Using the document hierarchy we can choose specific tags in the ancestry chain of parent child relationship • Two new tags • Div – defines a section of the HTML document • Used to group a set of HTML elements and then apply a style to all of them <div> <h2> This is a header </h2> <p> This is a paragraph </p> </div> From Stylin with CSS by Charles Wyke -Smith

  14. Contextual Selectors • Contextual Selectors • Span Tag • A tag used to define a section of text in which a style will be applied. • This is an <span>example</span> of using the span tag. • The div and span tags are used to section or divide a document into related areas. For example divs can define areas such as header, navigation, content and footer. And span tags typically are used to define smaller textual areas like part of a paragraph.

  15. Contextual Selectors • Contextual Select <h1>This is some sample code </h1> <p> This is a paragraph. It has two sentences <em>and </em> one emphasis.</p> <p> This is another paragraph. It also has two sentences. This sentence <span> has a span tag in it <em> along</em> with an emphasis tag</span></p>

  16. Contextual Selectors • Contextual Selectors • Document Hierarchy of Example • Level 1 – body • Level 2 – h1 – p –p • Level 3 – em – em - span • Level 4 -----------------em

  17. Contextual Selectors • Contextual Selectors • If you applied the following style: em {color:green;} all the text within the em tags would turn green • If you only want the em text within the p tags to be green: • p em {color:green;} • Note: there is a space between p and em not a comma. If there was a comma then all p and em text would be green. • Now only em tags within a p tag will be green • Keep in mind that this is any em that has a p in its ancestry – not just an immediate parent – p->div>ul->em would work too. • p span em {color:green;} – applies only to an em preceded by a span and a p

  18. CSS Classes • Class attribute • A technique for identifying specific areas of a document without regard to the document hierarchy • Can be overused – if contextual selectors work use them first • Class attributes can be applied to existing tags in the document • A class selector is written with a period • .specialclass {font-size:12px;}

  19. CSS Classes • Class Attribute <div> <h1 class=“special”> This is a header within a div. It has two sentences </h1> <p> This paragraph has no tags inside of it. </p> <p class=“special”> This is a paragraph. It has information for the user to read. It may <span> have other tags</span> too.</p> </div> CSS Rules: p { font-size:12px;} .special {font-weight:bold;} • Notice classes can be used multiple times

  20. CSS Classes • Class Attribute • Contextual Class Selectors • You can combine tag name and a class p {font-size:12px;} .special {font-weight:bold;} p.special {color:red;} • Here the class must be assigned to a paragraph for the rule to be applied • p.special span – a span tag nested in a paragraph with the special class applied to it • .special span – a span tag nested within any tag using the class attribute special • You can apply multiple classes to a tag • <div class=“special highlight”> ….

  21. CSS ID’s • ID selector • Similar to classes except a # sign is used and can only be used ONCE per page. • Ex: <p id=“unique”> This is a sentence</p> #special {font-weight:bold;} • ID’s are often used to demarcate special sections of a page such as header, navigation, content and footer since they usually only occur once

  22. CSS ID’s • ID selector • ID’s are used with Javascript to target a particular tag • We will be using ID’s in class for both web design and for Javascript so become familiar with its usage. • Avoid over usage of ID’s and classes – it’s better to use contextual selectors along with ID’s and classes • Avoid classitis: • http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html • http://www.cssnewbie.com/combating-classitis/

  23. Web Development Tools • Firefox Web developer • Has many tools for analyzing and working with CSS • Can disable styles for a web page • Can view CSS – will import style sheets too • Can edit CSS in real time • CSS Validator • Use it!!! • http://jigsaw.w3.org/css-validator/

  24. Resources • Tutorials on CSS • http://www.w3schools.com/Css/default.asp • http://htmldog.com/guides/cssbeginner/ • http://www.html.net/tutorials/CSS/ • An interesting site to review and appreciate – Zen Garden • http://www.csszengarden.com/

  25. More Resoyrces • A number of good tutorial on CSS on the web • http://www.w3schools.com/Css/default.asp • http://css.maxdesign.com.au/ • Especially good for learning about inheritance and the cascade and lists • http://www.tizag.com/cssT/

More Related