Intro to CSS
What is CSS?
Cascading Style Sheet
Stylesheet Language
Standards-based set of properties and attributes to define
styles
To describe the presentation a document
written in a
‘markup language’ like HTML or XML
Markup encoding: <p>My paragraph here.</p>
Defines the style of how things in <p> tags appear.
Font, color, size, margins, etc.
Cascading
Rules to determine how to
apply markup that contains
other markup
Why CSS?
Separate Content from Form
Content is the text and images, marked up to define regions of
specific types
Form defines the “style” for the content
The old way:
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
CSS Syntax
3 Elements to a CSS Statement
Selector
What HTML sections does it affect?
Property
What attribute of that HTML section will be affected?
Value
What change will be made to that attribute?
Types of css
Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style
attribute.
Internal: the <style> markup tag
<html>
<head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head>
<body>
<p>Content</p>
</body>
</html>
External: the .css stylesheet file
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
Benefit of External Style Sheet
The real power of using an external style sheet is that multiple web
pages on our site can link to the same style sheet:
style.css :
h2 {color:red;}
page1.html page2.html page3.html
Styles declared in an external style sheet will affect all matching elements on
all web pages that link to the style sheet. By editing the external style sheet,
we can make site-wide changes (even to hundreds of pages) instantly.
CSS Syntax: Selectors
There are many kinds of selectors and many ways to reference them:
Type, Class, ID, Pseudo, etc.
HTML Type Tag – selected with the tag type
p{ font-size: 10px;
font-color: White; }
<p>Content</p>
The Class Attribute – precede the class with a period
.myinfo { font-size: 10px;
font-color: White; }
<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CSS Syntax: Selectors(contd..)
Id Attribute – selected with the id attribute(#)
#myinfo { font-size: 10px;
font-color: White; }
<p id=“myinfo”>Content</p>
<div id=“myinfo”>Other content</div>
The group selector– separated with (,)
.myinfo ,div,h1{ font-size: 10px;
font-color: White; }
<p id=“myinfo”>Content</p>
<div >Other content</div>
<h1> Heading </h1>
CSS Syntax: Selectors(contd..)
Universal selector – selected with the * it selects the total content on
webpage
*{ font-size: 10px;
font-color: White; }
<body>
<p> content </p>
<h1> heading </h1>
</body>
CSS properties for colors
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
CS380 11
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
12
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
The // single-line comment style is NOT supported in CSS
The <!-- ... --> HTML comment style is also NOT supported in CSS
CS380 13
CSS properties for fonts
CS380 14
font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
Enclose multi-word font names in quotes
CS380 15
More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
We can specify multiple fonts from highest to lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy, monospace
If the first font is not found on the user's computer, the next is tried
Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font
CS380 16
font-size
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
vague font sizes: xx-small , x-small , small , medium, large, x-large, xx-large, smaller, larger
percentage font sizes, e.g.: 90%, 120%
CS380 17
font-size
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
pt specifies number of point, where a point is 1/72 of an inch onscreen
px specifies a number of pixels on the screen
em specifies number of m-widths, where 1 em is equal to the font's
current size
CS380 18
font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
Either of the above can be set to normal to turn them
off (e.g. headings)
CS380 19
CSS properties for text
CS380 20
background-image
body {
background-image: url("images/draft.jpg");
}
CSS
background image/color fills the element's content
area
CS380 31
background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
can be repeat (default), repeat-x, repeat-y, or no-
repeat
CS380 32
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
value consists of two tokens, each of which can be top, left,
right, bottom, center, a percentage, or a length value in px,
pt, etc.
value can be negative to shift left/up by a given amount
CS380 33
Inline vs. Block Display
All HTML elements (tags) are assigned a display
property value of either inline or block.
Inline elements display in browsers horizontally.
[INLINE ELEMENT 1] [INLINE ELEMENT 2] [INLINE
ELEMENT 3]
Block elements display in browsers vertically (stacked
one on top of the other).
[BLOCK ELEMENT 1]
[BLOCK ELEMENT 2]
[BLOCK ELEMENT 3]
Examples of inline elements:
<a> <img> <strong> <em> <span>
Examples of block elements:
<p> <h1-h6> <div> <hr> <table> <ul>
<ol>
display: inline;
Normally, the heading tags display in block format:
But, to have them display inline, add the style
h1,h2,h3 {display: inline;}:
display: block;
Normally, <a> tags display inline.
But, if you add the style a {display: block;}, they will display as a
vertical navigation menu:
DISPLAY PROPERTIES(contd..)
PROPERTY DESCRIPTION
display:inline-block An element you assign a display of
inline-block is inline by
presentation. But it has the added
advantage of you being able to
apply width and height to it,
which you can't do when the
element is assigned a display of
inline.
When you set the
display:none display property of an
element to none, the
element is completely
taken off the page and
it doesn’t have an effect
on the layout.
DISPLAY PROPERTIES(contd..)
PROPERTY DESCRIPTION
display:flex A display of flex gives you access
to the Flex layout system, which
simplifies how we design and
layout our web pages.
A display set to grid
display:grid allows you to build
layouts with the grid
system, which is like an
advanced form of flex.
DISPLAY PROPERTIES(contd..)
PROPERTY DESCRIPTION
display:inherit This makes the element inherit
the display property of its parent.
So, if you have a <span> tag inside
a div and you give the span tag a
display of inherit, it turns it from
inline to block element.
This sets the display
display:intial property of an element to
its default value. So, if you
set the display property of a
span to initial, it remains
inline, and if you set the
same value for a div, it
remains block.
BOX MODEL
CSS FLOAT
With CSS float, an element can be pushed to the left
or right, allowing other elements to wrap around it.
Float is very often used for images , but it is also
useful when working with layouts
Elements are floated horizontally ,this means that an
elements can only floated left or right, not up or down.
The elements before the floating elements will not be
affected.
If an image is floated to the right, a following text
flows around it to the left.
CANCELLING FLOATED CONTENT
The clear property is used to cancel floating property . The
following outlines the clear property and its possible values.
Clear left | right | both
PSEUDO ELEMENTS
::first-letter.
::first-line.
::marker.
::selection.
::placeholder.
::before and ::after.
:focus
:Link
:Active
:Visited
:hover
POSITIONING
The positioning properties allow you to position an element. It
can also place an element behind another , specify what
should happen when an elements’s content too big.
Elements can be positioned using the top , bottom , left, right
properties. However, these properties will not work unless the
position property is set first . They also work differently
depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. Static
positioned elements is always positioned according to the
normal flow of the page.
Static positioned elements are not affected by the
top,bottom,left and right properties.
Fixed positioning
An element with fixed position is positioned
relative to the browser window
It will not move if the window is scrolled:
Relative Positioning
Relative positioning changes the position of the
HTML elements relative to where it normally
appears.so left:20 adds 20 pixels to the elements
left position.
You can use two values top and left with
position property.
Move left – use a negative value for left.
Move right – use a positive value for left.
Move up – use a negative value for top
Move down – use appositive value for top.
Absolute positioning:
removes the element from the normal document flow
and allows us to place it in a specific location. It will scroll
along with the surrounding page content.
Sticky Positioning:
An element with position: sticky; is positioned based on the user's
scroll position.
A sticky element toggles between relative and fixed, depending on
the scroll position. It is positioned relative until a given offset position
is met in the viewport - then it "sticks" in place (like position:fixed).
TRANSITION :
A shorthand property for setting the four transition
properties
transition-property :
Specifies the name of the CSS property the transition
effect is for
transition-duration :
Specifies how many seconds or milliseconds a transition
effect takes to complete
transition-timing-function
Specifies the speed curve of the transition ef
transition-delay
Specifies when the transition effect will start
ANIMATION IN CSS
@keyframes
Specifies the animation
animation
A shorthand property for all the animation properties below, except the
animation-play-state property
animation-name
Specifies a name for the @keyframes animation
animation-duration
Specifies how many seconds or milliseconds an animation takes to complete one
cycle
animation-timing-function
Specifies the speed curve of the animation
animation-delay
Specifies when the animation will start
animation-iteration-count
Specifies the number of times an animation should be played
animation-direction
Specifies whether or not the animation should play in reverse on alternate cycles
animation-play-state
Specifies whether the animation is running or paused
fill-mode
specifies styles apply for the tags when animation is not playing
Modifying List Elements
By default, unordered lists (<ul>) appear as bullets and ordered lists
(<ol>) appear as numbers in HTML.
Using CSS, you can modify how list items will appear:
Properties:
list-style, list-style-type, list-style-image, list-
style-position
Values:
disc, circle, square, decimal, decimal-leading-zero,
lower-roman, upper-roman, lower-alpha, upper-alpha,
lower-greek, lower-latin, upper-latin, hebrew,
armenian, georgian, cjk-ideographic, hiragana,
katakana, hiragana-iroha, katakana-iroha, none,
url("graphic.gif")
Examples:
ul { list-style: disc; }
ol { list-style: upper-roman;}
li { list-style: url("blackball.gif");}
ul li { list-style-position: inside;}
Cascading Inheritance
Nested elements inherit
the properties from the
its parent
body { font-family: Verdana;
If you specify a style for the
<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
If you want to override .littletext { font-size: 8px; }
inherited settings, you
need to specify a style in
a more local element <body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>
