1 / 8

Introduction to CSS: Styling HTML Elements with Selectors and Properties

This lecture note covers the fundamentals of CSS, focusing on selectors, properties, and their application to HTML elements. It explains how to use the body selector to set font-family, color, and background, along with the use of classes and IDs to style specific elements. Key topics include color specifications in CSS, such as RGB and hexadecimal values, as well as managing box models with margins and padding. Additionally, it illustrates how to link external stylesheets for better organization and maintainability of CSS in web development.

heath
Télécharger la présentation

Introduction to CSS: Styling HTML Elements with Selectors and Properties

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 Rule Selector body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } DeclarationBlock Value Attribute Name CS 142 Lecture Notes: CSS

  2. CSS Selectors CSS HTML Tagname h1 { color: red;} <h1>Today’s Specials</h1> Classattribute .large { font-size: 16pt;} <p class="large">... Tag and class p.large {...} Idattribute #p20 { font-weight: bold; } <p id="p20">... table.itemstr.header CS 142 Lecture Notes: CSS

  3. R R G G B B CSS Color Specifiers • Predefined names: white black red … • 8-bit hexadecimal intensities for red, green, blue: • 0-255 decimal intensities: • Percentage intensities: #ff0000 rgb(255,255,0) R G B rgb(80%,80%,100%) CS 142 Lecture Notes: CSS

  4. CSS Element Boxes Parent’s background used in margin area Border Margin Padding Element Content Padding Element’s background used in padding area CS 142 Lecture Notes: CSS

  5. CSS Distances 2pxpixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em,4ex other printer’s units CS 142 Lecture Notes: CSS

  6. Adding Styles to HTML Separate Stylesheet <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; ... } </style> </head> <body> ... <div style="padding:2px; ... "> ... </body> Page-Specific Styles Element-Specific Styles CS 142 Lecture Notes: CSS

  7. CSS: HTML: body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black } .shaded { background: #d0d0ff; } <body> <h1>First Section Heading</h1> <p> Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. </p> <div class="shaded"> <h1>Another Section Heading</h1> <p> Another paragraph. </p> </div> </body> CS 142 Lecture Notes: CSS

  8. CS 140 Lecture Notes: File Systems

More Related