Yet another coding assignment, but this time I get to play with colours and positioning! That I like.
The task is to create a website with (at least) 3 pages (i’ll go with home, contact and about (again)) for a website that promotes mental health. We all got one, and it is important to address it before everything goes south.
The brief had some spesifics about which sections and titles that should be included, and now the code is too long to fit in a single screenshot. So, I uploaded the files to one.com. See it there instead (use ctrl U on PC or cmd U on a mac to see the source code).
I have also created a stylesheet that I have linked in the html file. By using an external stylesheet, I can reuse it in all pages.
CSS can use tag names or identifyers of IDs and classes to identify an html element in order to style it. When referencing a html tag, you only use the name and you’re good. If you use ID on an element, it has to be only one occurence of this id in the document. An element can only have one ID. I use IDs in sections and when I want to link to an element further down on a page. IDs are identified in the css document with a hash (#).
Classes on the other hand does not have to be unique. By styling a class, you can ensure that every instance of this type of object is formatted the same way. An element may have many classes, and by adding classes, you can do overrides.
I added some basic formatting to the document and on the site, you can see the result.
The second part of this weeks work is to go to Zengarden and identify some elements
h1. Content CSS Zen Garden
| Default | Mid-century Modern |
| @media only screen and (min-width: 1132px) h1 { display: inline-block; position: relative; margin: 15px 0 0 0; padding: 60px 0 5px 0; } | .intro header h1 { position: absolute; color: #ffffff; font-size: 100%; line-height: 2em; top: 4.2em; left: -3em; width: auto; margin: 0; padding: 1em; -webkit-transform: rotate( -90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } |
| h1 { font-family: ‘Julius Sans One’, sans-serif; font-size: 3.2em; text-transform: uppercase; } | h1 { font-size: 2em; margin: 0.67em 0; } |
| h1, h2 { color: #fff; font-weight: normal; } | |
| * { box-sizing: border-box; } | |
In addition, there are a lot of rules that are inherited
For the p element, these rules apply
| @media only screen and (min-width: 1132px) 214.css?v=8may2013:751 p { font-size: 1em; } | .intro .preamble p { margin-right: 35%; } |
| p { margin: 0.75em 0; line-height: 2; } | |
| * { box-sizing: border-box; } | |
Link with the class designer-name inside an unordered list
| .sidebar a:hover, .sidebar a:focus { color: #49968e; } | .sidebar .design-selection nav ul li a { color: #ffffff; text-decoration: none; display: block; border-bottom: 0 solid transparent; } |
| .design-selection .design-name, .zen-resources a, li.viewall a { display: block; margin-bottom: 0.25em; font-family: ‘Julius Sans One’, sans-serif; font-size: 1.2em; font-style: normal; text-transform: uppercase; } | a { color: #0d2c40; text-decoration: none; border-bottom: 1px solid #0d2c40; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } |
| sidebar a { color: #607476; text-decoration: none; } | |
| a:hover, a:focus { color: #0599c2; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; text-decoration: underline; } | |
| a { color: #0d8ba1; text-decoration: none; } |