CSS Properties, Declarations, Selectors etc.
Only one of the layout variations needs to be coded per assignment. Although the layout behaves/looks different on the various screen sizes, there's only one HTML and one CSS file that makes this happen. See the Media Queries article for reference.
CSS Properties for Assignment 1_1
Example: The rule below is styling a headline with four declarations combined: font-size, width, margins and letter-spacing.
CSS code:font-size: 32px;
width: 46%;
margin: 4% 0% 4% 33.33%;
letter-spacing: 2px;
}
The first part of Assignment 1 is to create different compositions with just text. You can use the CSS declaration listed below for styling.
- font-size
- font-family
- letter-spacing
- line-height
- text-transform (capitalize, uppercase, lowercase)
- text-align (left, right, center, justify)
- word-spacing
- margin (space between elements)
- padding (space between text and edge of element)
- vertical-align (alignment of text element within another text element)
- float (left or right; used to make elements appear side by side)
- display (block, inline-block; used to make block elements behave like non-block elements, or non-block elements behave like block elements)
font-weight: '200';
font-size: 20px;
line-height: 20px;
letter-spacing: 0px;
word-spacing: 20px;
text-transform: uppercase;
text-align: right;
margin-top: 2%;
margin-right: 2%;
margin-bottom: 2%;
margin-left: 2%;
margin: 2% 2%x 2%x 2%;
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 2%;
padding: 2% 2% 2% 2%;
width: 25%;
float: right;
float: left;
list-style-type: circle;
You can find a full list of properties on the w3schools.com site.
Don't use the following declarations:
- font-variant (small caps are bad if font is not designed for that use!)
- font-style (not oblique of italics yet, part of the restrictions)
CSS Selectors for Assignment 1_1
CSS code:property: value;
}
h2 {
property: value;
}
h3 {
property: value;
}
p {
property: value;
}
ul {
property: value;
}
li {
property: value;
}
span {
property: value;
}
#div-id-name {
property: value;
}
.class-name {
property: value;
}
CSS measurements: Fixed pixel values vs percentage based values
Percentage values for element widths make often more sense than fixed pixels values (in the CSS). For example if the distance between a paragraph and the edge of your browser is defined with percentage values it will appear relatively similar, no matter if you're viewing on a small or big screen. On the other hand, if you would use pixel amounts and apply the desired distance to small phone layout it may look to narrow on a bigger screen. If you use percentage values, especially for all the horizontal measurements you don't need to adjust as many values for the different screen sizes.
It's often better not to specify heights for elements that contain text. Paragraphs, for example, do get more narrow on smaller screens which means they need more height to contain all text. The elements' heights automatically adjusts to the amount of text in them. You would eventually run out of space if you would define a height.
The layout width is 100%. 100% : 6 = 16.66% which would be one column width without margins. If we calculate in 2% margin on each side of the column it's width is 12.66%.
So 2% + 12.66% + 2% + 2% + 12.66% + 2% + 2% + 12.66% + 2% + 2% + 12.66% + 2% + 2% + 12.66% + 2% + 2% + 12.66% + 2% = 100%
To determine with width of the title we can look at the layout and count the column which is 3. 3 x 16.66% = 50%. Subtracting the 2% margins on each side we'll end up with 46%.
If there would be another element next to the title that's 2 columns wide it would be 29.33%. But if we just need to determine the distance between the title and the left side of the layout the calculation is 2 x 16.66% = 33.33%.
Below code:
See the Pen Six Column Grid by Oliver Roeger (@uic-des) on CodePen.
Coded, Responsive Grid Example/Demo
Click this link to see a fluid, responsive grid "in action". Resize the browser window to see how some of the columns respond to smaller windows.
See the Pen Responsive, fluid grid by Oliver Roeger (@uic-des) on CodePen.
Recommended Approach (example)
Horizontal Sections/Divisions
Vertical Elements/Divisions
See the Pen oNxEoJZ by Oliver Roeger (@uic-des) on CodePen.
CSS Media Queries (Desktop First Example)
CSS example:@media (max-width: 768px) {
h1 { font-size: 100px; }
}
@media (max-width: 360px ) {
h1 { font-size:50px; }
}
Recources
Read the article about CSS Basics carefully.
Also read this article about Media Queries (define screen sizes where style changes happen).
This PDF I prepared will help you during this assignment. .
Submitting Files
All together there should be six compositions as PDF files and one of them coded (HTML + CSS).
Further Readings (CSS Basics)
Download and read this PDF with an excerpt about CSS Basics from the book "HTML & CSS – design and build websites").