1 / 13

Understanding CSS: Concepts and Implementation for Web Design

Learn about CSS concepts such as selectors, declarations, and the benefits of styling web content. Discover how to apply CSS to elements, override default styles, and organize CSS rules effectively. Practice with examples of inline, internal, and external style sheets for efficient web design.

karl
Download Presentation

Understanding CSS: Concepts and Implementation for Web Design

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 Cavalcading Style Sheets Hussain Al-Arrayed

  2. Pre-CSS Concepts • Containment: makes it possible for the web browser to know precisely where content contained by an element begins and end. i.e. Each <P> should have a </P>  XHTML. • Block-level (h1..h6, ul, p,..) vs. Inline text elements (b, i, u,…).

  3. Why Need CSS? • HTML made text display and formatting easy. • It works well when you have few pages that are short in length. • Imagine you manage a website with tens of pages, each heading should be in green  <font color=“green”><h3>… • Suppose you want to change it to red?

  4. Example of CSS <head> <style type="text/css"> h3 {font-family: Arial, sans-serif;color:green; text-align:center;} p {font-family: "times new roman", serif; color:red; text-align:left;} </style> </head>

  5. CSS – What do they do? Allows you to override the default browser style sheet. • Easy to modify • Save time • Reduce the error

  6. CSS • CSS is basically a set of rules to indicate how to display each HTML element. • Each CSS rule consist of a selector and a declaration. • Ex:

  7. CSS • A selector identifies the tag (element) to be styled, while the declaration identifies the style(s) to be applied. • Each declaration contains pair(s) of properties and values. • Ex:

  8. CSS - Selectors • You can group selectors for a group of declarations: Ex: H1, H2, H3 { font-style: bold } • Multiple Selectors: Ex: H1, H2, H3 { font-style: bold } H1 {color:silver} H2 {color:blue} H3 {font: italic}

  9. Contextual Selector • You can specify an element style which will only be applied within another element. Ex: p b {color : maroon}  means that only text within the <b> inside a <p> will be in maroon!

  10. Class Selector • Class selectors will override any style selected initially. • Class selector rule example: Ex: .isgreen {color : green} • If used with any style it, it will override the default color. Ex: <h2 class="isgreen">

  11. Placing Style Sheets • Inline Style Sheets, styles can be defined within tags: Ex: <p style=“color:silver;”> Not recommended – mixing style with structure. • Internal Style Sheets, what we have been discussing so far, i.e. use of <style> tag

  12. Placing Style Sheets • External Style Sheets: Write the style in a separate file (mySS.css) • Refer to the file using a link tag in the head section of the HTML file. • <link rel=“stylesheet” type=“text/css” href=“mySS.css”>

  13. Exercise

More Related