Basic Style (CSS)

Basics

<p style="color:red;"> My example text </p>

Some example text

- To change the style of content in an element, use the "style" attribute in the start tag, then provide a property (e.g. color) and a value (e.g. red)

- You can set multiple properties at the same time (e.g. style="color:blue; font-size:12px;")

Style element

- You can define multiple style specs for various kinds of elements, including those indicated by ID, and class name

- To assign a class to an element, the element must have the attribute "class" with the specified class name (e.g. <p class="myClass">)

- The "style" element goes within the "head" element (which is in the "html" element, but before the "body" element)

- To be clear, you must put "#" to indicate an ID name, and "." to indicate a class name

- Text between /* and */ is considered a comment within a style element

Linking External Stylesheet Files

CSS file:

p { color: green; font-size: 12pt; } span { color: red; }

Link within the HTML file (head element):

- To make a css file, just create a txt file in a text editor, add the content, and then save it with the *.css extension

- The link goes within the "head" element (which is in the "html" element, but before the "body" element)

- The "rel" attribute specifies the relationship to the file

- If the stylesheet file is in the same folder as the HTML file that calls it, just specify the css file name without a folder path

- If the stylesheet file path can only be access through a parent folder, you can use ".." in the filepath to go back one level (e.g. "../MyCSSFolder/myStyle.css")

- You can include multiple stylesheets

Color

color: blue /* By name */ color: rgb(255,0,0) /* By RGB value */ color: #ff0099 /* Hexadecimal */ color: hsl(190,50%,50%) /* HSL: Hugh, Saturation, and Lightness */ ... background-color: red /* Background color filling the element/

- With HSL, the first value ranges from 0 and 360 and specifies the angle on the color wheel

- You can use the background-color property to change the color of the element with the text

Font Size and Style

font-size: 12pt /* By point (normal font number) */ font-size: 20px /* By pixels */ font-size: 50% /* By % of parent element font size */ font-size: 2em /* Size times the element font size */ font-size: 30mm /* By millimeters */ font-size: small /* By size name */ ... font-family: "Times New Roman" /* One font name */ font-family: "Times New Roman", Arial, sans-serif /* Backup font names */

- For more size options, go to https://www.w3schools.com/cssref/css_units.php

- A font name should have "quotes" if it has spaces in it

- It is recommended to list multiple font names so that the others can work as a backup if the browser doesn't support the previous ones

Alignment

text-align: center /* Center the text horizontally*/ text-align: right /* Right-align the text */ ... padding: 10px /* Set spacing between element border and its contents */ padding-top: 10px /* Set padding value only at the top of the element */ padding: 10px 20px 30px 40px /* Set padding for top, right, bottom, and left respectively */ ... margin: 10px /* Set spacing between element border and the outside elements */ margin-top: 10px /* Set margin value only at the top of the element */ margin: 10px 20px 30px 40px /* Set margin for top, right, bottom, and left respectively */

- In addition to padding-top and margin-top, you can specify for -left, -right, or -bottom

Position

left: 100px /* Position element a distance from the left of where it would be */ top: 20px /* Position element a distance from the top of of where it would be */ ... position: fixed /* Measure relative to the browser window border instead */ position: relative /* Measure relative to where it would otherwise be */ position: sticky /* Normal positioning until scrolled past, then becomes fixed to stay in view */ ...

- You can also set the position from the right or bottom

Display

display: inline /* Position element on same line as previous */ display: block /* Position element on new line */ display: none /* Don't display element or take up space */ display: flex /* Puts elements inline with line wrap */ display: grid /* Like flex, but each element has the same width*/ ... visibility: hidden /* Not visible, but takes up the same amount of space as if so */

- Certain elements are inline by default (e.g. span), while others are block by default (e.g. p and div)

- With flex, the elements are set in a line for as many as will fit, then any more will continue on the next line

- Flex and grid elements may adjust position with window resize, including shifting to different lines

Challenge

Create a stylesheet and include it in a web page. The web page should include a header that stays at the top of the page when you scroll down, and the page should have at least two sections, each with different font, color, and text size. Create a style class that makes the background color light green, and apply that class to three separate phrases on the page.

Completed