Introduction to CSS: Styling HTML with Selectors, Colors, and Classes
This document provides an overview of CSS concepts and techniques essential for styling HTML documents. It covers the basics of CSS rules, selectors (including tag, class, and ID selectors), and how to apply styles such as colors, fonts, margins, and paddings. Key sections include defining font families, using color specifications (predefined names, hexadecimal, and RGB), and creating a separate stylesheet for better organization. This guide is intended for students of CS.142, enhancing their understanding of CSS for web development.
Introduction to CSS: Styling HTML with Selectors, Colors, and Classes
E N D
Presentation Transcript
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
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
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
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
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
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
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
