About two weeks ago, I was still in the bronze age of frontend web programming. I was simply able to render information onto an HTML page using RAILS. Without my partner’s assistance and his expertise, our HTML project page would have been painted with layers of text killing all our visitors with sheer boredom. This week I finally discovered CSS and I felt like a caveman that had discovered fire.
I would like to share some of my simple experiences with utilizing CSS for the first time.
The first lesson that I learned about CSS was adding a picture to your HTML page, which can be done by linking to an image URL per the code below:
body {
background:url('https://img1.mashed.com/img/uploads/2017/02/coke.jpg');
background-repeat: no-repeat;
background-size: cover;
}Want to read this story later? Save it in Journal.
With some luck, the picture of Coke should render as the background of an HTML webpage. The below is a picture of my HTML page (so far, so good).
The other two lines of code included in the code-box above serves to stop my picture from repeating itself across the page in the event that it is smaller than the screen size and cover the page entirely.
My second lesson was setting the font size for the whole page. By setting the value of the font-size inside the HTML with open/close brackets, we can set the font for the entire page. The code is as per below:
html{
font-size: 16px;
}My third lesson took me quite a bit of time to learn. I was (still am) just a low-level googler and I was unable to quickly find how to render a background image that was already saved into my computer onto the HTML page. I took some time rummaging though Al Gore’s internet and realized I just had to insert a relative path into the URL parentheses of the background variable in CSS. Using the code below, I was able to render some McNuggets as the background for one of my elements on the HTML page.
.header h1{
font-size: 5rem;
color:white;
background: url(‘nuggets.png’);
background-repeat: no-repeat;
background-size: auto;
width: 500px;During the journey of rendering some Chicken Nuggets, I also learned that I can set the width of the element and the color of the font inside the HTML element. I would like to think the process of searching for what we want to know will bring additional information of what we are able to do along with it. As we search for more and more answers, we will have more tools to answer the inevitable questions that come with knowledge.
I hope to learn more CSS as I continue to walk down this coding path. Cheers for reading this far! Please enjoy a video of the CEO of Pied Piper singing about McNuggets
Best Regards,
James Wu
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
