HTML Styles - CSS
• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External style sheets are stored in CSS files
• CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
• 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
CSS Syntax
A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by
a colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
example
• body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
program
<html>
</head>
<head>
<style> <body>
body { <h1>Simple CSS</h1>
background-color: pink; <p>This is a student.</p>
}
h1 { </body>
color: blue; </html>
text-align: center;
}
p{
font-family: 'Times New Roman',
Times, serif;
font-size: 40px;
text-align: center;
}
</style>
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is 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.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
• 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,
• Example: <h1 style="color:blue;">A Blue Heading</h1>
• 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.
• Example
<!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>
• 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 page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• CSS Comments
• Comments are used to explain the CSS code, and may help when you edit the
source code at a later date.
• Comments are also used to temporarily disable sections of CSS code within a
stylesheet.
• Comments are ignored by browsers!
• A CSS comment is placed inside the HTML <style> element, and starts with /* and
ends with */:
• CSS Backgrounds
• CSS background-color
• The background-color property specifies the background color of an element.
• You can set the background color for any HTML elements:
• Example
• Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
div {
background-color: green;
opacity: 0.3;
}
•
The opacity property specifies the opacity/transparency of an
element. It can take a value from 0.0 - 1.0. The lower value, the more
transparent:
• CSS 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.
• Example
• Set the background image for a page:
body {
background-image: url("[Link]");
}
• The background image can also be set for specific elements, like the
<p> element:
• Example
p{
background-image: url("[Link]");
}
• The background-repeat property sets if/how a background image will be
repeated.
• By default, a background-image is repeated both vertically and horizontally.
• Some images should be repeated only horizontally or vertically, or they will
look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
• CSS Borders
• The CSS border properties allow you to specify the style, width, and color of an
element's border.
• CSS Border Style
• 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 depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border
• CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick:
• Example
• Demonstration of the different border widths:
[Link] {
border-style: solid;
border-width: 5px;
}
[Link] {
border-style: solid;
border-width: medium;
}
• CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent
• CSS Margins
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• Margins define the distance between an element's border and the
surrounding elements.
• With CSS, you have full control over the margins. CSS has properties
for setting the margin for each individual side of an element (top,
right, bottom, and left), and a shorthand property for setting all the
margin properties in one declaration.
• Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
• margin-top - sets the top margin of an element
• margin-right - sets the right margin of an element
• margin-bottom - sets the bottom margin of an element
• margin-left - sets the left margin of an element
• All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
• CSS Padding
• The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
• With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left), and a shorthand property for setting all the padding
properties in one declaration.
• Padding - Individual Sides
• CSS has properties for specifying the padding for each side of an element:
• padding-top - sets the top padding of an element
• padding-right - sets the right padding of an element
• padding-bottom - sets the bottom padding of an element
• padding-left - sets the left padding of an element
• All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element
• CSS Height, Width and Max-width
• The CSS height and width properties are used to set the height and
width of an element.
• The CSS max-width property is used to set the maximum width of an
element.
CSS height and width Values
The height and width properties can have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height or width in px, cm, em, etc.
% - Defines the height or width in percent of the containing block
initial - Sets the height or width to its default value
inherit - The height or width will be inherited from its parent value
div {
height: 200px;
width: 50%;
background-color: powderblue;
}