Scribd
Upload
8 views

W02 02 MoreCSS

The document discusses CSS topics like colors, units, selectors, box model, background properties, and fonts. It provides examples and explanations of how to specify colors, set sizes, write comments, use different selector types, and adjust padding and margins. Shorthand properties and common background and font settings are also covered.

Uploaded by

thejaka aloka
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

W02 02 MoreCSS

The document discusses CSS topics like colors, units, selectors, box model, background properties, and fonts. It provides examples and explanations of how to specify colors, set sizes, write comments, use different selector types, and adjust padding and margins. Shorthand properties and common background and font settings are also covered.

Uploaded by

thejaka aloka
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

More CSS

CS 115 Computing for the Socio-Techno Web


Instructor: Brian Brubach
Announcements
• Check google groups mail
• Assignment 2 posted, due date pushed to Friday
• Assignment 0 feedback out
Classic webpage
Classic webpage
Classic webpage
Classic webpage
CSS Colors
• Can use predefined colors (e.g., yellow, white, red, purple, blue).
• Can specify a color by the red, green and blue components
• The following are equivalent:
• red
• rgb(255,0,0)
• #ff0000
• CRGBA adds alpha channel to specify the opacity for a color
• RGBA color specification – rgba(RED, GREEN, BLUE, ALPHA)
• Alpha value of 0 (transparent) to 1.0 (opaque)
• E.g., rgba(125, 125, 125, 0.5);
• References: http://www.w3schools.com/css/css3_colors.asp
Number bases
• Decimal à Base 10 (e.g. 2375)
• What people use, why?
• Binary à Base 2 (e.g. 100110)
• What computers use
• Hexadecimal à Base 16 (a4f90)
• HTML colors among other things
• Octal à Base 8
• Let’s see some examples on the doc cam
Hexadecimal
• Each digit is the coefficient for a power of 16
• Need single digits larger than 9
• a=10, b=11, c=12, d=13, e=14, f=15
• Each digit is the coefficient for a power of 16
• Example: 4-digit hex number 16# 16$ 16% 16&
• Hexadecimal colors
• Three 2-digit hex numbers
• #12fe9b b4fd
• Same as rgb(18, 254, 155) 𝑏×16# + 4×16$ + 𝑓×16% + 𝑑×16&
11×4096 + 4×256 + 15×16 + 13×1
= 46333
Setting Size
• Length units - centimeters (cm), millimeters (mm), etc.
• Whitespace cannot appear between number and the unit,
• Two types of length units:
• Relative (e.g., em, rem)
• Absolute (e.g., cm, pt, pc)
• Relative
• em à Relative to the size of the current font
• 3em à 3 times size of current font
• http://www.sitepoint.com/power-em-units-css/
• Preferred à relative and percentages
• http://www.w3schools.com/cssref/css_units.asp
CSS Comments
• Comments à Surrounded by /* */
• You can use them to disable styles
More on kinds of selectors
• Class Selectors à Allow us to apply the same rules to many elements
• Use when you need to apply a style many times in your document
• Created with a period (also known as full stop)
• ID Selectors à Similar to class selectors but appear only once in the
document
• Used when you need to apply a style only once in your document
• Created using #
More on kinds of selectors
• Type Selectors à Those based on the name of an HTML tag (e.g., p,
table, etc.)
• p { color: red; }
• Pseudo-classes à attached to selectors to specify a state
• Four popular pseudo-classes are:
• a:link à initial color of a link
• a:visited à color for a visited link
• a:hover à color when mouse hover over link
• a:active à color during the clicking of the link
• Order is important (LoVeHAte)
More on Kinds of Selectors
• Descendant selector
• Override the type, class, and id selector styles
• Typically with two elements where the second is a descendant
• Example à li a {font-size: 2em}
• Universal selector
• Applies to all elements
• Example: * {font-family: arial, Helvetica; }
• Pseudo-elements
• Allows you to style an item that is not marked by elements
• Two pseudo-element examples à :first-letter and :first-line
Some selector examples
• a[title] { } à A link with a title attribute
• .myPrefStyle{ } à Any elements with the class myPrefStyle (same class
name can appear in many elements)
• #mySchedule { } à An element with id mySchedule (only one element
on the page)
• div.myPrefStyle{ } à A div with the class myPrefStyle
• div#mySchedule{ } à A div with the id mySchedule
• div table { } à A table with a div ancestor
• input[type = “submit”] { } à An input with a type attribute that has the
value submit
Box model

Margin

Border
Margin edge
Padding
Border edge
Content
Padding edge

Content edge
Box model
• CSS box model à box around an HTML element with the following
components: margin, border, padding, content
• Box model allow us to define space between different elements
• Four sections can be identified:
• Content à what lies in the middle of the box (text, image, etc.)
• Padding à surrounds the content
• Border à surrounds the padding and represents the box border
• Margin à surrounds the border

• Note à Need to specify a border-style for border to appear


Box model

Margin

Border
Margin edge
Padding
Border edge
Content
Padding edge

Content edge
Box model padding and margin
• You can adjust individual padding/margin properties by using:
• padding-bottom, padding-left, padding-top, padding-right
• margin-bottom, margin-left, margin-top, margin-right
• The margins, borders, padding, and background properties of block
elements (e.g., body, p, etc.) are not passed to their child block-level
elements
Shorthand property
• Shorthand Property à allows you to specify several properties by using
only one
• If you don’t specify one of the properties a default value will be used
• Commonly used shorthand properties
• background
• font
• list-style
• margin
• border
• padding
• Example à border: 2em solid green;
Background properties
• background-color
• background-image à location of image
• background-repeat à how image repeats. Possible values for repetition:
• no-repeat à one instance of the image
• repeat à tile
• repeat –y à repeats on the y-axis (repeat –x à repeats on the x-axis)
• background-attachment à indicates attachment of the image to the
containing element. Possible values are:
• scroll à default value
• fixed à image will stay stationary as the scrolling takes place
• background-position à top, bottom, center, left, right (combinations
valid)
Generic font families
• sans-serif à (e.g., Verdana, Helvetica, Arial)
• serif à (e.g., Times New Roman, Georgia, Times)
• monospace à (e.g., Courier, MS Courier New)
• cursive à (e.g., Lucida Handwriting)
• fantasy à (e.g., Whimsey, Comic Sans)
• Browser can choose an available font from that family

You might also like