HTML - CSS Notes

#notes on CSS/HTML
#7/26/23
#CafeMenu/CatPhotoApp
You can add style to an element by specifying it in the style element and setting a
property for it like this:
--------------
element {
property: value;
}
--------------
Center your h1 element by setting its text-align property to the value center:
--------------
<style>
h1{
text-align: center;
}
</style>
--------------
In the previous step, you used a type selector to style the h1 element.
Center the h2 and p elements by adding a new type selector for each one to the
existing style element.
______________
<style>
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
</style>
______________
You now have three type selectors with the exact same styling. You can add the same
group of styles
to many elements by creating a list of selectors. Each selector is separated with
commas like this:
______________
selector1, selector2 {
property: value;
}
______________
Delete the three existing type selectors and replace them with one
selector list that centers the text for the h1, h2, and p elements.
______________
<style>
h1, h2, p {
text-align: center;
</style>
______________
!!! NEW ON CSS !!!
You have styled three elements by writing CSS inside the style tags. This works,
but since there
will be many more styles, it's best to put all the styles in a separate file and
link to it.
eg..(styles.CSS) *exclude <styles> tag in .CSS file(?)
To link the styles.css file so the styles will be applied again. Nest a self-
closing link element in
the head element. Give it a rel attribute w/ value 'stylesheet' and an href
attribute value of 'styles.css'(name of css file)
______________

<head>
<link rel='stylesheet' href='styles.css' 
<meta charset="utf-8" />
<title>Cafe Menu</title>
</head>
______________
!!! NEW ON MOBILE CONFIG !!!
For the styling of the page to look similar on mobile as it does on a desktop or
laptop, you need
to add a meta element with a special content attribute. Add the following within
the head element:
______________

<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
______________
/* within styles.css */
h1, h2, p {
text-align: center;
}
body {
background-color: burlywood;
}
______________
!!! HEALTHY PRACTICE !!!
The div element is used mainly for design layout purposes unlike the other content
elements you have used
so far. Add a div element inside the body element and then move all the other
elements inside the new div.
*Basic structure of Content within a div container*
______________
<body>
<div>
<main>
<h1>WEB DESIGN</h1>
<p>Healthy practice of Code Structure</p>
<section>
<h2>Section Idea within main Topic 'WEB DESIGN'</h2>
</section>
</main>
</div>
</body>
______________
to center the div horizontally. You can do this by setting its margin-left and
margin-right
properties to auto. Think of the margin as invisible space around an element.
Using these two margin properties, center the div element within the body element.
______________
/* styles.css */
div {
margin-left: auto;
margin-right: auto;
width: 80%;
}
______________
So far you have been using type selectors to style elements. A class selector
is defined by a name with a dot directly in front of it, like this:
______________
.class-name {
styles
}
______________
Changing the existing div selector into a class selector by replacing div with a
class named menu.
______________
/* use class selectors in the stylesheet */
.menu {
width: 80%;
margin-left: auto;
margin-right: auto;
}
______________
To apply the class's styling to the div element, add a class attribute
to the div element's opening tag and set its value to menu.
______________

<div class='menu'>
______________
article elements commonly contain multiple elements that have related information
______________

<article>
<p>Product</p>
<p>price</p>
</article>
<article>
<p>Product</p>
<p>price</p>
</article>
______________
Add the class name brand to the product p element.
______________

<article>
<p class='brand'>product</p>
<p>price</p>
</article>
______________
/* Calling the Class Selector just made in .index, to the stylesheet */

.brand {
property: value;
}
______________
p elements are BLOCK elemements, they take up the entire width of their parant
element.
to make them behave more like INLINE elements, create a class value in the
article/parent section
______________

<article class='item'>
<p class='brand'>product</p>
<p class='price'>value</p>
</article>
______________
/* egStyle.css aligns ellements but does not make elements INLINE
To style all the p elements nested anywhere in elements with a class named item
like this:
*/
.item p {
display: inline-block;
}
.brand {
text-align: left;
}
.price {
text-align: right;
}
______________
The price won't stay over on the right. This is because inline-block elements only
take up the
width of their content. To spread them out, add a width property to the
brand and price class selectors that have a value of 50% each.
______________
/* adjust this if there are issues on display e.g.50%>49%, ALSO, moving to p
elements to the
same like within the code editor will have an effect on this too
e.g.<p>code</p><p>code</p>
*/
.brand {
width: 49%;
text-align: left;
}
______________

<article class="item">
<p>product</p><p>value</p>
</article>
______________
You can give your menu some space between the content
and the sides with various padding properties.
______________
/* Here we intro padding & margin, notice quantity is in px
All 4 paddings are the same, replace this with a single padding property
(this would be a for a section with a form)
*/
.form {
width: 88%;
margin-left: 20px;
margin-right: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
______________
-Use Max-Width property to limit the content on the page
Change all the text in your body, by adding a font-family property with the value
sans-serif.
This is a fairly common font that is very readable.
Sytle different headings, paragraphs, or other elements in the stylesheet
______________
/* e.g. */
h1, h2 {
font-family: Impact;
}
______________
Fallback value are used in instances where the initial is not found/available.
Adding the fallback font serif after the Impact font.(seperate with comma)
______________
/* font-style, font-size property are usefull too */
h1, h2 {
font-family: Impact, serif;
}
h3 {
font-style: italic, bold;
}
p {
font-size: 26px;
}
______________
You can use an hr <hr> element to display a divider between sections of different
content.
(this can be colored, styled and edited)border-color/ect..
Add margins in paragraph sections to edit and organize text.

Add padding to body and footer sections to adjust size
The default color of a link that has not yet been clicked on is typically blue.
The default color of a link that has already been visited from a page is typically
purple.
You change properties of a link when the link has actually been visited by using a
pseudo-selector that looks like
______________
/* egStyle.css */
a:visited { propertyName: propertyValue; }
(e.g.)
a:visited {color:grey;}
______________
You change properties of a link when the mouse hovers over them by using a
______________
a:hover { propertyName: propertyValue; }
a:hover{color:pink}
______________
You change properties of a link when the link is actually being clicked by using a
______________
a:active { propertyName: propertyValue; }
a:active{color:black;}
______________
the browser has default effects like margin-top,
image elements are INLINE elements
______________
/* CSS for centering an image */
img {
display: block;
margin-left: auto;
margin-right: auto;
}
______________
(h) elements have default top and bottom margin space, so you could change the
bottom margin of the h2 elements to say 0 or another number.
There is an easier way, simply add a negative top margin to the img elements to
pull them up from
their current positions. Negative values are created using a (-) in front of the
value

HTML - CSS Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML - CSS Notes

Uploaded by

Copyright:

Available Formats

#notes on CSS/HTML

/* Calling the Class Selector just made in .index, to the stylesheet */

Add margins in paragraph sections to edit and organize text.

You might also like