2. What is CSS?
A style sheet language used for describing the look
and formatting of a document written in a markup
language. While most often used to change the
style of web pages and user interfaces written in
HTML and XHTML, the language can be applied to
any kind of XML document. CSS is a cornerstone
technology used by most websites to create visually
engaging webpages, user interfaces for web
applications, and user interfaces for many mobile
applications.
CSS stands for Cascading Style Sheets.
3. CSS Syntax
A CSS rule set consists of a selector and a declaration block:
The selector points to the HTML element you want to style. CSS selectors are used to
"find" (or select) HTML elements based on their id, class, type, attribute, and more.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.
4. Comments in CSS
Comments are used to explain your code,
and may help you when you edit the
source code at a later date. Comments
are ignored by browsers.
A CSS comment starts with /* and ends
with */. Comments can also span
multiple lines:
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
5. How to implement CSS
in your webpage?
When a browser reads a style sheet, it will format the
document according to the information in the style
sheet. There are 3 ways to insert CSS.
• External style sheet
• Internal style sheet
• Inline style
6. <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing
just one file!
Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the head section:
An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension. An example of
a style sheet file called "myStyle.css"
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
7. Internal Style Sheet
An internal style sheet may be used if
one single page has a unique style.
Internal styles are defined within the
<style> element, inside the head section
of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
8. Inline Styles
An inline style may be used to apply a
unique style for a single element.
An inline style loses many of the
advantages of a style sheet (by mixing
content with presentation). Use this
method sparingly!
To use inline styles, add the style
attribute to the relevant tag. The style
attribute can contain any CSS property.
The example shows how to change the
color and the left margin of a <h1>
element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-
left:30px;">This is a
heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
9. What if you have multiple
CSS, is that possible?
Yes! That is possible but take note that the Inline styles will
override the defined styles from external sheets.
Also, If the link to the external style sheet is placed below the
internal style sheet in HTML <head>, the external style sheet will
override the internal style sheet!
10. CSS Properties
Property Description CSS
color Sets the color of text 1
opacity Sets the opacity level for an element 3
Color Properties
Property Description CSS
text-decoration Specifies the decoration added to text 1
text-decoration-color Specifies the color of the text-decoration 3
text-decoration-line Specifies the type of line in a text-decoration 3
text-decoration-style Specifies the style of the line in a text decoration 3
text-shadow Adds shadow to text 3
text-underline-position Specifies the position of the underline which is set using the text-decoration property 3
Text Properties
11. CSS Properties
Writing Mode Properties
Property Description CSS
direction Specifies the text direction/writing direction 2
text-orientation Defines the orientation of the text in a line 3
text-combine-upright Specifies the combination of multiple characters into the space of a single character 3
unicode-bidi Used together with the direction property to set or return whether the text should be
overridden to support multiple languages in the same document
2
writing-mode 3
Table Properties
Property Description CSS
border-collapse Specifies whether or not table borders should be collapsed 2
border-spacing Specifies the distance between the borders of adjacent cells 2
caption-side Specifies the placement of a table caption 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
table-layout Sets the layout algorithm to be used for a table 2
12. CSS Properties
Background & Border Properties
Property Description CSS
background A shorthand property for setting all the background properties in one
declaration
1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
background-color Specifies the background color of an element 1
background-image Specifies one or more background images for an element 1
background-position Specifies the position of a background image 1
background-repeat Sets how a background image will be repeated 1
background-clip Specifies the painting area of the background 3
background-origin Specifies where the background image(s) is/are positioned 3
background-size Specifies the size of the background image(s) 3
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 1
border-bottom-left-radius Defines the shape of the border of the bottom-left corner 3
border-bottom-right-radius Defines the shape of the border of the bottom-right corner 3
border-bottom-style Sets the style of the bottom border 1
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders
