Adding CSS to HTML Documents

While my initial foray into HTML5 was relatively smooth, I found out this week that CSS is a whole different beast. CSS allows you to apply style sheets to HTML webpages in order to cut down on the amount of HTML tags you have to create and also to allow you to carry over style sheets from one webpage to another (e.g., if you are building a website with multiple pages and want them all to be formatted in the same style).

My project involved created a mock web-based invitation for a Diversity, Equity, and Inclusion training event. The invitation had to feature the CSS box format, a heading describing the event, different text colors, bold or italicized text, and a link to my school email address. Seems easy enough, right?

I began by starting a basic HTML document with head, title, body, and paragraph elements. I then began working on my box model in CSS. In order to start a CSS style sheet, designers must use <style> followed by the CSS elements they want to use. For example, I wanted to set a light blue background color and use Palatino, a web-safe font, for my invitation, so I used the code below after <style>.

body{

background-color:#E9EFF3;

font-family:Palatino;

}

I then uploaded the images I wanted to use - one that said "You're Invited" and another that represented the core concepts of the training (diversity, equity, and inclusion). I wanted my header and my box model to match the blue in the "You're Invited" image, so I used a Color Picker website to match the colors. I found out that the color was Calypso blue (RGB 44, 104, 140). I specified this as the color for my invitation heading <h1> in the CSS style code. You can see that I also specified a font type and size and text alignment for this header in CSS as well.

h1{

color:rgb(44, 104, 140);

font-family:Palatino;

font-size:60px;

text-align:center;

}

It was now time to create my CSS box model. I began with the code used on W3schools.com's CSS Box Model tutorial and adapted it to my invitation. I wanted my box model to have a thin border containing the text about my training in the same Calypso color as my header. This posed a problem because I could not get the RGB code to work for the box model. So, I used the Hex code instead, but my box still was not visible. So, I did a basic Google search on why that might be. The answer came from the article "How to Create and Style Borders in CSS" by Anna Fitzgerald. What I had inadvertently done while editing my code was remove the word "solid" in the CSS border description, so my code didn't tell what type of border I wanted for my invitation and I was left borderless. Below is the code I ended up using for my box model.

div {

margin:auto;

width:90%;

border:9px solid #2C688C;

padding:12px;

background-color:white

}

As you can see, I also employed a rather different approach to my margins and width on my box model. I wanted my box to be centered and fit to any screen regardless of resolution, so I used a width equal to a percentage of the screen or page rather than using a static width in pixels, which I learned on the W3schools.com tutorial on CSS Layout. Setting the margins to auto centers the box on the screen.

I employed the same type of coding characteristics when placing my images within the box model as you can see below. The W3schools.com page on How to Center an Image was beneficial in this task.

img{

display:block;

margin-left:auto;

margin-right:auto;

max-width:100%;

height:auto;

}

I struggled a bit more with CSS than I did with basic HTML, but, in the end, I learned how to:

1. Add a CSS style sheet to an HTML document.

2. Create a box model using CSS coding.

3. Set text color, font type, font size, and text alignment using CSS.

4. Match the colors on a graphic using Color Picker.

5. Align text, images, and a box model using CSS.

6. Set the margins and alignment of box models and images to fit any screen resolution using CSS.