CSS part 1
uses the id attribute of an HTML element to select a specific element.
#para1 { text-align: center; color: red; } The CSS rule below will be applied to the HTML element with id="para1"
The CSS rule below will affect every HTML element on the page:
* { text-align: center; color: blue; } The universal selector
In this example all HTML elements with class="center" will be red and center-aligned:
.center { text-align: center; color: red; }
CSS Comments
/* This is a single-line comment */ /* This is a multi-line comment */
Defining external style file in HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head>
set the background color for HTML elements
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
set the color of text
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Defining an inline style
<h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
External vs internal style
<link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange":
Defining an internal style
<style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
CSS min-width min-height Property
The min-width property defines the minimum width of an element. If the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect. Note: This prevents the value of the width property from becoming smaller than min-width.
The background color of a page is set like this:
body { background-color: lightblue; }
Repeat the image only horizontally By default, the ... property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this
body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } Tip: To repeat an image vertically, set background-repeat: repeat-y;
The ... property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
Specify that the background image should scroll with the rest of the page:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; }
The ... property is used to specify the position of the background image.
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }
Show the background image only once:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
specifies an image to use as the background of an element.
body { background-image: url("paper.gif"); } By default, the image is repeated so it covers the entire element.
The CSS margin properties are used to
create space around elements, outside of any defined borders.
specifies the transparency of an element
div { background-color: green; opacity: 0.3; } It can take a value from 0.0 - 1.0. The lower value, the more transparent: Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):
div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }
Set the height and width of a <div> element:
div { height: 200px; width: 50%; background-color: powderblue; }
max-width vs width
div { max-width: 500px; height: 100px; background-color: powderblue; } max-width allows an element to scale down if it doesn't fit a screen size
properties used to generate space around an element's content, inside of any defined borders.
div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 50px 30px 50px 80px; }
You can set the margin property to ... to horizontally center the element within its container.
div { width: 300px; margin: auto; border: 1px solid red; }
To keep the width at 300px, no matter the amount of padding, you can use the ... property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.
div { width: 300px; padding: 25px; box-sizing: border-box; }
Padding and Element Width
div { width: 300px; padding: 25px; } Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
Margin Collapse
h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } ... <h1>Heading 1</h1> <h2>Heading 2</h2> Margin between elements:50 instead of 70 Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
h1, h2, and p elements have the same style definition
h1, h2, p { text-align: center; color: red; }
specify all the individual border properties for just one side
p { border-left: 6px solid red; background-color: lightgrey; } The border is on the left only
properties for specifying each of the borders
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } p { border-style: dotted solid; } The example above gives the same result as this
property used to add rounded borders to an element
p { border: 2px solid red; border-radius: 5px;/*the bigger the rounder*/ }
In this example all <p> elements will be center-aligned, with a red text color:
p { color: red; text-align: center; } p is a selector in CSS (it points to the HTML element you want to style: <p>). color is a property, and red is the property value text-align is a property, and center is the property value
Set different margins for all four sides of a <p> element:
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } p { margin: 25px 50px 75px 100px; } If the margin property has three values: margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px
The ... property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }
In this example only <p> elements with class="center" will be red and center-aligned:
p.center { text-align: center; color: red; } Note: A class name cannot start with a number!
specifies the width of the outline, and can have one of the following values
p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } thin (typically 1px) medium (typically 3px) thick (typically 5px) A specific size (in px, pt, cm, em, etc)
Invert Color
p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; } performs a color inversion. This ensures that the outline is visible, regardless of color background: Note:doesn't work, it just sets it to black
property used to set the color of the outline.
p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; }
property used to set the color of the four borders
p.one { border-style: solid; border-color: red; } p.one { border-style: solid; border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */ } The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
Specific Border Side Widths
p.one { border-style: solid; border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */ } p.two { border-style: solid; border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */ } p.three { border-style: solid; border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */ }
specifies the width of the four borders
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } 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
specifies what kind of border to display.
p.solid {border-style: solid;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!
a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out"
p.solid {outline-style: solid;} p.double {outline-style: double;} Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.