Channeling Your Inner Dev
"If you like CSS, you're probably a Front End Dev." It's a phrase that's been floating around campus a lot since delving into Full Stack frameworks like Ruby on Rails.
As I experiment with new technologies, I discover more about the type of Developer I want to be. It's doubtless one of the most exhilarating and daunting aspects of being a student of Tech. As a curious Developer who deeply cares about user experience, I decided to "div" into a little CSS myself.
The Project
Turns out, you can whip up a pretty nifty static site with some vanilla HTML and CSS. The following example was made with a single index.html and style.css file. I thought it might be fun to make a shout out to an old site some of you may remember:
Setup
Set up an index.html file like you would with any other project.
Create a style.css file in the same directory. In order to link the CSS stylesheet, you'll need to link to it via link tag in the header section your index.html file (line 7 below).
As with all great amigos, your HTML will now listen and respond to the styles in your CSS file.
Organize HTML with Divs
In index.html, you'll be essentially telling your browser what info you want to be displayed. Sometimes web pages display a lot of information, and if we don't keep it organized it will be nearly impossible for your CSS to accurately identify where each HTML element should live, what it should look like and even what it should do.
Enter the div tag. Divs look like this: <div></div>. They're essentially containers for sections of HTML code you want to live together and behave similarly. We often nest divs, so child divs (divs inside other divs) can inherit qualities from outer parent divs but also be assigned unique qualities.
Check out lines 13-15. I have a lot of unique sidebar content, but I wanted all the elements in the sidebar to be contained in the same area. So, I nested the divs together.
Selectors & Specificity
Inside those div tags above, you'll notice I've added class='sidebar' and id='sidebar_content'. The style.css file will have corresponding syntax, .sidebar and #sidebar-content. These are knows as selectors. They're the way your CSS tells your HTML which pieces of information to style.
Selecters allow us to get nit-picky. If I want to select all the images in the sidebar, I can use .sidebar img. Pretty cool. But what if I want to select just a specific element (image, paragraph, list item, etc.) in the sidebar section? Selectors follow a rule of Specificity, meaning certain types of tags carry a higher weight than others. Chained together Selectors combine scores and the highest Specificity score wins.
Specificity is calculated like this:
- Elements (
<h1>, <p>, <img>, etc.): 1 point - Classes (signified with a
.): 10 points - IDs (signified with a
#): 100 points
Note that the universal * selects everything regardless of score. We try to use it rarely.
Let's take a look at an example:
Can you calculate the Specificities? Since the .hero-text Class selector is worth 10 points and the h3 Element selector is worth 1, the .hero-text h3 selector (11 points) gets specific styling unique from anything else in the .hero-text div. For additional practice, W3 Schools has some great info.
And I Don't Even Need JS?
CSS Selectors allow us to get pretty tricky. We can use Selectors called Pseudo Classes that tell our HTML when to make an element look a certain way. We can specify actions like :visited, :hover, :active, :lang and more. Take the hovers and clicks we saw on the buttons and links. By using the following selectors, our CSS is able to tell our HTML to change color or even background on hover and on click.
Using Pseudo Classes, I'm even able to get the images in the blog content to expand when my mouse hovers over it.
Conclusion
For anyone wondering whether or not Front End Web Development is their cup of tea, I suggest taking a day to dive into a personal CSS project.
Web design is creative, artistic and fun. It can also be very tricky and frustrating. After struggling with CSS on my first project, I gained a huge appreciation for great-looking web apps. I feel a sense of responsibility to make the internet look clean and interesting, and operate smoothly. I think it's likely you will too.
Top comments (0)