Front End - HTML, CSS

I.
HTML
HTML is the language used to create the web pages you visit everyday. It provides a logical
way to structure content for web pages. HTML stands for HyperText Markup Language.
A markup language is a computer language that defines the structure and presentation of raw
text. Markup languages work by surrounding raw text with information the computer can
interpret, "marking it up" for processing.
HyperText is text displayed on a computer or device that provides access to other text
through links, also known as “hyperlinks”.
A web browser must know what language a document is written in before they can process
the contents of the document. You can let web browsers know that you are using the HTML
language by starting your HTML document with a document type declaration:
<!DOCTYPE html>
This declaration is an instruction. It tells the browser what type of document to expect, along
with what version of HTML is being used in the document. <!DOCTYPE html> must be the
first line of code in all of your HTML documents. If you don't use the doctype declaration,
your HTML code will likely still work, however, it's risky. It only tells the browser that you
plan on using HTML in the document, it doesn't actually add any HTML structure or content.
To begin adding HTML structure and content, we must first add opening and closing <html>
tags, like so:
<!DOCTYPE html>
<html>
</html>
Without these tags, it's possible that browsers could incorrectly interpret your HTML code
and present HTML content in unexpected ways.
Vocabulary:
1. Angle brackets - In HTML, the characters < and > are known as angle brackets.
2. HTML element (or simply, element) - HTML code that lives inside of angle
brackets.
3. Opening tag - the first, or opening, HTML tag used to start an HTML element.
4. Closing tag - the second, or closing, HTML tag used to end an HTML element.
Closing tags have a forward slash (/) inside of them.
In the following example, there is one paragraph element, made up of one opening tag (<p>)
and one closing tag (</p>):
Let's give the browser some information about the page. The <head> element will contain
information about the page that isn't displayed directly on the actual web page. What kind of
information about the web page can the <head> element contain? Answer: the title of the web
page. The browser displays the title of the page because the title can be specified directly
inside of the <head> element, by using a <title> element.
<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
</html>
The diagram illustrates specifically where a web page's title would appear on a browser.
Before we can add content that a browser will display, we have to add a body to the HTML
file. Once the file has a body, many different types of content can be added within the body,
like text, images, buttons, and much more.
<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
<body>
</body>
</html>
All of the code above demonstrates what is sometimes referred to as "boilerplate code." The
term is used to describe the basic HTML code required to begin creating a web page. Without
all of the elements in the boilerplate code, you'll risk starting without the minimum
requirements considered to be best practice.
II. HTML
In HTML, there are six different headings, or heading elements. Headings can be used for a
variety of purposes, like titling sections, articles, or other forms of content.
1. <h1> - used for main headings, all other smaller headings are used for subheadings.
2. <h2>
3. <h3>
4. <h4>
5. <h5>
6. <h6>
Often times, headings are meant to emphasize or enlarge only a few words. If you want to
add content in paragraph format, you can add a paragraph using the paragraph element <p>.
In HTML, you can use the unordered list for text you decide to format in bullet points. To
create an unordered list using HTML, you can use the <ul> element. The <ul> element,
however, cannot hold raw text and cannot automatically format raw text with bullet points.
Individual list items must be added to the unordered list using the <li> element.
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
HTML provides the ordered list when you need the extra ordering that unordered lists don't
provide. Ordered lists are like unordered lists, except that each list item is numbered. You
can create the ordered list with the <ol> element and then add individual list items to the list
using <li> elements.
<ol>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ol>
You can add links to a web page by adding an anchor element <a> and including the text of
the link in between the opening and closing tags. The anchor element is incomplete without
the href attribute. Attributes provide even more information about an element's content.
They live directly inside of the opening tag of an element. Attributes are made up of the
following two parts:
· The name of the attribute.
· The value of the attribute.
For anchor elements, the name of the attribute is href and its value must be set to the URL of
the page you'd like the user to visit. The href attribute specifies the link's destination. If the
href attribute is not present, the <a> tag is not a hyperlink.
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>
In the example above, the href attribute has been set to the value of the correct URL
https://www.wikipedia.org/.
For a link to open in a new window, the target attribute requires a value of _blank. The
target attribute can be added directly to the opening tag of the anchor element, just like the
href attribute.
<a href="https://www.wikipedia.org/" target=”_blank”>This Is A Link To

Wikipedia</a>
All of the elements you've learned about so far (headings, paragraphs, lists, and links) all
share one thing in common: they're composed entirely of text!
The <img> element lets you add images to a web page and it isn't composed of text. This
element is special because it does not have a closing tag, it only has an opening tag. This is
because the <img> element is a self-closing element. The <img> element has a required
attribute called src, which is similar to the href attribute in links. In this case, the value of src
must be the URL of the image. Also note that the end of the <img> element has a forward
slash /. This is required for a self-closing element. Images are not technically inserted into an
HTML page, images are linked to HTML pages. The <img> tag creates a holding space for
the referenced image.
<img src="https://www.example.com/picture.jpg" />
HTML helps support visually impaired users with the alt attribute. The alt attribute is applied
specifically to the <img> element. The value of alt should be a description of the image. The
alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
<img src="#" alt="A field of yellow sunflowers" />
HTML allows you to turn nearly any element into a link by wrapping that element with an
anchor element. With this technique, it's possible to turn images into links by simply
wrapping the <img> element with an <a> element.
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img

src="#" alt="A red prickly pear fruit"/></a>
In the example above, an image of a prickly pear has been turned into a link by wrapping the
outside of the <img> element with an <a> element.
If you are interested in modifying the spacing in the browser, you can use HTML's line break
element: <br />. The line break element <br/> is one self-closing tag. You can use it
anywhere within your HTML code and a line break will be shown in the browser. Use the
<br> tag to enter line breaks, not to separate paragraphs. The <br> tag is useful for writing
addresses or poems.
Shall I compare thee to a summer's day?<br />Thou art more lovely and more
temperate
HTML files also allow you to add comments to your code. Comments begin with . Any characters in between will be treated as a comment.

III CSS
The <style> element allows you to write CSS code between its opening and closing tags. To
use the <style> element, it must be placed inside of the head. Once <style> is placed in the
web page's head, we can begin writing CSS code.
<head>
<style>
</style>
</head>
Although the <style> element allows you to write CSS code within HTML files, this mixture
of HTML and CSS can result in code that is difficult to read and maintain. HTML files are
meant to contain only HTML code. Similarly, CSS files are meant to contain only CSS code.
HTML and CSS are kept in separate files in order to keep code maintainable and readable, as
well as keep structure separate from styling. You can create a CSS file by using the .css file
name extension, like so: style.css. When HTML and CSS code are in separate files, the
HTML file must know exactly where the CSS code is kept, otherwise, the styling can't be
applied the web page. In order to apply the styling to the web page, we'll have to link the
HTML file and the CSS file together. You can use the <link> element to link the HTML and
CSS files together. The <link> element must be placed within the head of the HTML file. It is
a self-closing tag and requires the following three attributes:
1. href - like the anchor element, the value of this attribute must be the address, or
path, to the CSS file.
2. type - this attribute describes the type of document that you are linking to (in
this case, a CSS file). The value of this attribute should be set to text/css.
3. rel - this attribute describes the relationship between the HTML file and the
CSS file. Because you are linking to a stylesheet, the value should be set to
stylesheet.
When linking an HTML file and a CSS file together, the <link> element will look like the
following:
<link href="/style.css" type="text/css" rel="stylesheet">
IV CSS STYLING
To style an HTML element using CSS, you must first select that element in the CSS file. For
example, to style a <p> element, the syntax to select it using CSS is:
p{
In the example above, all paragraph elements are selected using a CSS selector. The selector
(in this case) is p. Note that the CSS selector essentially matches the HTML tag for that
element, but without the angle brackets. The p selector in the example above will select all
<p> elements on the web page.
It's not enough to simply select an HTML element in a CSS file. To actually style the
element, you need to specify two things inside the body of the selector:
1. Property - the property you'd like to style of that element (i.e., size, color, etc.).
2. Value - the value of the property (i.e., 18px for size, Blue for color, etc.).
h1 {
color: Blue;
}
In the example above, the <h1> element has been selected. Inside of the selector's body, the
heading's color property is set to a value of Blue. The heading will now appear the color blue
in the browser. The line color: Blue; is referred to CSS declaration. A CSS declaration
consists of a property and a value. Note that a semicolon (;) ends all declarations. Finally, the
entire snippet of code in the example above is known as a CSS rule. A CSS rule consists of
the selector and all declarations inside of the selector.
You can select multiple elements at once so that you can save time styling a shared property.
h1, h2, p {
color: Green;
}
In the example above, the <h1> heading, the <h2> heading, and the paragraph have all been
styled to appear Green using a multiple element selector. A multiple element selector can
save you time when you want to style the same property across many elements.
There's a special selector that can instantly select every single element on the web page: the
universal selector.
*{
font-family: Arial;
}
In the example above, the universal selector, *, is used to select every element on the page
and set the font to Arial.
Just like HTML, you can also leave comments in your CSS file. CSS comments begin with
/* and end with */, like so:
/* This is a comment in CSS! */
V. CSS COLORS
Before discussing the specifics of color, it's important to make two distinctions about color.
Color can affect the following design aspects:
1. The foreground color
2. The background color
In CSS, these two design aspects can be styled with the following two properties:
1. color - this property styles an element's foreground color.
2. background-color - this property styles an element's background color.
h1 {
color: Red;
background-color: Blue;
}
In the example above, the text of the heading will appear in red, and the background of the
heading will appear blue.
There are a total of 147 named colors.
To take advantage of the full spectrum of colors that CSS supports, you have the option of
using RGB colors. To use RGB colors, you can use the rgb() value when styling a color.
Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.
h1 {
color: rgb(123, 20, 233);
background-color: rgb(99, 21, 127);
}
The three numbers in the parentheses represent the values for R, G, and B, in that order. Note
that you can use rgb() for background colors as well. There are many resources on the
Internet known as "color pickers" that allow you to view the result of different RGB values
before you decide to use a certain color.
There's an additional way to specify colors in CSS: hexadecimal color codes, often referred
to as "hex color codes" for short. When specifying an RGB color mixture, the values are in
base 10. Hex color codes, however, use base 16 to specify color mixtures.
h1 {
color: #09AA34;
}
In the example above, 09 refers to the value for red, AA refers to the value for green, and 34
refers to the value for blue. All hex color codes begin with a # character.
Is there a difference between RGB values and hex color codes? Answer: Not really. RGB
values and hex color codes are different ways to represent the same thing: color. When a hex
color code is composed of entirely of the same characters, the hex color can be abbreviated,
like so:
h1 {
color: #FFFFFF;
color: #FFF; /* This is the same color as above */
}
h2 {
color: #AA33BB;
color: #A3B; /* This is the same color as above */
}
HSL COLORS (CSS3). HSL stands for Hue, Saturation, and Lightness. Specifically, this is
what each means:
1. Hue - the technical term that describes what we understand as "color." In HSL,
hue is represented on a color wheel. It can take on values between 0 and 360.
2. Saturation - the amount of gray in a given color. In HSL, saturation is specified
using a percentage between 0% and 100%. The percentage 0% represents a
shade of gray, whereas 100% represents full saturation.
3. Lightness - the amount of white in a given color. Similar to saturation, lightness
is specified using a percentage between 0% and 100%. The percentage 0%
represents black, whereas 100% represents white. 50% is normal.
Notice that using HSL is very similar to using RGB. You can use HSL colors in your CSS
like this:
h1 {
color: hsl(182, 20%, 50%);
}
There is one feature that RGB colors support that hex color codes do not: opacity. Opacity is
a measure of how transparent a color is. To modify opacity in RGB colors, CSS offers the
rgba() value. The extra a character in the rgba() value is known as the alpha value. It
represents the opacity of a color. The alpha value can be a number between 0 or 1, inclusive.
h1 {
color: rgba(123, 88, 9, 0.5);
}
In the example above, the alpha value has been set to 0.5. This indicates that the color of the
heading will be set to 50% of its normal opacity. The alpha value can also be used for HSL
colors, using hsla():
h1 {
color: hsla(239, 45%, 22%, 0.4);
}
Newer revisions of HTML and CSS affect older browsers. Older browsers, over time, will
become dated (possibly obsolete) and not be able to support newer CSS features. Because of
this, we must include redundant color options in our CSS code that can cater to a wide
audience of different browsers. Specifically, we can add multiple CSS color declarations, just
in case a user's browser can't support a certain declaration. Using redundant declarations
allow you to support as many users as possible across multiple versions of different Internet
browsers.
h1 {
color: rgb(22, 34, 88);
color: rgba(22, 34, 88, 0.4);
}
VI. CSS FONTS
The phrase "type of font" refers to the technical term typeface, or font family. To change the
typeface of text on your web page, you can use the font-family property.
h1 {
font-family: Garamond;
}
When setting typefaces on a web page, keep the following points in mind:
1. The font specified in a stylesheet must be installed on a user's computer in order
for that font to display when a user visit the web page.
2. How exactly does the browser know what typeface to use when displaying the
web page? The default typeface for all HTML elements is Times New Roman.
3. It's a good practice to limit the number of typefaces used on a web page to 2 or 3.
4. When the name of a typeface consists of more than one word, it must be enclosed
in double quotes (otherwise it will not be recognized), like so:
h1 {
font-family: "Courier New";
}
In CSS, size can be assigned in pixels (px), rems, or ems.

1. pixel (px): Standard unit of measurement for sizing fonts and other HTML elements.
2. rem: Represents the default font size for the web browser. Rems can be used to
ensure that HTML elements scale in proportion to each other on various web
browsers and screen sizes. On most web browsers, 1rem is equivalent to 16px, 2rem
is equivalent to 32px (a doubling), 3rem is equivalent to 48px (a tripling) and so on.
3. em: A relative value that changes in proportion to the size of the parent element. For
example, if a parent element has font-size: 20px;, child elements with font-size: 1em;
would be equivalent to 20px. Child elements with font-size: 0.5em; would be
equivalent to 10px (a halving) and so on.
VII. IDs, classes, and divs
With the proper labels, we can style individual HTML elements! Specifically, we can label
HTML elements with a unique identifier, or ID. We can then style that specific element in
the stylesheet. To label an element with an ID, we can use the id attribute on an HTML
element.
<h1 id="botswana">Botswana</h1>
In the example above, the heading is labeled with an id of botswana.

To style a specific element labeled with an ID, you can use an ID selector in the stylesheet.
#botswana {
background-color: #56ABFF;
}
In the example above, the HTML element with an ID of botswana is targeted with the ID
selector #botswana. All ID selectors begin with the octothorpe character: #. The value of
the ID immediately follows the octothorpe. Once you've correctly targeted the element, you
can proceed to style it as usual.
For multiple elements that should share the same styling, classes can be used to label them.
To label an element with a class, we can use the class attribute on an HTML element.
<h1 class="science">Scientist Discovers Important Cure</h1>
To style elements of the same class, you can use a class selector in the stylesheet.
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}
Class selectors begin with a period (.) and are immediately followed by the name of the class.
In the example above, all elements with a class of science will have their typeface, color, and
letter case modified.
The class selector targets all elements of a particular class. It's possible, however, for
multiple elements on a web page to share a specific styling, but for one of those elements to
differ slightly. a heading and a paragraph (both with a class of breaking) may need to share
the same typeface, but the paragraph may require a styling better suited for paragraphs, as in
the following example.
.breaking {
font-family: Georgia, Times, serif;
}
p.breaking {
line-height: 1.3em;
}
The .breaking selector targets all elements with a class of breaking. The p.breaking selector
targets only <p> elements with a class of breaking. This type of selector allows you to be
even more specific about a particular element's styling, even when that element must share
some styling with other elements.
The same syntax can be used to style multiple classes at once.
.first, .last {
font-size: 20px;
}
You learned that elements that share a styling (e.g. typeface) are labeled with the same class.
When those same elements must also be differentiated, however, labeling with an additional
class is helpful.
<h1 class="book domestic">The Way of the Deep</h1>

<h1 class="book foreign">A Night in the Sky</h1>
<style>
.book {
font-family: Georgia, serif;
}
.domestic {
font-color: #0902CC;
}
.foreign {
font-color: #B097DD;
}
</style>
In the example above, the HTML code uses main headings for two different book titles. In
this example, all book titles must share the same typeface, so the headings are labeled with a
class of book and are then styled with a typeface of Georgia. The books, however, must be
differentiated based on their country of origin. To differentiate the book titles based on this
information, two additional classes, domestic and foreign, are applied to the respective
headings, which style the color of the heading in the CSS code. To label an HTML element
with an additional class, simply include the class within the double quotes, immediately after
the first class. HTML elements can be labeled with many classes, but whenever possible, it's
best to limit an element to four classes at most.
HTML offers an element that is the backbone of code organization: the div, represented by
<div> in HTML. You can think of the div as a box, or container, that groups elements that
belong together. For example, a <div> can be used to group together all of the elements that
make up the navigation for a web page, or any other section of a page.
<div>
<h1>Alice In Wonderland</h1>
<p> ... </p>
</div>
In the example above, a heading for "Alice In Wonderland" and a brief paragraph description
of the book are contained within a single <div>. If more books were to appear on the page,
additional divs could be used to organize them. This would keep the code easier to read,
maintain, and style.
Now that you know how to organize code into sections using divs, we can start labeling divs
with classes instead, rather than labeling individual elements with classes. Even when divs
are labeled with classes, there will be many other times when an individual element will need
to be labeled with a class.
<div class="container">
<h1 class="title">Alice In Wonderland</h1>
<p> ... </p>
</div>
<style>
div.container {
background-color: rgb(252, 255, 205);
font-family: Roboto, Helvetica, sans-serif;
}
h1.title {
color: #0D1A2F;
}
</style>
VII.
An element's box has two dimensions: a height and a width. In HTML, all boxes have
default dimensions. These default dimensions are automatically set to hold the raw contents
of the box. To modify the default dimensions an element's box in CSS, you can use the width
and height properties. These two properties can be specified with the following units of
measurement:
1. Pixels - Standard unit of measurement for sizing fonts and other HTML
elements. This unit lets you set the exact size of an element's box.
2. Ems - This unit sets the dimensions of the box relative to the size of the text
within the box.
3. Percentages - This unit sets the dimensions of the box relative to the size of the
box that it is encased in. For example, consider an element (a box) of class blue
set to a height of 200 pixels and a width of 200 pixels. Inside of blue, consider
another box of class red, set to a height of 37% and a width of 45%. The
resulting dimensions of the red box would be a height of 74 pixels and a width
of 90 pixels.
Because many web pages are now accessed on mobile devices and other displays of differing
sizes, ems and percentages allow boxes to scale depending on the size of a user's display.
Because a web page can be viewed through displays of differing screen size, the content on
the web page can suffer from those changes in size. To avoid this problem, CSS offers two
properties that can limit how narrow or how wide an element's box can be sized to.
1. min-width - this property ensures a minimum width for an element's box.
2. max-width - this property ensures a maximum width for an element's box.
In the example above, the width of all paragraphs will not shrink below 300 pixels, nor will
the width exceed 600 pixels.
You can also limit the minimum and maximum height of an element.
1. min-height - this property ensures a minimum height for an element's box.
2. max-height - this property ensures a maximum height for an element's box.
What will happen to the contents of an element's box if the max-height property is set too
low? It's possible for the content to spill outside of the box, resulting in content that is not
legible. You'll learn how to work around this issue in the next exercise.
When the value of the max-height property is set too low, the contents will spill outside of the
box.
The overflow property controls what happens to content when it spills, or overflows, outside
of its box. It can be set to one of the following values:
1. hidden - when set to this value, any content that overflows be hidden from
view.
2. scroll - when set to this value, a scrollbar will be added to the element's box so
that the rest of the content can be viewed by scrolling.
p{
min-width: 300px;
max-width: 600px;
min-height: 150px;
max-height: 300px;
overflow: scroll;
}
It's not possible to view a box's border if the border's style has not been set. A border's style
can be set with the border-style property. This property can take on one of the following
values:
1. solid - border is a solid line.

2. dashed - border is a series of lines or dashes.
3. dotted - border is a series of square dots.
4. double - border is two solid black lines.
5. groove - border is a groove (or carving).
6. inset - border appears to cut into the screen.
7. outset - border appears to pop out of the screen.
8. ridge - border appears as a picture frame.
9. hidden or none - no border.
You can control the thickness, or width, of borders with the border-width property. The value
of border-width is given in pixels.
p{
border-style: solid;
border-width: 5px;
}
In the example above, the solid borders of all paragraphs on the page would be set to a
thickness of 5 pixels.
It's also possible to also set the border-width property to one of the following named
thicknesses:
1. thin
2. medium
3. thick
While these values are perfectly valid, you may not see them often, but it's good to know that
they exist.
Another version of the border-width property allows you to specify the width for each side of
the border.
p{
border-width: 3px 1px 2px 1px;
}
The values in the example above refer to the border width in clockwise order (top: 3 pixels,
right: 1 pixel, bottom: 2 pixels, left: 1 pixel).
If you'd like to be even more specific about the width of different sides of the border, you can
use the following properties:
border-top-width
border-right-width
border-bottom-width
border-left-width
Each property affects the width of only one side of the border, giving you more flexibility in
customization.
p{
border-left-width: 4px;
}
The color of a border can also be customized with the border-color property.
div.container {
border-width: 3px;
border-color: rgb(22, 77, 100);
}
The border-color property accepts colors in the various formats you learned about earlier:
named colors, RGB(a) colors, and hex colors. It's common to use hex colors for borders, but
you'll likely also come across RGB(a) colors as well.
The shorthand way of setting border style, width, and color can be achieved with the border
property. The code in the example above can be shortened using the border property:
div.container {
border: 3px solid rgb(22, 77, 100);
}
Note that the border property includes all of the properties that we previously styled
individually: width, style, and color. It's considered best practice to follow the width-style-
color order when using the border property.
The corners of an element's border box can be modified with the border-radius property.
div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}
The code in the example above will set all four corners of the border to a radius of 5 pixels
(i.e. the same curvature that a circle with radius 5 pixels would have). You can create a
border that is a perfect circle by setting the radius equal to the height of the box, or to 100%.
The space between the contents of a box and the borders of a box is known as padding. In
CSS, you can modify this space with the padding property.
p{
border: 3px solid #A2D3F4;
padding: 10px;
}
The code in the example will put 10 pixels of space between the content of the paragraph (the
text) and the box borders, on all four sides. The padding property is particularly useful at
making text easier to read when the text has a border around it.
Another version of the padding property lets you specify exactly how much padding there
should be on each side of the content.
p{
border: 3px solid #XXXXXX;
padding: 5px 10px 5px 10px;
}
In the example above, the four values 5px 10px 5px 10px refer to the amount of padding in a
clockwise rotation. In order, it specifies the amount of padding on the top (5 pixels), right (10
pixels), bottom (5 pixels), and left (10 pixels)sides of the content. When this version of the
padding property is used, a padding value must be specified for all four sides of the content.
When you're certain that the top and bottom values for padding will equal each other, and that
the left and right values for padding will also equal each other, you can use the following
shortcut:
p{
padding: 5px 10px;
}
The first value, 5px, sets a padding value for the top and bottom sides of the content. The
second value, 10px sets a padding value the left and right sides of the content.
If you want to be even more specific about the amount of padding on each side of a box's
content, you can use the following properties:
padding-top
padding-right
padding-bottom
padding-left
Each property affects the padding on only one side of the box's content, giving you more
flexibility in customization.
p{
border: 3px solid #2D3FA3;
padding-bottom: 10px;
}
In the example above, only the bottom side of the paragraph's content will have a padding of
10 pixels.
The margin refers to the space directly outside of the box. You can adjust this spacing with
the margin property.
p{
border: 1px solid #23AD44;
margin: 20px;
}
The code in the example above will place 20 pixels of space on the outside of the paragraph's
box, on all four sides. This means that other HTML elements on the page cannot come within
20 pixels of the paragraph.
Another version of the margin property lets you specify exactly how much margin there
should be on each side of the box.
p{
margin: 6px 12px 6px 12px;
}
In the example above, the four values 6px 12px 6px 12px refer to the amount of margin
around the box in a clockwise rotation. In order, it specifies the amount of margin on the top
(6 pixels), right (12 pixels), bottom (6 pixels), and left (12 pixels) sides of the box. When this
version of the margin property is used, a margin value must be specified for all four sides of
the box. Just like the padding shortcut, when you're certain that the top and bottom values for
margin will equal each other, and that the left and right values for padding will also equal
each other, you can use the following shortcut:
p{
margin: 6px 12px;
}
If you want to be even more specific about the amount of margin on each side of a box, you
can use the following properties:
margin-top
margin-right
margin-bottom
margin-left
Each property affects the margin on only one side of the box, giving you more flexibility in
customization.
p{
border: 3px solid #2D3FA3;
margin-right: 15px;
}
In the example above, only the right side of the paragraph's box will have a margin of 15
pixels.
Because the margin property directly modifies the space outside of a box, it's very common
to see margin values used for only specific sides of boxes.
The margin property also lets you center content, if you follow certain requirements. Take a
look at the following example.
div.headline {
margin: auto;
}
When the margin property is set to auto, the element being styled will center in the page. In
order to center an element, a width must be set for that element. Otherwise, the width of
the div will be automatically set to the full width of its containing element, like the <body>,
for example. It's not possible, therefore, to center an element that takes up the full width of
the page.
div.headline {
width: 400px;
margin: auto;
}
In the example above, the width of the div is set to 400 pixels, which is less than the width of
the page's body. This will cause the div to center properly on the page.
All major web browsers have a default stylesheet they use in the absence of an external
stylesheet. These default stylesheets are known as user agent stylesheets. In this case, the
term "user agent" is a technical term for the browser. User agent stylesheets often have
default CSS rules that set default values for padding and margin. This affects how the
browser displays HTML elements, which can make it difficult for a developer to design or
style a web page. Many developers choose to reset these default values so that they can truly
work with a clean slate.
*{
margin: 0;
padding: 0;
}
The code in the example above resets the default margin and padding values of all HTML
elements. It is often the first CSS rule in an external stylesheet. Note that both properties are
both set to 0. When these properties are set to 0, they do not require a unit of measurement.
All HTML elements can be classified as one of the following: inline elements or block-level
elements.
1. Inline elements - elements that display inline with text, without disrupting the
flow of the text (like links).
2. Block-level elements - elements that use an entire line of space in a web page
and disrupt the natural flow of text. Most of the common HTML elements are
block-level elements (headings, paragraphs, divs, and more).
In CSS, you can change the default behavior of elements with the display property.
Modifying the display property of an element can help achieve a desired layout for a web
page. The display property can take on one of four values:
1. inline - causes block-level elements (like a div) to behave like an inline element
(like a link).
2. block - causes inline elements (like a link) to behave like a block element (like a
div).
3. inline-block - causes block-level elements to behave like an inline element, but
retain the features of a block-level element.
4. none - removes an element from view. The rest of the web page will act as if the
element does not exist.
It's common to use the display property to create a navigation bar from list items, like so:
<ul>
<li>Home</li>
<li>Products</li>
<li>Settings</li>
<li>Inbox</li>
</ul>
li {
display: inline;
}
In the example above, the block-level list items will now behave as inline elements. The
result will be list items appearing on the same line, like a navigation bar.
Elements can be hidden from view with the visibility property. The visibility property can
be set to one of the following values:
1. hidden - hides an element.
2. visible - displays an element.
<ul>
<li>Explore</li>
<li>Connect</li>
<li class="future">Donate</li>
<ul>
.future {
visibility: hidden;
}
In the example above, the list item with a class of future will be hidden from view in the
browser. Keep in mind, however, that users can still view the contents of the list item (e.g.,
Donate) by viewing the source code in their browser. Furthermore, the web page will only
hide the contents of the element. It will still leave an empty space where the element is
intended to display.
What's the difference between display: none and visibility: hidden? Answer: An element
with display: none will be completely removed from the web page. An element with
visibility: hidden, however, will not be visible on the web page, but the space reserved for it
will.
Many properties in CSS have a default value and don't have to be explicitly set in the
stylesheet.
For example, the default font-weight of text is normal, but this property-value pair is not
typically specified in a stylesheet.
The same can be said about the box model that browsers assume. In CSS, the box-sizing
property controls the type of box model the browser should use when interpreting a web
page.The default value of this property is content-box. This is the same box model that is
affected by border thickness and padding.
Fortunately, we can reset the entire box model and specify a new one: border-box.
*{
box-sizing: border-box;
}
The code in the example above resets the box model to border-box for all HTML elements.
This new box model avoids the dimensional issues that exist in the former box model you
learned about. In this box model, the height and width of the box will remain fixed. The
border thickness and padding will be included inside of the box, which means the overall
dimensions of the box do not change.
*{
box-sizing: border-box;
}
h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}
In the example above, the height of the box would remain at 200 pixels and the width would
remain at 300 pixels. The border thickness and padding would remain entirely inside of the
box. The universal selector (*) targets all elements on the web page and sets their box model
to the border-box model.
VIII. Layout
The boxes in the image were created with the following CSS:
.boxes {
width: 120px;
height: 70px;
}
Notice the block-level elements in the image above take up their own line of space and
therefore don't overlap each other. In the browser to the right you can see block-level
elements also consistently appear on the left side of the browser. This is the default position
for block-level elements.
The default position of an element can be changed by setting its position property. The
position property can take one of four values:
1. static - the default value (it does not need to be specified)
2. relative
3. absolute
4. fixed
It's important to understand that if you favor the default position of an HTML element, you
don't need to set its position property.
One way to modify the default position of an element is by setting its position property to
relative. This value allows you to position an element relative to its default static position on
the web page.
.box-bottom {
background-color: DeepSkyBlue;
position: relative;
top: 20px;
left: 50px;
}
In the example above, the div has been positioned using two of the four offset properties. The
valid offset properties are:
1. top - moves the element down.
2. bottom - moves the element up.
3. left - moves the element right.
4. right - moves the element left.
In the example above, the div will be moved down 20 pixels and to the right 50 pixels from
its default static position. The image below displays the new position of the box. The dotted
line represents where the statically positioned (default) box was positioned.
Units for offset properties can be specified in pixels, ems, or percentages. Note that offset
properties will not work if the position of the element is not set to relative.
Another way of modifying the position of an element is by setting its position to absolute.
When an element's position is set to absolute all other elements on the page will ignore the
element and act like it is not present on the page.
.box-bottom {
position: absolute;
top: 20px;
left: 50px;
}
In the example above, the .box-bottom div will be moved down and right from the top left
corner of the view. If offset properties weren't specified, the top box would be entirely
covered by the bottom box. The bottom box (colored blue) is displaced from the top left
corner of its container. It is 20 pixels lower and 50 pixels to the right of the top box.
When an element's position is set to absolute, as in the last exercise, the element will scroll
out of view when a user scrolls.
We can fix an element to a specific position on the page (regardless of user scrolling) by
setting its position to fixed.
.box-bottom {
position: fixed;
top: 20px;
left: 50px;
}
In the example above, the div will remain fixed to its position no matter where the user
scrolls on the page. This technique is often used for navigation bars on a web page.
When boxes on a web page have a combination of different positions, the boxes (and
therefore, their content) can overlap with each other, making the content difficult to read or
consume.
.box-top {
background-color: Aquamarine;
}
.box-bottom {
position: absolute;
top: 20px;
left: 50px;
}
In the example above, the .box-bottom div ignores the .box-top div and overlaps it as a user
scrolls.
The z-index property controls how far "back" or how far "forward" an element should
appear on the web page. The z-index property accepts integer values. Depending on their
values, the integers instruct the browser on the order in which elements should be displayed
on the web page.
.box-top {
background-color: Aquamarine;
position: relative;
z-index: 2;
}
.box-bottom {
position: absolute;
top: 20px;
left: 50px;
z-index: 1;
}
In the example above, we set the .box-top position to relative and the z-index to 2. We
changed position to relative, because the z-index property does not work on static elements.
The z-index of 2 moves the .box-top element forward, because it is greater than the .box-
bottom z-index, 1.
If you're simply interested in moving an element as far left or as far right as possible on the
page, you can use the float property. The float property can be set to one of two values:
1. left - this value will move, or float, elements as far left as possible;
2. right - this value will move elements as far right as possible.
.boxes {
width: 120px;
height: 70px;
}
.box-bottom {
float: right;
}
In the example above, we float the .box-bottom element to the right. This works for static and
relative positioned elements. Floated elements must have a width specified, as in the example
above. Otherwise, the element will assume the full width of its containing element, and
changing the float value will not yield any visible results.
The float property can also be used to float multiple elements at once. However, when
multiple floated elements have different heights, it can affect their layout on the page.
Specifically, elements can "bump" into each other and not allow other elements to properly
move to the left or right.
The clear property specifies how elements should behave when they bump into each other
on the page. It can take on one of the following values:
1. left — the left side of the element will not touch any other element within the same
containing element.
2. right — the right side of the element will not touch any other element within the same
containing element.
3. both — neither side of the element will touch any other element within the same
containing element.
4. none — the element can touch either side.
div {
width: 200px;
float: left;
}
div.special {
clear: left;
}
In the example above, all divs on the page are floated to the left side. The div with class
special did not move all the way to the left because a taller div blocked its positioning. By
setting its clear property to left, the special div will be moved all the way to the left side of
the page.
IX. Adding images
As with any other element, the dimensions of an image can be set with the height and width
properties.
<img src="#" alt="A red leaf" class="leaf" />
img.leaf {
width: 350px;
height: 200px;
}
Specifying the dimensions of an image helps the browser determine how much space should
be reserved for the image.
Images can also be centered, but first, their default behavior must be changed. By default,
images are inline elements. For images to center properly, they must behave as block-
level elements.
img.leaf {
width: 300px;
height: 200px;
display: block;
}
In the example above, the image's display property has been set to block. Now the image can
be aligned as a block-level element.
img.leaf {
width: 300px;
height: 200px;
display: block;
margin: 0px auto;
}
In the example above, the image is aligned using the margin property. The top and bottom
margins of the image's box are set to 0 margin. The left and right margins are set to auto,
which automatically sets the exact amount of margin needed on the left and right sides in
order to center the image.
To align images to the left or right side of a page, you can use the float property you learned
about earlier.
Images can also be added to the backgrounds of HTML elements with the background-image
property.
body {
background-image: url("https://www.example.com/leaf.jpg");
}
The background-image can be set to a value of url(). URL() contains the URL of the image,
enclosed in double quotes. You can control how a background image repeats with the
background-repeat property. This property can take one of four values:
1. repeat - the default value — the image will repeat horizontally and vertically.
2. repeat-x - the background image will be repeated only along the x-axis (horizontally).
3. repeat-y - the background image will be repeated only along the y-axis (vertically).
4. no-repeat - the background image will not be repeated at all and will appear only
once.
p{
background-image: url("#");
background-repeat: repeat-x;
}
In the example above, the paragraph's background image will repeat horizontally.
When a background image is not repeated, its position can be modified with the
background-position property.
p{
background-image: url("#");
background-repeat: no-repeat;
background-position: right top;
}
A background image is positioned using a 3 by 3 grid (three rows, three columns), meaning
there are 9 total possible positions for the image:
1. left top - top left corner of the element's box.
2. center top - top center of the element's box.
3. right top - top right corner of the element's box.
4. left center - left column, center row.
5. center center - the center of the element's box.
6. right center - right column, center row.
7. left bottom - bottom left corner of the element's box.
8. center bottom - bottom center of the element's box.
9. right bottom - bottom right corner of the element's box.
In the example above, the background image is not repeated. It's positioned in the top right
corner of the element's box. The code in the example above can be shortened using the
background property.
p{
background: url("#") no-repeat right center;
}
Note that the background property includes all of the properties that we previously styled
individually: background image, repetition, and position (in that order). It's considered best
practice to follow this order of values when setting the background.
To modify a background image's size, you can use the background-size property.
1. cover - expands the image as large as possible to cover the full width or height of a
container. If the dimensions of the container (say, a div) are larger than the
dimensions of the image, the image will become distorted. This value is best for
images that don't communicate important content to the user, like background images.
2. contain - expands the image as large as possible, but the image will be letterboxed,
which means it won't cover the full width or height of a container.
div.header {
height: 400px;
width: 100%;
background-size: cover;
}
In the example above, the background image will expand to cover the full size of the div.
With the background-attachment property, you can specify whether or not a background
image should remain at one position on the web page or whether it should move up and down
as the user scrolls through a web page.
1. scroll - this value allows the image to move up and down as a user scrolls on the web
page (this is the default value).
2. fixed - this value pins the image's position on the page.
p{
background-attachment: fixed;
}
In the example above, the background image will remained fixed as a user scrolls through the
web page.
Gradients are planned to be a part of the newest revision of CSS, CSS3. Due to the many
browsers available, there is no standard way of defining a gradient using CSS (different
browsers require different syntax). We'll look at one value supported on a couple of major
browsers. The background-image property can be set to the following value:
● -webkit-linear-gradient() - this value accepts two arguments: the two colors the
linear gradient will transition to and from. The colors are usually specified as hex
color codes.
div.header {
height: 400px;
width: 400px;
background-image: -webkit-linear-gradient(#666CCC, #BC1324);
}
You've learned how to add images to a web page using the <img> element and the
background property. What's the difference between these two methods? When should one
method be used over another?
The method used depends on the type of image.
Some images are part of the content of a web page (icons, logos, album photos, etc.) and they
communicate important information to a user. Other images are intended simply to style a
web page (header backgrounds, etc.), not to communicate important information.
When an image communicates important information, you can use the <img> element and
style the image using CSS, if needed.
When an image is intended to style a web page, you can use the background property and
further style it with CSS.
X. Tables
Before displaying data, you must first create the table that will contain the data by using the
<table> element. The <table> element will contain all of the tabular data you plan on
displaying. The first step in entering data into the table is to add rows using the table row
element: <tr>.
<table>
<tr>
</tr>
<tr>
</tr>
</table>
Rows aren't sufficient to add data to a table. Each cell element must also be defined. In
HTML, you can add data using the table data element: <td>.
<table>
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
In the example above, two data points (73 and 81) were entered in the one row that exists. By
adding two data points, we created two cells of data. If the table were displayed in the
browser, it would show a table with one row and two columns.
Table data doesn't make much sense without titles to describe what the data represents. To
add titles to rows and columns, you can use the table heading element: <th>. The table
heading element is used just like a table data element, except with a relevant title. Just like
table data, a table heading must be placed within a table row.
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
First, a new row was added to hold the three headings: a blank heading, a Saturday heading,
and a Sunday heading. The blank heading creates the extra table cell necessary to align the
table headings correctly over the data they correspond to. In the second row, one table
heading was added as a row title: Temperature.
The scope attribute, can take one of two values:

1. row - this value makes it clear that the heading is for a row.
2. col - this value makes it clear that the heading is for a column.
So far, the tables you've created have been a little difficult to read because they have no
borders. You can achieve the effect using CSS.
table, td {
}
What if the table contains data that spans multiple columns?
For example, a personal calendar could have events that span across multiple hours, or even
multiple days.
Data can span columns using the colspan attribute. The attributes accepts an integer (greater
than or equal to 1) to denote the number of columns it spans across.
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td colspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
In the example above, the data Out of Town spans the Monday and Tuesday table headings
using the value 2 (two columns). The data Back in Town appear only under the Wednesday
heading.
Data can also span multiple rows using the rowspan attribute. The rowspan attribute is used
for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain
day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans
across.
<table>
<tr> 
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr> 
<th>Morning</th>
<td rowspan="2">Work</td>
<td rowspan="3">Relax</td>
</tr>
<tr> 
<th>Afternoon</th>
</tr>
<tr> 
<th>Evening</th>
<td>Dinner</td>
</tr>
</table>
In the example above, there are four rows:

1. The first row contains an empty cell and the two column headings.
2. The second row contains the Morning row heading, along with Work, which spans
two rows under the Saturday column. The "Relax" entry spans three rows under the
Sunday column.
3. The third row only contains the Afternoon row heading.
4. The fourth row only contains the Dinner entry, since "Relax" spans into the cell next
to it.
Over time, a table can grow to contain a lot of data and become very long. When this
happens, the table can be sectioned off so that it is easier to manage. Long tables can be
sectioned off using the table body element: <tbody>. The <tbody> element should contain
the all of the table's data, excluding the table headings (more on this in a later exercise).
<table>
<tbody>
<tr>
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>Morning</th>
</tr>
<tr>
<th>Afternoon</th>
</tr>
<tr>
<th>Evening</th>
<td>Dinner</td>
</tr>
</tbody>
</table>
In the example above, all of the table data is contained within a table body element. Note,
however, that the headings were also kept in the table's body — we'll change this in the next
exercise.
When a table's body is sectioned off, however, it also makes sense to section off the table's
headings using the <thead> element.
<table>
<thead>
<tr>
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>Morning</th>
</tr>
<tr>
<th>Afternoon</th>
</tr>
<tr>
<th>Evening</th>
<td>Dinner</td>
</tr>
</tbody>
</table>
In the example above, the only new element is <thead>. The table headings are contained
inside of this element. Note that the table's head still requires a row in order to contain the
table headings.
The bottom part of a long table can also be sectioned off using the <tfoot> element.
<table>
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
<th>Costs</th>
</tr>
</thead>
<tbody>
<tr>
<th>Q1</th>
<td>$10M</td>
<td>$7.5M</td>
</tr>
<tr>
<th>Q2</th>
<td>$12M</td>
<td>$5M</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$22M</td>
<td>$12.5M</td>
</tr>
</tfoot>
</table>
In the example above, the footer contains the totals of the data in the table. Footers are often
used to contain sums, differences, and other data results.
You can use CSS to style tables just like you have done in the past. Specifically, you can
change style the various aspects mentioned above.
table, th, td {
font-family: Arial, sans-serif;
text-align: center;
}
The code in the example above demonstrates just some of the various table aspects you can
style using the CSS properties you learned about earlier.
Index:
HTML = Hyper Text Markup Language
URL = Uniform Resource Locator
CSS = Cascading Style Sheet

Front End - HTML, CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Front End - HTML, CSS

Încărcat de

Drepturi de autor:

Formate disponibile

I.

<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>

<a href="https://www.wikipedia.org/" target=”_blank”>This Is A Link To

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img

<link href="/style.css" type="text/css" rel="stylesheet">

/* This is a comment in CSS! */

There are a total of 147 named colors.

VI. CSS FONTS

In CSS, size can be assigned in pixels (px), rems, or ems.

VII. IDs, classes, and divs

In the example above, the heading is labeled with an id of botswana.

<h1 class="science">Scientist Discovers Important Cure</h1>

The same syntax can be used to style multiple classes at once.

<h1 class="book domestic">The Way of the Deep</h1>

1. solid - border is a solid line.

IX. Adding images

<img src="#" alt="A red leaf" class="leaf" />

The method used depends on the type of image.

The scope attribute, can take one of two values:

In the example above, there are four rows:

S-ar putea să vă placă și