Scribd
Upload
178 views

CSS Rule: Selector

CSS allows styling of HTML elements using selectors, declarations, and property-value pairs. Selectors target elements by tag name, class, ID, or other attributes. Declarations are applied within curly braces and contain property-value pairs that specify attributes like color, font, size, and more. Styles can be defined internally in <style> tags or externally in separate .css files linked via <link> tags.

Uploaded by

gurusodhii
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
178 views

CSS Rule: Selector

CSS allows styling of HTML elements using selectors, declarations, and property-value pairs. Selectors target elements by tag name, class, ID, or other attributes. Declarations are applied within curly braces and contain property-value pairs that specify attributes like color, font, size, and more. Styles can be defined internally in <style> tags or externally in separate .css files linked via <link> tags.

Uploaded by

gurusodhii
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS Rule

Selector

body { font-family: Tahoma, Arial, sans-serif; color: black; Declaration background: white; Block margin: 8px; }

Value

Attribute Name

CS 142 Lecture Notes: CSS

Slide 1

CSS Selectors
CSS
Tag name h1 { color: red; } Class attribute .large { font-size: 16pt; } p.large {...} #p20 { font-weight: bold; } table.items tr.header
CS 142 Lecture Notes: CSS Slide 2

HTML
<h1>Todays Specials</h1>

<p class="large">...

Tag and class


Id attribute

<p id="p20">...

CSS Color Specifiers


Predefined names:
white black red

8-bit hexadecimal intensities for red, green, blue:

#ff0000
R G B

0-255 decimal intensities:

rgb(255,255,0)
R G B

Percentage intensities:

rgb(80%,80%,100%)
R G B
CS 142 Lecture Notes: CSS Slide 3

CSS Element Boxes


Parents background used in margin area Margin Border

Element Padding Content

Padding

Elements background used in padding area


CS 142 Lecture Notes: CSS Slide 4

CSS Distances
2px 1mm 2cm 0.2in 3pt 2em, 4ex pixels millimeters centimeters inches printers points other printers units

CS 142 Lecture Notes: CSS

Slide 5

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> Page-Specific Styles ... <div style="padding:2px; ... "> ... </body>

Element-Specific Styles CS 142 Lecture Notes: CSS

Slide 6

CSS:
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; }

HTML:
<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

Slide 7

CS 140 Lecture Notes: File Systems

Slide 8

You might also like