Cascading Style Sheets  [c.s.s] Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and f ont s
SYNTAX: CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;) selector [, selector2, ...][:pseudo-class] { property: value; [property2: value2;  ...] } /* comment */
USE: Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.
SOURCES: One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various style sheets provided by the designers, may remove all added style and view the site using his or her browser's default styling or may perhaps override just the red italic heading style without altering other attribute s. h1 { color: white; background-color: orange !important; } h2 { color: white; background-color: green !important;   }
where possible values for [media type] include the following: Value Suitable For all All devices. aural Speech synthesizers. braille Braille tactile feedback devices. handheld handheld devices. print material to be printed. projection Projected presentations. screen Computer screens. tv TV-type device
Advantages: *Flexibility *Separation of Content from Presentation *Site-wide consistency *Bandwidth *Page reformatting
Limitations: *Poor layout controls for flexible layouts  *Selectors are unable to ascen *Vertical control limitations  *Absence of expressions  *Lack of orthogonality *Control of element shapes  *Lack of column declaration  *Cannot explicitly declare new scope  independently of position  *Pseudo-class dynamic behavior not controllable *Inconsistent browser support
Color property: The color property allows webmasters to define the color of an element in a CSS stylesheet. This property takes values in 3 forms: # Hexadecimal code # RGB # Color name The general syntax for the color property is as follows: Hexadecimal code: {color:#XXXXXX;} -where X is a hexadecimal code. RGB: {color:rgb(X,Y,Z); }  where X, Y, and Z are numbers between 0 and 255 OR Color name: {color:[color_name];}
Text-decoration p {text-decoration:underline;} -for underlining p {text-decoration:underline;} -for underline p {text-decoration:line-through;}-line through
text-align p {text-align:left;} -This sentence illustrates what it looks like to be left-justified. p {text-align:right;}  -This sentence illustrates what it looks like to be right-justified. p {text-align:center;} -This sentence illustrates what it looks like to be centered. p {text-align:justify;} -This sentence illustrates what it looks like to be fully-justified.
text-transform p {text-transform:capitalize;} -this is a LAWYER p {text-transform:uppercase;} -this is a LAWYER p {text-transform:lowercase;} -this is a LAWYER
word-spacing The word-spacing property controls the amount of space between words. For example, with a CSS declaration of, p {word-spacing:5px;} The following HTML, <p>Words here are separated by 5px.</p> renders Words here are separated by 5px.
Float property One of the commonly-seen layout, especially in large websites displaying ads, is wrapping the text around an advertising block. This is accomplished using the float property. The float property has three possible values: 'left', 'right', and 'none'. Let's take a look at the following examples:  #leftfloat { float:left; }  The following html: <span id=&quot;leftfloat&quot;><img src=&quot;yp.jpg&quot;></span>This example illustrates how float:left affects the appearance of a block. Notice how the image &quot;floats&quot; to the left This example illustrates  how float:left affects the appearance of a block.  Notice how the image &quot;floats&quot; to the left.
Making table  In HTML code, you will commonly see the table tag followed by border, cellpadding, and cellspacing attributes. This would be unnecessary if we use CSS. The table, th, tr, and td selectors can use many of the properties we have defined previously in this tutorial such as, but not limited to, those for text, font, border, color, and background.  Let us create an example,
table { border: 0; font-family: arial; font-size:14px; } th { background-color:yellow; } td { border-bottom:1 solid #000000; } .fail { color:#FF0000; }  Style sheet codes
Following html codes: <table> <tr> <th>Student Name</th> <th>Score</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class=&quot;fail&quot;>55</td> </tr> </table>
Student Name  Score Stella    85 Sophie    95 Alice    55 would render the following:
Links : The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors: a:link:  Specifies how the link looks if the page it links to has not yet been visited. a:visited:  Specifies how the link looks if the page it links to has already been visited. a:hover:  Specifies how the link looks like when the user mouses over the link. a:active:  Specifies how the link looks like when the user clicks on it.
Let's take a look at the following declaration: a:link {color:#FF0000; text-decoration:none;} a:visited {color:#0000FF; text-decoration:none;} a:hover {font-size:20; color:#00FF00; text-decoration:underline;} a:active {color:#FF00FF; text-decoration:underline;}
What this means is the following: 1) When the page is first loaded, the font color is red. 2) Once the link is visited, the font color becomes blue. 3) When you mouse over the link, font size becomes 20, font color becomes green, and an underline appears. 4) When you click on the link, font color becomes pink, and the underline remain
Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows: .[Class Name] { property:value; ...} For example, .navbar { color:#0000FF; } To apply this style to the HTML, using the following code: <p class=&quot;navbar&quot;>This is a sample using a Class selector.</p> The above HTML code renders: This is a sample using a Class selector. Class
Media types: One can apply different CSS stylesheets for different media types (devices). For example, a stylesheet can be applied when a document is rendered on the screen, and a different stylesheet can be applied when that same document is to be printed. The syntax for specifying the media type for a stylesheet is as follows: External Link <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; media=&quot;[media type]&quot;> Embed <style type=&quot;text/css&quot; media=&quot;[media type]&quot;> Import @import url(&quot;style.css&quot;) [media type];
Box model: The box model is an important concept in CSS. It dictates how elements are laid out. The box model is shown beside:The innermost component is the content. Padding is applied outside the content area.
css-cursors { cursor: crosshair; } Mouse cursor is set to crosshair { cursor: pointer; } Mouse cursor is set to pointer { cursor: text; } Mouse cursor is set to text { cursor: move; } Mouse cursor is set to move { cursor: wait; } Mouse cursor is set to wait { cursor: help; } Mouse cursor is set to help { cursor: progress; } Mouse cursor is set to progress wed { cursor: all-scroll; } Mouse cursor is set to all-scroll { cursor: col-resize; } Mouse cursor is set to col-resize { cursor: row-resize; } Mouse cursor is set to row-resize { cursor: e-resize; } Mouse cursor is set to e-resize { cursor: ne-resize; } Mouse cursor is set to ne-resize

More Related Content

PPT
cascading style sheet ppt
PPT
CSS for Beginners
PPT
CSS
PPT
PPT
Css Ppt
PPTX
Cascading style sheet
ODP
Css.prabu
cascading style sheet ppt
CSS for Beginners
CSS
Css Ppt
Cascading style sheet
Css.prabu

What's hot (20)

PPT
ODP
Cascading Style Sheets - Part 01
PPTX
Html, CSS & Web Designing
PPTX
Css Complete Notes
ODP
PPS
Cascading Style Sheets
PPTX
css.ppt
PPT
Introduction to css by programmerblog.net
PPT
How Cascading Style Sheets (CSS) Works
PPT
Introduction to Cascading Style Sheets
PPT
Css lecture notes
PPT
Basics Of Css And Some Common Mistakes
PPTX
PPTX
PDF
CSS notes
PPTX
PPT
Chapter 4a cascade style sheet css
PPTX
L4 Fashioning Text Styles and Colors
Cascading Style Sheets - Part 01
Html, CSS & Web Designing
Css Complete Notes
Cascading Style Sheets
css.ppt
Introduction to css by programmerblog.net
How Cascading Style Sheets (CSS) Works
Introduction to Cascading Style Sheets
Css lecture notes
Basics Of Css And Some Common Mistakes
CSS notes
Chapter 4a cascade style sheet css
L4 Fashioning Text Styles and Colors
Ad

Similar to Css (20)

PPTX
Fundamental of Web Development Tutorials-CSS by PINFO Technologies.pptx
PPTX
css3.0.( Cascading Style Sheets ) pptx
DOCX
Css Introduction
PDF
css-ppt.pdf
PDF
CSCADING style sheet. Internal external inline
PPTX
Web - CSS 1.pptx
PPT
PDF
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
PPT
Make Css easy(part:2) : easy tips for css(part:2)
PPTX
Workshop 2 Slides.pptx
PPT
CSS - Basics
PPTX
PPT
3.2 introduction to css
PPT
3.2 introduction to css
PDF
Web Typography
PPTX
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
PPTX
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
PPTX
HTML to CSS Basics Exer 2.pptx
PPTX
Web Programming-css.pptx
Fundamental of Web Development Tutorials-CSS by PINFO Technologies.pptx
css3.0.( Cascading Style Sheets ) pptx
Css Introduction
css-ppt.pdf
CSCADING style sheet. Internal external inline
Web - CSS 1.pptx
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
Make Css easy(part:2) : easy tips for css(part:2)
Workshop 2 Slides.pptx
CSS - Basics
3.2 introduction to css
3.2 introduction to css
Web Typography
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
HTML to CSS Basics Exer 2.pptx
Web Programming-css.pptx
Ad

More from Rathan Raj (9)

PPTX
Database Normalization
PPTX
Photochemical smog
PPT
Web20
PPT
PPT
Apache
PPT
PPT
Linux
PPT
Mysql
PPT
Database Normalization
Photochemical smog
Web20
Apache
Linux
Mysql

Recently uploaded (20)

PDF
TrustArc Webinar - Data Minimization in Practice_ Reducing Risk, Enhancing Co...
PPTX
Information-Technology-in-Human-Society (2).pptx
PDF
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
PDF
Secure Java Applications against Quantum Threats
PDF
Advancements in abstractive text summarization: a deep learning approach
PDF
TicketRoot: Event Tech Solutions Deck 2025
PDF
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
PDF
ELLIE29.pdfWETWETAWTAWETAETAETERTRTERTER
PDF
substrate PowerPoint Presentation basic one
PDF
Addressing the challenges of harmonizing law and artificial intelligence tech...
PDF
Optimizing bioinformatics applications: a novel approach with human protein d...
PDF
【AI論文解説】高速・高品質な生成を実現するFlow Map Models(Part 1~3)
PPTX
Information-Technology-in-Human-Society.pptx
PDF
Ebook - The Future of AI A Comprehensive Guide.pdf
PDF
Domain-specific knowledge and context in large language models: challenges, c...
PDF
1_Keynote_Breaking Barriers_한계를 넘어서_Charith Mendis.pdf
PPTX
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
PPTX
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
PPTX
Presentation - Principles of Instructional Design.pptx
PPTX
From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]
TrustArc Webinar - Data Minimization in Practice_ Reducing Risk, Enhancing Co...
Information-Technology-in-Human-Society (2).pptx
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
Secure Java Applications against Quantum Threats
Advancements in abstractive text summarization: a deep learning approach
TicketRoot: Event Tech Solutions Deck 2025
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
ELLIE29.pdfWETWETAWTAWETAETAETERTRTERTER
substrate PowerPoint Presentation basic one
Addressing the challenges of harmonizing law and artificial intelligence tech...
Optimizing bioinformatics applications: a novel approach with human protein d...
【AI論文解説】高速・高品質な生成を実現するFlow Map Models(Part 1~3)
Information-Technology-in-Human-Society.pptx
Ebook - The Future of AI A Comprehensive Guide.pdf
Domain-specific knowledge and context in large language models: challenges, c...
1_Keynote_Breaking Barriers_한계를 넘어서_Charith Mendis.pdf
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
Presentation - Principles of Instructional Design.pptx
From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]

Css

  • 1. Cascading Style Sheets [c.s.s] Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and f ont s
  • 2. SYNTAX: CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;) selector [, selector2, ...][:pseudo-class] { property: value; [property2: value2; ...] } /* comment */
  • 3. USE: Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.
  • 4. SOURCES: One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various style sheets provided by the designers, may remove all added style and view the site using his or her browser's default styling or may perhaps override just the red italic heading style without altering other attribute s. h1 { color: white; background-color: orange !important; } h2 { color: white; background-color: green !important; }
  • 5. where possible values for [media type] include the following: Value Suitable For all All devices. aural Speech synthesizers. braille Braille tactile feedback devices. handheld handheld devices. print material to be printed. projection Projected presentations. screen Computer screens. tv TV-type device
  • 6. Advantages: *Flexibility *Separation of Content from Presentation *Site-wide consistency *Bandwidth *Page reformatting
  • 7. Limitations: *Poor layout controls for flexible layouts *Selectors are unable to ascen *Vertical control limitations *Absence of expressions *Lack of orthogonality *Control of element shapes *Lack of column declaration *Cannot explicitly declare new scope independently of position *Pseudo-class dynamic behavior not controllable *Inconsistent browser support
  • 8. Color property: The color property allows webmasters to define the color of an element in a CSS stylesheet. This property takes values in 3 forms: # Hexadecimal code # RGB # Color name The general syntax for the color property is as follows: Hexadecimal code: {color:#XXXXXX;} -where X is a hexadecimal code. RGB: {color:rgb(X,Y,Z); } where X, Y, and Z are numbers between 0 and 255 OR Color name: {color:[color_name];}
  • 9. Text-decoration p {text-decoration:underline;} -for underlining p {text-decoration:underline;} -for underline p {text-decoration:line-through;}-line through
  • 10. text-align p {text-align:left;} -This sentence illustrates what it looks like to be left-justified. p {text-align:right;} -This sentence illustrates what it looks like to be right-justified. p {text-align:center;} -This sentence illustrates what it looks like to be centered. p {text-align:justify;} -This sentence illustrates what it looks like to be fully-justified.
  • 11. text-transform p {text-transform:capitalize;} -this is a LAWYER p {text-transform:uppercase;} -this is a LAWYER p {text-transform:lowercase;} -this is a LAWYER
  • 12. word-spacing The word-spacing property controls the amount of space between words. For example, with a CSS declaration of, p {word-spacing:5px;} The following HTML, <p>Words here are separated by 5px.</p> renders Words here are separated by 5px.
  • 13. Float property One of the commonly-seen layout, especially in large websites displaying ads, is wrapping the text around an advertising block. This is accomplished using the float property. The float property has three possible values: 'left', 'right', and 'none'. Let's take a look at the following examples: #leftfloat { float:left; } The following html: <span id=&quot;leftfloat&quot;><img src=&quot;yp.jpg&quot;></span>This example illustrates how float:left affects the appearance of a block. Notice how the image &quot;floats&quot; to the left This example illustrates how float:left affects the appearance of a block. Notice how the image &quot;floats&quot; to the left.
  • 14. Making table In HTML code, you will commonly see the table tag followed by border, cellpadding, and cellspacing attributes. This would be unnecessary if we use CSS. The table, th, tr, and td selectors can use many of the properties we have defined previously in this tutorial such as, but not limited to, those for text, font, border, color, and background. Let us create an example,
  • 15. table { border: 0; font-family: arial; font-size:14px; } th { background-color:yellow; } td { border-bottom:1 solid #000000; } .fail { color:#FF0000; } Style sheet codes
  • 16. Following html codes: <table> <tr> <th>Student Name</th> <th>Score</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class=&quot;fail&quot;>55</td> </tr> </table>
  • 17. Student Name Score Stella 85 Sophie 95 Alice 55 would render the following:
  • 18. Links : The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors: a:link: Specifies how the link looks if the page it links to has not yet been visited. a:visited: Specifies how the link looks if the page it links to has already been visited. a:hover: Specifies how the link looks like when the user mouses over the link. a:active: Specifies how the link looks like when the user clicks on it.
  • 19. Let's take a look at the following declaration: a:link {color:#FF0000; text-decoration:none;} a:visited {color:#0000FF; text-decoration:none;} a:hover {font-size:20; color:#00FF00; text-decoration:underline;} a:active {color:#FF00FF; text-decoration:underline;}
  • 20. What this means is the following: 1) When the page is first loaded, the font color is red. 2) Once the link is visited, the font color becomes blue. 3) When you mouse over the link, font size becomes 20, font color becomes green, and an underline appears. 4) When you click on the link, font color becomes pink, and the underline remain
  • 21. Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows: .[Class Name] { property:value; ...} For example, .navbar { color:#0000FF; } To apply this style to the HTML, using the following code: <p class=&quot;navbar&quot;>This is a sample using a Class selector.</p> The above HTML code renders: This is a sample using a Class selector. Class
  • 22. Media types: One can apply different CSS stylesheets for different media types (devices). For example, a stylesheet can be applied when a document is rendered on the screen, and a different stylesheet can be applied when that same document is to be printed. The syntax for specifying the media type for a stylesheet is as follows: External Link <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; media=&quot;[media type]&quot;> Embed <style type=&quot;text/css&quot; media=&quot;[media type]&quot;> Import @import url(&quot;style.css&quot;) [media type];
  • 23. Box model: The box model is an important concept in CSS. It dictates how elements are laid out. The box model is shown beside:The innermost component is the content. Padding is applied outside the content area.
  • 24. css-cursors { cursor: crosshair; } Mouse cursor is set to crosshair { cursor: pointer; } Mouse cursor is set to pointer { cursor: text; } Mouse cursor is set to text { cursor: move; } Mouse cursor is set to move { cursor: wait; } Mouse cursor is set to wait { cursor: help; } Mouse cursor is set to help { cursor: progress; } Mouse cursor is set to progress wed { cursor: all-scroll; } Mouse cursor is set to all-scroll { cursor: col-resize; } Mouse cursor is set to col-resize { cursor: row-resize; } Mouse cursor is set to row-resize { cursor: e-resize; } Mouse cursor is set to e-resize { cursor: ne-resize; } Mouse cursor is set to ne-resize