Tips for beginners on determining the best placement for CSS properties on a webpage

Question

Tips for beginners on determining the best placement for CSS properties on a webpage

As a newcomer to CSS, I have encountered some issues when working with properties in different sections of code. For example:

P1: Please review the implementation of #menu and #menu a. The code can be found here.

P2: Also, take a look at #menu a specifically. You can find the corresponding code here.

I have noticed that applying properties such as float: right, position: relative, among others, seems to yield similar results whether placed within #menu{ } or #menu a{ }...

Now I'm struggling to determine the appropriate placement for these properties. Can someone provide me with some basic guidelines on when and where to apply them correctly? :)

html css web typesetting

Answer 1

Answer №1

When looking at your example above, it is important to remember to specifically target the anchor tag if you want it to function as a button.

If you choose to apply those styles to the div instead, don't forget to include display: block; for the anchor element to ensure it works properly.

It's best practice to always apply CSS directly to the element you are aiming to style.

Answer 2

When looking at your example above, it is important to remember to specifically target the anchor tag if you want it to function as a button.

If you choose to apply those styles to the div instead, don't forget to include display: block; for the anchor element to ensure it works properly.

It's best practice to always apply CSS directly to the element you are aiming to style.

Answer 3

Answer №2

Check out this simplified version of your code, designed to help beginners get comfortable with CSS through best practices...

body { 
    font-family: 'myriad pro', helvetica, sans-serif;
    color: #444;
}
a {
    color: #444;
    text-decoration: none;
}
#header {
    float: left;
    width: 96%;/*if you use box-sizing you can put 100% */
    padding: 2%;
}
#logo {
    float: left;
}
#logo h1 {
    margin: 0;
}
#logo h1 span {
    font-weight: normal;
}
#menu {
    float: right;
    margin: 0;
    list-style: none;
}
#menu a {
    border-radius: 25px;
    display: block;
    border: solid 2px #444;
    padding: 5px 20px;
    line-height: 24px;
}
#menu a:hover {
   background: #444;
   color: #fff;
}

<div id="header">
    <div id="logo">
        <h1><span>d</span>tech</h1>
    </div>
    <ul id="menu">
        <li><a href="#"><span>Get in touch</span></a></li>
    </ul>
</div>

Answer 4

Check out this simplified version of your code, designed to help beginners get comfortable with CSS through best practices...

body { 
    font-family: 'myriad pro', helvetica, sans-serif;
    color: #444;
}
a {
    color: #444;
    text-decoration: none;
}
#header {
    float: left;
    width: 96%;/*if you use box-sizing you can put 100% */
    padding: 2%;
}
#logo {
    float: left;
}
#logo h1 {
    margin: 0;
}
#logo h1 span {
    font-weight: normal;
}
#menu {
    float: right;
    margin: 0;
    list-style: none;
}
#menu a {
    border-radius: 25px;
    display: block;
    border: solid 2px #444;
    padding: 5px 20px;
    line-height: 24px;
}
#menu a:hover {
   background: #444;
   color: #fff;
}

<div id="header">
    <div id="logo">
        <h1><span>d</span>tech</h1>
    </div>
    <ul id="menu">
        <li><a href="#"><span>Get in touch</span></a></li>
    </ul>
</div>

Tips for beginners on determining the best placement for CSS properties on a webpage

Answer №1

Answer №2

Similar questions

How can I center a <a> vertically within a list that has varying heights?

Issue with a child element that is malfunctioning because of the parent element

Unseen components and columns with Bootstrap 4

Tips for maintaining an open side menu

Distinguishing $(document).width() and $("html").width() in jQuery on Internet Explorer 11

Adding external stylesheets or libraries in Express is a simple process that can greatly

What is the proper way to request permission for allowing others to access the mailto function?

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

Special Bootstrap's hamburger menu

Instructions for adding a unique custom external CSS link, such as Bootstrap CSS, to a specific REACT component

Switching the default browser for npm live-server

Integrate Vue.js with Laravel

Attempting to align three sections horizontally

Waiting for response in AngularJS Controller and setting callback

Develop a real-time streaming service using AngularJS

Traversing snapshots

Ways to optimize the spacing between the menu bar and widgets

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

Center text within a span element

Components from Bower are currently not available