1 / 40

Css Basics

Css Basics. CSS Rules. Components of a CSS Rule. Selector : Part of the rule that targets an element to be styled Declaration : Two or more parts: a property and a value Property : Aspect of an element that is modified, e.g., color, width, etc.

cutter
Download Presentation

Css Basics

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. Css Basics

  2. CSS Rules

  3. Components of a CSS Rule • Selector: Part of the rule that targets an element to be styled • Declaration: Two or more parts: a property and a value • Property: Aspect of an element that is modified, e.g., color, width, etc. • Value: The specific style applied to the selected element

  4. CSS Selectors • CSS selectors can specify from one to many elements • The Universal Selector * { color: blue; } Selects all foreground (text) elements on the page and colors them blue

  5. Element Selector • Selects all elements specified by a tag name • More specific than the universal selector • Still, not very specific since it selects ALL occurrences of the chosen element em { color: red; } will color each instance of the em (emphasize) element on the page red

  6. Class Selector • Targets any element with the class name in its class attribute • Can be applied to almost every element • Any number of elements can belong to the same class…not very specific .info { color: purple; } will color any text in the class info purple

  7. ID Selector • Will select ONLY the element with the specified ID • Almost any element can have an ID attribute • The value of that attribute can be used only ONCE per page • Since an ID selector can only be used once per page, the ID selector is more specific than the class selector #introduction { color: green; } Will give the element with the ID introduction a green foreground

  8. Pseudo Class Selectors • Like a class selector, but selects an element in a particular state • The same specificity as the class selector • Preceded by a colon ( : ) • Order is important • :link { color: blue; } selects all hyperlinks and colors the text blue • :visited { color: purple; } selects all previously selected hyperlinks and colors the text purple • :hover { color: green; } selects an element (usually a hyperlink) and colors the text green

  9. Pseudo Classes (continued) • :active { color: red; } selects links that are being clicked by a mouse (or the RETURN key being pressed) and colors the text red • :focus { color: orange; } selects an element that has the focus and colors the text orange…not supported by all browsers

  10. Descendant (Contextual) Selectors • Created from two or more of the previously described basic selector types separated by spaces • Will select elements matching that position in the document tree

  11. Descendant (Contextual) Selectors • Examples #introduction em { color: yellow; } will color any em element within the ID #introduction yellow #introduction .info p * { color: pink; } Will color the foreground of anything pink that is in a P element that is within the .info class, that is within the ID #introduction

  12. Combining Selectors • Two or more selector types can be combined, e.g., an element and an ID, or and ID and a class p.info { color: green; } the foreground of anything in element p within class .info is colored green p#introductiona.info:hover { color: silver; } Selects hovered links (a elements) belonging to the .info class that are within the p element of the ID #introduction

  13. Grouping Selectors • Selectors can be grouped together to form a single rule • Selectors are separated by commas p, h1, h2 { color: blue; } Colors any p element, h1 or h2 element blue p#introductionem, a.info:hover, h2.info { gold; } Selects all em elements within the paragraph element with ID #introduction, all hovered links with class info, and h2 elements in the info class

  14. Specificity and Cascading • Given: h2 { color: orange; } .title { color: blue; } <h2 class=“title”>Specificity and the Cascade</h2> What will happen? Because classes are more specific than elements, the class takes precedence and the text color is blue

  15. Specificity and Cascading • Rules of specificity (in reverse order): • Universal selector: not specific at all • Element selector: more specific than a universal selector • Class or pseudo class selector: more specific than an element selector • ID selector: more specific than a class or pseudo class selector • Properties in an inline style attribute are the most specific of all

  16. Cascading • Given: .info h2 { green; } h2.title { orange; } • In this case, h2 in the title class is a descendent of h2 in the info class. • Both of the above rules should apply to h2 because the selectors are equal in specificity • But, style declarations are applied in the order they are received, so later declarations override earlier ones

  17. Cascade Order • Since style declarations are applied in the order they are received, later declarations override prior ones • This is true whether the declarations occur in the same rule, in a separate rule in the same style sheet, or in a separate style sheet downloaded after a prior one p { color: black; color: green; } color: green will override color: black because it is declared after (later than) color: black

  18. In-line Styles <html> <head> <title>HTML and CSS</title> </head> <body> <h1 style="color: black; text-align:center">Inline Styles</h1> <h1 style="color: red; text-align:left">It is easy to use CSS</h1> <h1 style="color: blue; text-align:center">It is easy to use CSS</h1> <h1 style="color: green; text-align:right">It is easy to use CSS</h1> </body> </html>

  19. Embedded Styles Using Classes <html> <head> <style> h1.left {text-align:left;color:red;} h1.center {text-align:center;color:black;} h1.right {text-align:right;color:green;} </style> <title>HTML and CSS</title> </head> <body> <h1 class="center">Embedded Styles</h1> <h1 class="left">It is easy to use CSS</h1> <h1 class="center">It is easy to use CSS</h1> <h1 class="right">It is easy to use CSS</h1> </body> </html>

  20. Embedded Styles Using IDs <html> <head> <style type="text/css"> #myid {border-width: 1; border: solid; text-align: center} </style> </head> <body> <h1 class="myclass"> This h1 is not affected </h1> <h1 id="myid"> This h1 is affected by style </h1> <h1> This h1 is not affected </h1> </body> </html>

  21. Why Not Inline Styles? • The browser has to process too much redundant code • If an inline style has to be changed, you’ll have to find every instance of that style and change it • This can be tedious work with a large website • Inline styles apply to only one line at a time • Inline styles are not constructed as rules, defeating the purpose of CSS

  22. Why Not Embedded Styles? • They only apply to one page at a time • Other pages in the website have to have their own embedded styles…more redundant code

  23. External Style Sheets Contents of mystyle.css: h1 {color: black; text-align: center;} h2 {color: blue; text-align: center;} Contents of ExternalStyle.html: <html> <head> <link type="text/css" rel="stylesheet" href="mystyle.css"> <title>A Web Page Using an External Style Sheet</title> </head> <body> <h1>A Web Page Using an External Style Sheet</h1> <h2>It is easy to use HTML</h2> </body> </html>

  24. Why External Style Sheets? • Since external style sheets are downloaded only once, then cached, pages load faster • Presentation and structure are completely separated • Allows your entire site’s visual design to be controlled by one style sheet

  25. Cascade Order • Browser Style Sheet • User style sheet • Author style sheets (in the order that they are linked or embedded) • Inline author styles

  26. A Rule of Thumb • The style closest to the content wins • Whichever value is declared last will be the one applied when the content is rendered

  27. !important • !important will force the browser to honor that value above all others • The !important directive must be placed at the end of the value before the semicolon h1 { color: red !important; }

  28. Formatting CSS • Two general formats: • extended • compacted

  29. Extended Formatting h1, h2, h3 { color: red; } h1 { font-size: 160%; } h2 { font-size: 130%; }

  30. Compacted Format h1, h2, h3{color:red;} h1{font-size:160%;} h2{font-size:140%;} h3{font-size:120%;margin-bottom:.5em;}

  31. Semicompacted Format h1, h2, h3 { color: red; } h1 { font-size: 160%; } h2 { font-size: 140%; } h3 { font-size: 120%; margin-bottom: .5em; }

  32. CSS Comments /* these base styles apply to all headings */ h1, h2, h3, h4, h5, h6 { color: red; } /* adjust some sizes */ h1 {font-size: 180%; } h2 { font-size: 160%; } h3 { font-size: 140%; } /* hide these rules h4 {font-size: 120%; } h5 { font-size: 100%; } h6 { font-size: 80%; } End hiding */

  33. Font Families • A rule for setting the Font Family of an Element Body { font-family: Georgia, “Times New Roman”, Times, serif } Note double quotes…

  34. Using CSS with Anchors • <head> • <style type="text/css"> • a:link { color: red; text-decoration: underlined; font- size: 180%; } • a:visited { color: green; text-decoration: none; font- size: 180%;} • a:hover {color: blue; text-decoration: none; font- size: 250%;} • </style> • <title>Using CSS with Anchors</title> • </head>

  35. Using CSS with Anchors • <html> • <head> • <style type="text/css"> • a:link { color: red; text-decoration: underlined; font-size: 180%; } • a:visited { color: green; text-decoration: none; font-size: 180%;} • a:hover {color: blue; text-decoration: none; font-size: 250%;} • </style> • <title>Using CSS with Anchors</title> • </head> • <body> • <p> • <a href=“http://analog.net/”>analog24.net</a> • </p> • </body> • </html> • run StyleLinks.html

  36. Using Links - Changing Backgrounds • <head> • <style type="text/css"> • a {color: black; • font: 12px Arial,Helvetica,sans-serif; • text-decoration: none; • border: 2px solid black; • display: block; • width: 200px; • padding: 3px 10px; • background: #dcdcdc;} • a:hover, a:active, a:focus { • background: #4169E1; • font-weight: bold;} • </style> • <title>Using Links - Changing Backgrounds</title> • </head>

  37. Using Links - Changing Backgrounds • <html> • <head> • <style type="text/css"> • a {color: black; • font: 12px Arial,Helvetica,sans-serif; • text-decoration: none; • border: 2px solid black; • display: block; • width: 200px; • padding: 3px 10px; • background: #dcdcdc; • } • a:hover, a:active, a:focus { • background: #4169E1; • font-weight: bold; • } • </style> • <title>Using Links - Changing Backgrounds</title> • </head> • <body> • <p> • Options:<br/> • <a href="home.html">Home</a><br /> • <a href="menu.html">Menu</a><br /> • <a href="locations.html" >Locations</a> • </p> • </body> • </html> • run BackgroundLinks.html

  38. Buttons for Links • <head> • <style type="text/css"> • a {color: black; • font: 12px Arial,Helvetica,sans-serif; • text-decoration: none; • display: block; • width: 200px; • height: 22px; • padding-top:8px; • text-align:center; • background-image: url('btnOn.gif');} • a:hover { • background-image:url('btnOff.gif'); • font-weight: bold;} • </style> • <title>Using Links with Background Images</title> • </head>

  39. Using Buttons for Links • <html> • <head> • <style type="text/css"> • a {color: black; • font: 12px Arial,Helvetica,sans-serif; • text-decoration: none; • display: block; • width: 200px; • height: 22px; • padding-top:8px; • text-align:center; • background-image: url('btnOn.gif');} • a:hover { • background-image:url('btnOff.gif'); • font-weight: bold;} • </style> • <title>Using Links with Background Images</title> • </head> • <body> • <p> • Options: • <a href="home.html">Home</a><br /> • <a href="news.html">News</a><br /> • <a href="menu.html">Menu</a><br /> • <a href="locations.html">Locations</a> • </p> • </body> • </html> • run ButtonLinks.html

  40. CSS and Tables • TableBorder.html • TableAlignment.html • TableBackground.html

More Related