Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 7

    Uploaded by

    kmani11811
    7 views15 pages
    This document provides an introduction to CSS, including CSS rules, methods of inserting CSS like inline, internal and external stylesheets, CSS selectors, and selector precedence. CSS is a stylesheet language used to describe the presentation of HTML documents. There are different types of CSS selectors that target specific elements to style. Styles can be applied via inline, internal and external stylesheets, with inline having the highest precedence and external the lowest.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction to CSS, including CSS rules, methods of inserting CSS like inline, internal and external stylesheets, CSS selectors, and selector precedence. CSS is a stylesheet language used to describe the presentation of HTML documents. There are different types of CSS selectors that target specific elements to style. Styles can be applied via inline, internal and external stylesheets, with inline having the highest precedence and external the lowest.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    7 views15 pages

    Lecture 7

    Uploaded by

    kmani11811
    This document provides an introduction to CSS, including CSS rules, methods of inserting CSS like inline, internal and external stylesheets, CSS selectors, and selector precedence. CSS is a stylesheet language used to describe the presentation of HTML documents. There are different types of CSS selectors that target specific elements to style. Styles can be applied via inline, internal and external stylesheets, with inline having the highest precedence and external the lowest.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 15

    Web Technologies

    Introduction to CSS
    Today’s Lecture
    • CSS Introduction
    • CSS Rules
    • Inserting CSS
    – Inline CSS
    – Internal CSS
    – External CSS
    • CSS Selectors
    • CSS Selectors Precedence
    CSS
    • CSS (Cascading Style Sheets)
    – It’s a stylesheet language that used to describe the presentation
    of a document written in HTML.
    • CSS was proposed by Hakon Wium Lie in 1994.
    – At that time, Hakon Wium Lie was working with Tim Berners-
    Lee at CERN.
    • CSS1 was introduced by W3C in 1996.
    – Hakon Wium Lie and Bert Bos are credited as the original
    developers.
    • CSS2 was published by W3C in 1998.
    • CSS3 was published by W3C in 1999.
    – Several new functionalities have been provided through CSS3
    like background decoration, rounded corners, box shadows etc.
    CSS Rules
    CSS Rules
    • Selector
    – It describes which element(s) within the HTML document to
    target and apply styles.
    – Syntax
    • Selector { property: value; }
    CSS Rules
    • Declaration
    • Property
    • It determines styles that will be applied to the element.
    • Property names fall after a selector, within curly brackets {}
    and immediately preceding a colon :
    • There are various properties we can use.
    – Example: color, and font-size.
    – p { color: orange; font-size: 16px; }
    – Value
    • Behavior of the property is determined with a value.
    • Values can be identified as the text between colon : and
    semicolon ;
    – p { color: orange; font-size: 16px; }
    Inserting CSS
    • When a browser reads a style sheet, it will format the HTML
    document according to the information in the style sheet.
    • There are three ways of inserting CSS:
    – Inline CSS
    – Internal CSS
    – External CSS
    Inserting CSS
    • Inline CSS
    – It’s used to apply a style for a single element.
    – To use inline CSS, add ‘”style’’ attribute to relevant element.
    – Style attribute can contain any CSS property.
    – Used of inline CSS overrides and styling a particular element.
    <body>
    <h1 style="color:blue;">Welcome Dear Students</h1>
    <p style="color:red;">Web Technologies</p>
    </body>
    Inserting CSS
    • Internal CSS
    – It used if one single HTML page has a unique style.
    – To use Internal CSS, add <style> in <head> section of relevant page.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {background-color: powderblue;}
    h1 {color: green;}
    p {color: red;}
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p style="color: blue;">This is a paragraph.</p>
    </body>
    </html>
    Inserting CSS
    • External CSS
    • It’s ideal when style is applied to many pages.
    • To use External CSS, add <link> of a CSS file (.css file extension)
    in <head> section.
    • <link rel=“stylesheet” href=“mystyle.css”>
    – External style sheet can be written in any text editor but must
    be saved with .css extension.
    Inserting CSS
    • External CSS
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    CSS Selectors
    • Simple Selectors
    – CSS Universal Selector, CSS Element Selector, CSS Class Selector,
    and CSS ID Selector.
    • Pseudo-Class Selectors
    – Link Pseudo-Classes, User Action Pseudo-Classes, and User
    Interface State Pseudo-Classes.
    • Attribute Selectors
    – Attribute Present Selector, Attribute Equals Selector, Attribute
    Contains Selector, Attribute Begins with Selector, and Attribute
    Ends with Selector.
    • Combining Selectors
    – Child Selectors (Descendant Selector, and Direct Child Selector),
    and Sibling Selectors (General Sibling Selector, and Adjacent
    Sibling Selector).
    CSS Selectors Precedence
    • Which styles will be applicable when there is more than one style
    specified?
    • All styles cascade into a stylesheet in this order with highest to
    lowest priority in the sequence:
    – Inline CSS
    – Internal CSS
    – External CSS
    – Browser's default styles
    Summary of Today’s Lecture
    • CSS Introduction
    • CSS Rules
    • Inserting CSS
    – Inline CSS
    – Internal CSS
    – External CSS
    • CSS Selectors
    • CSS Selectors Precedence
    References
    • https://www.w3schools.com/css/default.asp
    • https://www.w3schools.com/css/css_intro.asp
    • https://www.w3schools.com/css/css_syntax.asp
    • https://www.w3schools.com/html/html_css.asp

    You might also like