Intro
If html is the layout of your webpage page, CSS is the styling. You can add or edit static things like size and color, or interactive components of your page like scrollover behavior or once clicked appearance.
HTML provides structure for text and links, but formatting tags quickly become expensive within its markup language. CSS was developed by W3C in 1996 to allow developers an easier way to style documents. With CSS, styling properties can be chained, style can be applied across elements by class or type, and multiple pages can be styled from the same code. Style sheets are typically separate documents, so any management or updating to styling can be done from that one document, rather than searching all code for styling tags to update.
Structure
CSS rules have the format
selector {declaration block}
The declaration block has pairs of properties and property values.
{property: property value}
For example, to center a h1 header, you would use
h1{text-align: center;}
Selectors specify which object(s) are being styled. You can use id as a selector
#someID{color: pink}
or class,
.someClass{font-style: italic}
element, like paragraph
p {background-color: lightgrey}
or the universal selector *
*{color: orange}
The universal selector refers to all elements within the body.
Where to Keep Your CSS
In the introduction we referenced that CSS can be kept in a separate style sheet. This can be particularly convenient if you're styling many pages and tracking all styling in one document.
CSS rules could also be stored internally or inline. Internally stored CSS is typically kept within a
<style>
element in the
<head>
section of an HTML page. Inline CSS is useful for applying styling to a single element and therefore happens within the code.
What can you control with CSS?
- font, text color, text size, and style
- background colors, images, opacity
- element position
- sidebar and text box dimensions and position
- image size, position, border
- list layout
Some examples
Below, internal CSS rules are housed within the tags in the <head> of the document. This body styles will impact the whole document, as its all part of the body.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My First Webpage</title> <meta name="description" content="An example web page built in Web Skills class"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Roboto', sans-serif; background-color: #4A547F; } </style> </head> </code></pre></div> <p></p> <h5> <a name="in-conclusion" href="#in-conclusion" class="anchor"> </a> In Conclusion##### </h5> <p>CSS allows pages to load faster, provides for easier maintenance and updating, has more attributes than HTML, and was created by the international organization for maintaining standards, W3C, so its compatible across many devices and languages. </p> <h6> <a name="references" href="#references" class="anchor"> </a> References </h6> <p><a href="https://multimedia.journalism.berkeley.edu/tutorials/css-intro/">UC Berkeley Graduate School of Journalism 2020<br> </a><br> <a href="https://www.w3schools.com/css/default.asp">w3schools</a><br> <a href="https://en.wikipedia.org/wiki/CSS">Wikipedia</a></p>
Top comments (0)