Introduction To CSS

Part I 1
 Is a way to control the look and feel of your HTML documents in an

organized and efficient manner.
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed
 Cascading style sheets provide a means to apply a presentation to an HTML
structure by defining how HTML elements are displayed.
 Its goals are to create a consistent look across many web-pages and to
separate structure from presentation so you can provide different style
sheets for printing, browsing, or other scenarios
2
 By using CSS, you can set background and text colors, margins, borders,
fonts, positions, and much more. You have creative control of the HTML
elements, so you can decide what the elements look like and where they
display on the screen.
 A style is a rule that describes how to format a specific part of an HTML
document.
 A style sheet is a set of style rules.
3
 CSS code is not written the same way as HTML.
 A CSS rule-set consists of a selector and a declaration block
 the selector locates the elements in the HTML document that will be styled, and
 the declaration block contains the formatting instructions separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
 Each declaration ends with a semicolon.
 Declaration blocks are surrounded by curly braces.
E.g. h1 {
color: white;
text-align : center;
Background-color : white;
}
4
 CSS selectors are used to select HTML elements based on their element name, id,
class, attribute and more.
The element Selector
 The element selector selects elements based on the element name.
E.g. h1 {
color: white;
text-align : center; }
The id Selector
 The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element should be unique within a page, so the id selector is
used to select one unique element!
 To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
E.g. #head1 {
color: red;
}
5
The class Selector
 The element selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by
the name of the class.
 In the example below, all HTML elements with class="center" will be red and
center-aligned:
E.g. .center {
color: red;
}
 You can also specify that only specific HTML elements should be affected by a
class.
 In the example below, only <p> elements with class="center" will be center-
aligned:
E.g. p. center {
color: red;
}
6
 HTML elements can also refer to more than one class, each class name must be
separated by a space.
 In the example below, the <p> element will be styled according to class="center"
and to class="large":
E.g. < p color=“center large”> this paragraph refers to 2 classes </p >
Note: A class name cannot start with a number!
Grouping Selectors
 You can use group If you have elements with the same style definitions
 To group selectors, separate each selector with a comma.
E.g. h1, h2, p {
color: red;
}
7
 There are three ways to ways to use/insert CSS in our HTML page.
 Inline style
 Internal style sheet and
 External style sheet
Inline Style
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the element. The style attribute can
contain any CSS property.
E.g. <p style="color:blue; font-size:25%;">This is a heading</p>
8
Internal Style sheet
 Internal styles are defined within the <style> element, inside the <head> section of
an HTML page:
 Internal style sheet applies for a single html page.
E.g. <head>
<style>
body {
background-color: linen;
}
h1 {
color: violet;
margin-left: 40px;
}
</style>
</head>
9
External Style sheet
 External style sheet is an external CSS file that can used by linking CSS with the
HTML page
 A reference to the external style sheet file is inside the <link> element, inside the
<head> section.
 E.g. <head>
<link rel="stylesheet" type="text/css“ href="mystyle.css">
</head>
 The style sheet file must be saved with a .css extension.
 Using an external style sheet is considered the best way to implement your styles.
 It's much easier to reuse CSS code if you have it in a separate file. Instead of typing
the same CSS code on every web page, simply have many pages refer to a single
CSS file with the "link" tag.
10
 You can set color for text, background, borders, etc.
 In HTML, colors can also be specified using predefined color names RGB values,
HEX values, HSL values, RGBA values, and HSLA values:
RGB Value
 In HTML, a color can be specified as an RGB value, using this formula:
 rgb(red, green, blue)
HEX Value
 In HTML, a color can be specified using a hexadecimal value in the form:
 #rrggbb, where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
11
 The CSS text properties are used to define text formatting effects for Texts.
Text color
 The color property specifies the color of a text.
Text Alignment
 The text-align property is used to set the horizontal alignment of a text.
 A text can be left or right aligned, centered, or justified.
Text Decoration
 The text-decoration property is used to set or remove decorations from text. A text
decoration values can be underline, overline, line-through, or none.
Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters in a
text. A text transform values can be uppercase, lowercase, capitalize.
12
Text Indent
 The text- indent property is used to specify the indentation of the first line of a text
E.g. p { text-indent: 75px; }
Letter Spacing
 The letter-spacing property is used to specify the space between the characters in
a text. The spacing can be set using pixels (px).
Letter Height
 The letter-height property is used to specify the space between lines. The spacing
can be set using pixels (px).
Word Spacing
 The word-spacing property is used to specify the space between the words in a
text. The spacing can be set using pixels (px).
13
 The CSS font properties are used to define the font family, boldness, size, and the
style of a text.
Font Family
 The font-family property specifies the font family of a text.
Font Style
 The font-style property is mostly used to specify italic text.
Font Size
 The font-size property sets the size of the text.
 The default size for normal text, like paragraphs, is 16px (16px=1em).
Font Weight
 The font-weight property specifies the weight of a font:
14
 The CSS background properties are used to define the background effects for
elements.
Background color
 The background-color property specifies the background color of an element.
Background Image
 The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element.
 You can specify the image path using – url(“image path”)
Background repeat
 By default background-image property repeats an image both horizontally and
vertically.
 To repeat an image vertically, set– background-repeat: repeat –y;
 To repeat an image horizontally, set– background-repeat: repeat-x;
 To show background image only once – background-repeat: no-repeat;
15
 The CSS border properties allow you to specify the style, width, and color of an
element's border.
Border style
 The border-style property specifies what kind of border to display.
 Dotted, dashed, solid, double etc.
E.g. border-style: dotted;
 Border style can have four values.
border-style: dotted solid double dashed;
 top border is dotted, right border is solid, bottom border is double, and left
border is dashed
Border width
 The border-width property specifies the width of the four borders.
E.g. border-width: 2px;
16
Border color
 The border-color property is used to set the color of the four borders.
E.g. border-color: red;
Border - Shorthand Property
 to shorten the code, it is also possible to specify all the individual border
properties in one property.
 The border property is a shorthand property for the following individual border
properties: border-width border-style border-color
E.g. p { border: 5px solid red; }
 You can also specify all the individual border properties for just one side:
E.g. border-left: 6px solid red;
border-bottom: 3px solid black;
17
 Margin properties are used to create space around elements, outside of any
defined borders.
 CSS has properties for specifying the margin for each side of an element:
 Margin-top
 Margin-right
 Margin-bottom
 Margin-left
E.g. p {
margin-top: 100px; margin-right: 150px;
margin-bottom: 100px; margin-left: 80px;
}
 To shorten the code, it is possible to specify all the margin properties in one property.
 E.g. margin: 25px 50px 75px 100px;
18
 Padding properties are used to generate space around an element's content,
inside of any defined borders. CSS has properties for specifying the margin for
each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
E.g. p {
padding-top: 100px; padding-right: 150px;
padding-bottom: 100px; padding-left: 80px;
}
 To shorten the code, it is possible to specify all the padding properties in one property.
 E.g. padding: 25px 50px 75px 100px;
19

Introduction To CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduction To CSS

Transféré par

Droits d'auteur :

Formats disponibles

Part I 1

 Is a way to control the look and feel of your HTML documents in an

 Internal style sheet and

 External style sheet

 E.g. padding: 25px 50px 75px 100px;

Vous aimerez peut-être aussi