Scribd
Upload
8 views

CSS

The document discusses the fundamentals of CSS, including how to override browser defaults, the structure of CSS rules, and various properties such as color, positioning, and visibility control. It also touches on inheritance, rule specificity, and the use of CSS preprocessors in real-world applications. Key examples illustrate how to apply styles to HTML elements effectively.

Uploaded by

saurabhkrsahu720p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

CSS

The document discusses the fundamentals of CSS, including how to override browser defaults, the structure of CSS rules, and various properties such as color, positioning, and visibility control. It also touches on inheritance, rule specificity, and the use of CSS preprocessors in real-world applications. Key examples illustrate how to apply styles to HTML elements effectively.

Uploaded by

saurabhkrsahu720p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Driving problem behind CSS

What font type and size does <h1>Introduction</h1> generate?

Answer: Some default from the browser (HTML tells what browser how)

Early HTML - Override defaults with attributes

<table border="2" bordercolor="black">

Style sheets were added to address this:

Specify style to use rather than browser default

Not have to code styling on every element


CS142 Lecture Notes - CSS 2
Style sheet contain one or more CSS Rules
Selector

body {
font-family: Tahoma, Arial, sans-serif;
Declaration color: black;
Block background: white;
margin: 8px;
}
Property Value
CS142 Lecture Notes - CSS 4
CSS Pseudo Selectors
hover - Apply rule when mouse is over element (e.g. tooltip)
p:hover, a:hover {
background-color: yellow;
}
a:link, a:visited - Apply rule when link has been visited or not visited (link)
a:visited { a:link {
color: green; color: blue;
} }

CS142 Lecture Notes - CSS 6


Color - Properties: color & background_color
Must ultimately turn into red, green, and blue intensities between 0 and 255:

● Predefined names: red, blue, green, white, etc. (140 standard names)
● 8-bit hexadecimal numbers 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
Example: h1: { color: red; }

CS142 Lecture Notes - CSS 8


Absolute
CSS distance units
2px pixels

1mm millimeters

2cm centimeters

0.2in inches

3pt printer point 1/72 inch

Relative
2em 2 times the element’s current font size

3rem 3 times the root element’s current font size

CS142 Lecture Notes - CSS 10


position property

position: static; (default) - Position in document flow

position: relative; Position relative to default position via


top, right, bottom, and left properties

position: fixed; Position to a fixed location on the screen via


top, right, bottom, and left properties

position: absolute; Position relative to ancestor absolute element via


top, right, bottom, and left properties

Fixed position (0,0) is top left corner


CS142 Lecture Notes - CSS 12
Element visibility control properties
display: none; - Element is not displayed and takes no space in layout.
display: inline; - Element is treated as an inline element.
display: block; - Element is treated as a block element.
display: flex; - Element is treated as a flex container.
display: grid; - Element is treated as a grid container.

visibility: hidden; - Element is hidden but space still allocated.


visibility: visible; - Element is normally displayed

CS142 Lecture Notes - CSS 14


Some other CSS issues
● Inheritance
○ Some properties (e.g. font-size) are inherited from parent elements
○ Others (border, background) are not inherited.

● Multiple rule matches

○ General idea: most specific rule wins

<span>Text1</span> span.test { color: green }


<span class="test">Text2</span> span { color: red }

CS142 Lecture Notes - CSS 16


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

CSS: CS142 Lecture Notes - CSS HTML: 18


CSS in the real world
● CSS preprocessors (e.g. less) are commonly used
○ Add variable and functions to help in maintaining large collections of style sheets
○ Apply scoping using the naming conventions

● Composition is a problem
○ It can be really hard to figure out what rule from which stylesheet is messing things up

CS142 Lecture Notes - CSS 20

You might also like