-
Notifications
You must be signed in to change notification settings - Fork 0
07 add CSS
In the last lesson you created a main page that loads by default when the user navigates to your app without requesting a specific page.
Browsers build in default rendering for HTML elements, which is why the main page from lesson 6 is rendered legibly, even if not very attractively, when you navigate to http://localhost:8080/exist/apps/hoaXed/index. In this lesson you’ll begin to create styling rules for your app using Cascading Stylesheets (CSS). Before you create any CSS rules, though, you’ll want to think more generally about the appearance of your site by engaging in wireframing, which is a common part of web design and development. Once you know what you want your pages to look like, you’ll begin to create CSS rules to customize the styling, linking the CSS to the HTML and verifying in the browser that the styling is being applied correctly. You’ll also practice using the browser debugging interface as part of the development pipeline.
Wireframes are sketches of web pages the focus on overall layout. Most commonly they are drawn by hand, using labeled rectangles and other shapes to represent areas of the page, and the high-level, abstract nature of the drawings is intended to help the designer avoid being distracted by color, font choices, and other lower-level details, including translating design decisions into CSS rules. You can see some of the wireframes your instructors created for the Institute in the https://github.com/Pittsburgh-NEH-Institute/pr-app/tree/main/pr-app-tutorials/wireframe directory.
You already have a resources subcollection that currently contains an includes subcollection in which you installed the index.xhtml include file that served as the focus of lesson 6. You should now create a css subcollection under resources and copy the following CSS file as hoax.css inside that new css subcollection. We discuss the meaning of the most important parts of this stylesheet below.
/*
==========
General
==========
*/
:root {
--background-color: #f3f7f5;
--text-color: #444545;
--title-color: darkgreen;
--highlight-color: #ceded6;
}
q {
quotes: "“""”""‘""’";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
hr {
border: 0;
height: 2px;
background-color: lightgray;
}
a:link {
color: var(--title-color);
text-decoration: none;
}
a:hover {
background-color: var(--highlight-color);
}
table, tr, th, td {
border: 1px black solid;
border-collapse: collapse;
}
th, td {
padding: .25em;
}
.error {
border: 1px solid gray;
padding: .5em;
font-size: smaller;
}
.left-indent {margin-left: 1em;}
/*
=======
HTML Template styling
=======
*/
body {
display: flex;
flex-direction: column;
margin: 0 1em;
min-height: 99vh;
background: var(--background-color);
color: var(--text-color);
}
h1 {
font-family: monospace;
font-size:2em;
color: var(--title-color);
}
main {
flex: 1;
}
.nav-menu {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/*
==========
Main navigation
==========
*/
nav {
display: flex;
flex-flow: row wrap-reverse;
align-items: center;
}
nav>ul {
display: flex;
flex-flow: row;
gap: 2em;
}
nav>ul>li {
flex: auto;
list-style-type: none;
}
nav>form {
display: flex;
}
/*
==========
Footer
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
==========
*/
footer {
display: block;
}CSS allows the developer to override the default browser display properties. A CSS rule has the following structure:
selector {
property1: value1;
property2: value2;
}The simplest selector is an element name that identifies the type of element to style, and it’s followed by curly braces that contain property:value pairs. The property and value are separated by a colon and each pair is followed by a semicolon. For example:
h1 {
font-family: monospace;
font-size: 2em;
color: var(--title-color);
}says that <h1> (main header) elements use a monospace font in a large font size (the default is 1em, so this is twice the size of regular text). It also says that the text color is taken from a variable called --title-color that is defined at the beginning of the CSS stylesheet:
:root {
--background-color: #f3f7f5;
--text-color: #444545;
--title-color: darkgreen;
--highlight-color: #ceded6;
}The pseudo-selector :root is where you declare variables to used elsewhere in the stylesheet. Variable names begin with a double hyphen. You could specify the color directly in the rule for the <h1> element, but grouping these sorts of values near the top in variables can make it easier to find and modify them during development. This wiki isn’t the place to try to explain CSS comprehensively, and if you aren’t already familiar with it we’d suggest starting by reading some of the introductory and tutorial information at the Mozilla Cascading Stylesheets (CSS) site before continuing below.
CSS selectors can select more than just element types: they can select parts of the HTML according to @id and @class attributes and according to context (if they are children or descendants or siblings of other types of elements). You can learn about CSS selectors more comprehensively at Cascading Stylesheets (CSS).
Flexbox is a set of CSS properties that can be used to arrange the contents of a page. If you set the display: property of an element to flex, that means that its contents are rendered in order either vertically (which is the default in HTML) or horizontally. Flexbox also makes it possible to specify which contained elements consume extra space. The CSS for this lesson includes rules that specify that the HTML <body> is a flex container with vertical content (the default) and in the HTML there are three content items: <section>, <main>, and <footer>. By default none of those items will grow to fill available space, which means that if the page is short, the footer will be rendered immediately under the main content, instead of at the very bottom of the browser window, which is where you might want it to appear. Because the CSS specifies flex: 1; for <main>:
main {
flex: 1;
}the <main> element will grow to occupy any extra space, pushing the footer down to the bottom of the page. You can see how this works by removing the flex: 1; line from the CSS.
HTML pages point to associated CSS files with <link> elements inside the HTML <head> element that look like:
<link rel="stylesheet" media="screen" type="text/css" href="resources/css/hoax.css"/>The @rel and @type variables have fixed values and the @href value points to the location of your CSS. If that value is a relative path, as is the case here, it is relative to the current location. The URLs that the controller rewrites in your app are resources immediately under the main app directory, so by specifying resources/css/hoax.css as your CSS location you point to that location under the same main app directory, that is, to the location where you saved your CSS file.
Many CSS rules will be shared by all files in a project site as a way of providing a consistent look and feel, and those should be specified in a single CSS file to which all of your HTML pages link. There are several ways to specify styling that applies to only some pages on a site, and we’ll discuss that type of styling in later lessons as the need for it arises.