Part 1
Returning to the DCI Web Conference site, let's add some CSS to make the home page
- Open the practice site in VSCode: Open VSCode
- Open a tab so you can preview your site as you work: View Your Practice Site
- At the top of your
style.css
file, let's set the default box sizing to account for borders and padding. The code should look like this:* { box-sizing: border-box; }
The * selector applies this setting to every possible thing that can be selected.
- In CSS, add a selector for a class called container that will apply some default margins, padding, and width to blocks that contain sets of content. The selector should set the following properties:
margin
of 0 on the top & bottom and auto on the left & rightpadding
of 1.75em on the left and right onlywidth
of 95%
- In your index.html file, add a
class
attribute with the value container to the body'sheader
, all foursection
elements, and thefooter
.
Remember that there can only be one
class
attribute per opening tag. Adding a second class requires you to separate class names within a single attribute. For example:<section id="speakers" class="conference-info container">
- Go through your other HTML files (speakers, schedule, venue, register) and apply the same
class
attribute to theheader
andfooter
elements. - Back in CSS, create a selector for all
h3
andp
elements that has amargin
on the bottom of 1.5em. - Add two more selectors in CSS for a class of button and a class of button-alt. .button should include:
border-radius
of 4pxdisplay
of inline-blockmargin
on all sides of 0
.button-alt should include:
border
on all sides of 1px width, solid style, and #dfe2e5 colorpadding
of 10px on the top & bottom and 30px on the left & right
- In HTML, add the values button and button-alt to the existing
class
attribute for the link labelled "Register Now". - Add some extra padding to the introductory section in CSS. Select the
id
with the value introduction and set itspadding
to:- 22px on top
- 80px on the left & right
- 66px on the bottom
If you entered everything correctly, your HTML and CSS files should look like this:
And your output should look like this:
Part 2
Having done some initial box model setup, let's further refine the box model and begin to position content to make the page's layout more interesting.
In the index.html file:
- Add a
class
attribute with the value siteheader to the body'sheader
. - Add a
class
attribute with the value sitefooter to the body'sfooter
. - Add a new
div
element with aclass
attribute of logo to the top of the body'sheader
that contains a hyperlink to /index.html. The text of the link should read "Future DCI Web Conference Logo". - Add a
div
element around the header'sh1
,h2
, andnav
elements with aclass
attribute of titlemenu. - Add a
class
attribute to theul
in both the body'sheader
andfooter
with the value sitemenu. - To the first
section
element, add aclass
value of clearfix. - In the first
seection
element, above itsheader
, add anaside
element that has aclass
with the value quote. Then, within theaside
tags, add the following HTML:<p>"Last year was a blast! I can't wait to see this year's sessions." — A Happy Attendee</p>
- Surrounding all three of following
section
elements (ids of "speakers", "schedule" and "venue"), add adiv
element with aclass
of container. - Finally, from the three
section
elements in the previous step, remove the value container from theirclass
attributes.
Your HTML should now look like this:
In the style.css file:
- Select the
body
and assign it amargin
of 0 on all sides. - Make the
class
of siteheader fixed to the top left of the screen and 150px tall. - Add the following properties to the
.conference-info
selector:display
set to inline-blockvertical-align
set to topwidth
of 32.5%padding
of 1em only on the left and rightmargin
of 0 on the top/bottom and auto on the left/right
- Set the top margin for
#introduction
to 150px. - Set both the left padding and left margin of
.sitemenu
to 0. - Select all
li
elements, and make them display as inline-block and have right padding of 1em. - Select the class of logo and give it the following properties:
display
set to inline-blockvertical-align
set to middlewidth
of 15%height
of 100%border
that is 2px wide, solid, and black
- Select the class of titlemenu and give it the following properties:
display
set to inline-blockvertical-align
set to middlewidth
of 84%padding
that is 1em only on the left side
- Select both the
.siteheader
and.sitefooter
simultaneously and set their left and right margins to auto. - Then select the
.sitefooter
independently, and settext-align
to center. - Select the class of quote and give it the following properties:
float
set to rightwidth
of 250pxpadding
of 0 on the top/bottom and .5em on the left/rightborder
that is 4px wide, double, and light greymargin
of .5em on the left and 1em on the top.
- Add the following CSS to end the float created by the previous step (we'll discuss the details in a later class):
.clearfix:after { display: table; content: ""; clear: both; }
Your CSS should now look like this:
Final Output
Below is approximately how your final output should look: