Scribd
Upload
10 views12 pages

Lec 7

Uploaded by

Limia Alfadil
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
10 views12 pages

Lec 7

Uploaded by

Limia Alfadil
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/ 12

CSS

Designing the world !


What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to
be displayed on screen, paper, or in other
media
Linking HTML and CSS
HTML (content) and CSS (presentation) can be linked
in three ways:
• Inline: the CSS rules in the style attribute
No selectors are needed
• Internal: in the <head> in a <style> tag
• External: CSS rules in separate file (best)
Usually a file with .css extension
Linked via <link rel="stylesheet" href=…>
Linking HTML and CSS (2)

Using external files is highly


recommended
• Simplifies the HTML document
• Improves page load speed as the
CSS file is cached
Style Sheets Syntax
 Stylesheets consist of rules, selectors,
declarations, properties and values

 Selectors are separated by commas


 Declarations are separated by semicolons
 Properties and values are separated by
colons

h1,h2,h3 { color: green; font-weight: bold; }


Selectors

 Three primary kinds of selectors:


 By tag (type selector):

h1 { font-family: verdana,sans-serif; }
 By element id:

#element_id { color: #ff0000; }

 By element class name (only for HTML):

.myClass {border: 1px solid red}


Selectors (2)

 Pseudo-classes define state


:hover

a:hover { color: red; }

 Pseudo-elements define element "parts"


or are used to generate content

:first-line ,:before ,:after


p:first-line { text-transform:
uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
Selectors (3)
 Match relative to element placement:
p a {text-decoration: underline}

This will match all <a> tags that are inside of <p>
 universal selector (avoid or use with care!):
* {color: black}
p * {color: black}

This will match all descendants of <p> element


Backgrounds
 image to be used as background, e.g.:

background-image:url("back.gif");

 Using color background-color


background-color:red;

 Additionaly :
• background-repeat
repeat-x, repeat-y, repeat, no-repeat

• background-attachment

fixed / scroll
Backgrounds (2)

 background-position: specifies vertical and


horizontal position of the background image

• Vertical position: top , center ,bottom


• Horizontal position: left, center, right
• Both can be specified in percentage or other
numerical values
Examples:
background-position: top left;

background-position: -5px 50%;


Backgrounds (3): CSS3 Background Size

 The CSS3 background-size property allows


you to specify the size of background images.

 Values may be contain, cover or numerical


value
Borders
 border-width: thin, medium, thick or
numerical value (e.g. 10px)
 border-color: color alias or RGB value

 border-style: none, hidden, dotted,


dashed, solid, double, groove, ridge,
inset, outset
 Each property can be defined separately for left,
top, bottom and right

border-top-style, border-left-color, …

You might also like