CSS
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML p
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Border : p {
border: 2px solid powderblue; }
Padding: p {
border: 2px solid powderblue;
padding: 30px; }
Margin : p {
border: 2px solid powderblue;
margin: 50px; }
Use CSS to set the
background color of the document (body) to yellow
font of the document to "courier".
text color of the document to red.
TABLES
TABLES
HTML tables allow web developers to arrange data into rows and columns.
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
CSS Layout-display: inline-block
display: inline-block allows to set a width and height on the element.
display: inline-block allows to set a width and height on the element.
Does not add a line-break after the element, so the element can sit next to
other elements.
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
Using inline-block to Create Navigation Links
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
CSS Selectors
A CSS selector finds selects the HTML element(s) you want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)
The CSS element Selector
The element selector selects HTML elements based on the element name.
p {
text-align: center;
color: red;
CSS Overflow
The CSS overflow property controls what happens to content that is too big to
fit into an area.
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the
element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the
content
auto - Similar to scroll, but it adds scrollbars only when necessary
CSS Layout - float
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and
on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text).
This is default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
selector:pseudo-class {
property: value;
}
Pseudo elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
selector::pseudo-element {
property: value;
}
The ::first-line pseudo-element is used to add a special style to the first line
of a text.
<style> p::first-letter {
color: #ff0000;
font-size: xx-large;
p::first-line { }
color: #ff0000;
font-variant:
small-caps;
}
</style>
CSS Border Images
With the CSS border-image property, you can set an image to be used as the
border around an element.
The CSS border-image property allows you to specify an image to be used
instead of the normal border around an element.
The property has three parts:
The image to use as the border
Where to slice the image
Define whether the middle sections should be repeated or stretched
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
