Reviewer Mma

REVIEWER: BTEC 90 Method of Inserting CSS
1. Inline Style Sheet

CSS  inline style may be used to apply a unique
 Cascading Style Sheets style for a single element.
 Hakon Wium Lie  Ex: <h1 style="color:blue;margin-
left:30px;">This is a heading</h1>
Style- combination of formatting options that you can apply
to HTML. 2. Internal Style Sheet
 Internal style sheet may be used if one single
Selector- HTML tag you want to style page has a unique style.
Declaration- consists of a property and corresponding value.  Internal styles are defined within the <style>
element, inside the <head> section of an
Basic Structure HTML page
 Ex: <head>
<style>
body {
background-color: linen;
}
h1 {
Comments- used to describe the code color: maroon;
Ex: /* THIS IS JRU */ margin-left: 40px;
}
CSS SELECTORS </style>
1. ELEMENTS SELECTOR </head>
 selects elements based on the element
name. 3. External Style Sheet
 Ex: <p>, <h1> etc.  External style sheet can be written in any
2. CLASS SELECTOR text editor. The file should not contain any
 class selector selects elements with a specific html tags. The style sheet file must be saved
class attribute. with a .css extension.
 To select elements with a specific class, write  Ex: <head>
a period (.) character, followed by the name <link rel="stylesheet" type="text/css" href="
of the class mystyle.css">
 Ex: .center { </head>
text-align: center;
color: red; Font and Text
}
3. ID SELECTOR CSS Font Families
 id of an element should be unique within a  generic family - a group of font families with a similar
page, so the id selector is used to select one look (like "Serif" or "Monospace")
unique element.  font family - a specific font family (like "Times New
 To select an element with a specific id, write Roman" or "Arial")
a hash (#) character, followed by the id of the  Font face- the name of the font.
element
 Ex: #para1 { Generic Font family Description
text-align: center; family
color: red;
4. GROUP SELECTOR
Serif Times New Roman Serif fonts have
 To group selectors, separate each selector
Georgia small lines at the
with a comma.
ends on some
 Ex: h1, h2, p {
characters
text-align: center;
color: red;
}
Page 1 of 3
Sans-serif Arial "Sans" means
h2 {
Verdana without - these
text-decoration: line-through;
fonts do not
}
have the lines at
the ends of
h3 {
characters
text-decoration: underline;
Monospace Courier New All monospace }
Lucida Console characters have
the same width Colors and Background
Background Image
Font Style  background-color
 Normal Ex: body {
 Italic background-color: lightblue;
 Oblique }
 background-image
Font Size Ex: body {
 Absolute Size background-image: url("paper.gif");
 Relative Size }
 background-repeat
Span Ex: body {
 Tag that can be placed to any web content to be background-image: url("gradient_bg.png");
formatted. background-repeat: repeat-x;
 Ex: }
<p> Cigarette smoking is <span style=”font-weight: bold; Body {
font-style: italic”> Dangerous</span> to your health</p> background-image: url("img_tree.png");
background-repeat: no-repeat;
Word Spacing and Letter Spacing }
Ex:  background-attachment
.spacing {letter-spacing: 6px;}  background-position
Ex: body {
.spacing {word-spacing: 6px;} background-image: url("img_tree.png");
Text Alignment background-position: right top;
Ex: Text-align: left; background-attachment: fixed;
Text-align: right; }
Text-align: center;
Text-align: justify; Background Size
Text-transform- property controls the capitalization of text. Ex: #example1 {

Value: none background: url(mountain.jpg);
Capitalize background-repeat: no-repeat;
Uppercase background-size: auto;
Lowercase }
Inherit
#example2 {
Ex: p. {text-transform: uppercase ;} background: url(mountain.jpg);
Text Decoration- The text-decoration property is used to set background-size: 300px 100px;
or remove decorations from text. }
Ex:
h1 { Other Value of the background
text-decoration: overline; Auto Length Percentage Cover
} Contain Initial Inherit
Page 2 of 3
CSS Box Model Ex:
 Used when talking about design and layout. p.dotted {border-style: dotted;}
 It consists of: margins, borders, padding, and the p.dashed {border-style: dashed;}
actual content. p.solid {border-style: solid;}
Ex: p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Parts:
 Content - The content of the box, where text and
images appear
 Padding - Clears an area around the content. The
padding is transparent
 Border - A border that goes around the padding and
content
 Margin - Clears an area outside the border. The
margin is transparent
TABLE
CSS Script
table, th, td {
div { border: 1px solid black;
width: 300px; }
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Border
The border-style property specifies what kind of border to

display.
The following values are allowed:
 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect
depends on the border-color value
 ridge - Defines a 3D ridged border. The effect
 inset - Defines a 3D inset border. The effect depends
on the border-color value
 outset - Defines a 3D outset border. The effect
 none - Defines no border
 hidden - Defines a hidden border
Page 3 of 3

Reviewer Mma

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Reviewer Mma

Hochgeladen von

Copyright:

Verfügbare Formate

REVIEWER: BTEC 90 Method of Inserting CSS

1. Inline Style Sheet

Text-transform- property controls the capitalization of text. Ex: #example1 {

The border-style property specifies what kind of border to

The following values are allowed:

 dotted - Defines a dotted border

Das könnte Ihnen auch gefallen