2. • What is CSS?
• Syntax
• Applying CSS
• Commonly used CSS properties
• Grouping and Nesting
• Floats in Page Layouting
• @ rules
• Q&A
Agenda
3. What is CSS?
CSS, or Cascading Styles Sheets, is a way
to style and present HTML.
Cascading Style Sheets, or CSS, is the
recommended way to control the
presentation layer in a web document.
The main advantage of CSS over
presentational HTML markup is that the
styling can be kept entirely separate from
the content.
CSS
4. A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block.
selector [, selector2, ...] [:pseudo-class]
{
property: value;
[property2: value2; ...]
}
/* comment */
Syntax
5. There are three ways to apply CSS to HTML:
In-line – written directly inside the tag
Internal – embedded into an HTML document.
External – written in separate files and then linked to in the HTML
<p style="color: red">text</p>
<style>
p {color: red; }
</style>
<link rel="stylesheet" href="style.css">
Applying CSS
6. Selectors are the names given to styles in internal and external style sheets.
The property is the style attribute you want to change and Values are assigned
to properties
p
{
color: red;
}
selector
property value
Selectors, Properties & Values
7. General Units used in values:
px (such as font-size: 12px) is the unit for pixels.
em (such as font-size: 2em) is the unit for the calculated size of a font. So
“2em”, for example, is two times the current font size.
pt (such as font-size: 12pt) is the unit for points, typically used in printed
media.
% (such as width: 80%)
Other units include pc(picas), cm, mm and in(inches)
Note: When a value is zero, there is no need to state a unit. For e.g. to specify
no border, it would be border: 0.
Units
8. Colors in CSS can take the form of:
name - E.g.: color:red
RGB value – E.g.: color: rgb(255,0,0)
RGBA value - E.g.: color: rgba(255,0,0,1)
Hexa value - E.g.: color: #ff0000 or color:#f00
HSL value - E.g.: color: hsl(0,100%,50%)
HSLA value - E.g.: color: hsla(0,100%,50%,0.3)
Colors can be applied using the color or background-color property
Colors
9. Gradients lets you display smooth transitions between two or more specified
colors
Browsers support two types of gradients - linear and radial
Linear Gradient
background: linear-gradient(to bottom right, blue, white);
background: linear-gradient(70deg, black, white);
background: linear-gradient(to bottom, blue, white 80%, orange);
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),
url(http://foo.com/image.jpg);
Colors - Gradients
11. Text in CSS can be manipulated using the following properties:
family - E.g.: font-family: Arial, Helvetica, sans-serif
size – E.g.: font-size:16px
style - E.g.: font-style:italic; (normal, italic, oblique, inherit)
weight - E.g.: font-weight:bold; (normal, bold, bolder, lighter, 100…900, inherit)
variant - E.g.: font-variant:small-caps; (normal, inherit)
All in one order – “<font-style>< font-variant ><font-weight>< font-
size/line-height>< font-family>”
E.g.: font: italic bold 12px/30px Georgia, serif;
Other Text properties that can be referred to –
Text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-
align, text-indent etc…
Text
12. Backgrounds are a core part of CSS, that can be used to add color or images to
a page or element. It can be manipulated using the following properties:
background-color - E.g.: background-color :rgba(0,0,255,1)
background-image – E.g.: background-image: url(image.jpg);
background-position - E.g.: background-position: 75px 0; (left, center, right, top,
center, bottom)
background-repeat - E.g.: background-repeat: repeat; (repeat-x, repeat-y,
no-repeat, inherit)
background-attachment - E.g.: background-attachment: scroll; (scroll, fixed,
inherit)
All in one order – background: <color> <image> <position> <attachment>
<repeat>
E.g.: background: transparent url(image.jpg) 50% 0 scroll repeat-y;
Background
13. Box-shadow allows casting a drop shadow from the frame of almost any
element. It takes the form as below:
box-shadow: none | inset <offset-x> <offset-y> <blur-radius>
<spread-radius> <color>
.shadow
{
box-shadow: 4px 4px 4px 5px #f00;
}
Shadows
14. Margin and Padding are the two most commonly used properties for spacing-
out elements.
Margin is the space outside something, whereas padding is the space inside
something.
Margin and Padding
15. p
{
margin: 20% auto;
padding: 10px 20px 40px 5px;
}
Example for margin and padding in shorthand
div
{
margin-top:10px;
margin-right:10px;
margin-bottom: 5px;
margin-left: 3px;
padding-left: 30px;
}
Another example with expanded forms:
Margin and Padding(Contd…)
16. Used to set borders around an element. The properties that can be set are
Width - E.g.: border-width: 12px;
Style - E.g.: border-style: solid; (none, hidden, dotted, dashed, solid, double groove,
ridge, inset, outset, inherit)
Color - E.g.: border-color: #ff0000;
Radius - E.g.: border-radius:5px;
Or shorthand
div
{
border :12px dashed #ff0000;
border-radius:5px 2px 3px 0;
}
Borders
17. class and ID selectors can be defined in order to customize the selectors i.e.
you can have the same HTML element, but present it differently depending
on its class or ID.
A class selector is a name preceded by a full stop (“.”) and an ID selector is
a name preceded by a hash character (“#”).
The difference between an ID and a class is that an ID can be used to
identify one element, whereas a class can be used to identify more than one.
#top
{
background-color: #ccc;
padding: 20px
}
.intro
{
color: red;
font-weight: bold;
}
Class and ID Selectors
18. Grouping is giving the same properties to a number of selectors without
having to repeat them. You can simply separate selectors with commas in
one line and apply the same properties to all of them.
h2
{
color: red;
}
.secondClass
{
color: red;
}
.thirdClass
{
color: red;
}
h2, .secondClass, .thirdClass
{
color: red;
}
Can just be written as
Grouping
19. Nesting is specifying properties to selectors within other selectors.
This removes the need for classes or IDs on the p and h1 tags if it is applied
to HTML that looks something like this:
#top {
background-color: #ccc; padding: 1em;
}
#top h1 {
color: #ff0;
}
#top p {
color: red; font-weight: bold;
}
<div id="top">
<h1>Sport</h1>
<p>Sport refers to a competitive physical activity.</p>
<p>"Sport" comes from the Old French desport meaning "leisure“.</p>
</div>
Sport
Sport refers to a competitive physical activity.
“Sport” comes from the Old
French desport meaning “leisure”.
CSS
Output:
Nesting
20. Pseudo classes are added to selectors to specify a state or relation to the
selector. They are written simply with a colon in between the selector and the
pseudo class.
E.g. In case of Links -
a:link {color:#ff0; text-decoration:none;}
a:hover {color:#f00; text-decoration:underline;}
a:visited {color:#00f; text-decoration:none;}
a:active {color:#ccc; text-decoration:underline;}
Other pseudo classes that can be referred to are first-child,
last-child, focus, first-letter, before, after etc…
Pseudo Classes
21. Float is a CSS positioning property and can be used to create entire web layouts
Clearing Floats
Floats when used need to be cleared and that is done using the clear property
E.g.: clear:both;
Float not cleared Float cleared
Page Layouts - Floats
22. At-rules are clever, powerful little huggers that encapsulate a bunch of CSS
rules and apply them to something specific. They can be used to import other
CSS files, apply CSS to a particular media, or embed uncommon fonts.
Importing
@import rule is used to bolt another stylesheet onto your existing one.
This must be placed at the top of a stylesheet, before any other rules.
E.g.: @import url(morestyles.css);
At- Rules
23. Targeting media types
@media can be used to apply styles to a specific media, such as print.
E.g.: @media screen and (max-width: 1000px)
{
#content { width: 100% }
}
@media screen and (max-width: 800px)
{
#nav { float: none }
}
@media screen and (max-width: 600px)
{
#content aside { float: none; display: block; }
}
Note that if, for example, a layout area was 600 pixels wide or less, all three of these
would be applied (because it would be less than or equal to 1000px, 800px, and 600px).
At- Rules(Contd…)
24. Embedding fonts
@font-face is used for embedding fonts in a web page so that a typeface can be
used even if it isn’t sitting on the user’s computer.
E.g.: @font-face
{
font-family: “Futura”;
src: url(Futura.woff);
}
OR
@font-face
{
font-family: “Futura”;
src: local(“Futura”), local(“Futura LT”), url(“Futura.woff”);
font-weight: 400;
font-style: normal;
}
At- Rules(Contd…)