tags: `CSS`

CSS CheetSheet

Looking for the most used/common attributes and what they are used for?

Look no further I might just have you covered.
Here we will break it down
Here you can just get the attributes List of CSS Attributes

Selecting an the element

There are 3 ways to select an element

Element name
Class Name
Id name

Selecting the Element Name

The element name is selected by simply using it's name in the css for example the following html code:

<body>
    <header>
        <h1>Title of page</h1>
    </header>
</body>

In the CSS you would begin to style them like the code below:

body {
    Enter styling attributes here for the body element
}
header {
    Enter styling attributes for the header element here
}
h1 {
    Enter styling attributes for the h1 element here
}

So you can see you just use the element name and then the curly brackets to start styling. We will go over what to put in those brackets shortly

Using the Class Name

When you have div elements or paragraphs you might not want them all to look the same so styling using the element name isn't ideal at this point so you would edit your html like so:

<body>
    <div>
        <p>Lets learn about me</p>
    </div>
    <div class="about">
        <p>some random text here</p>
        <p class="quote">Fun quote text here</p>
    </div>
</body>

Here we have 2 div tags 1 with a class name and 1 with out and 3 p tags 2 with out a class name and 1 with. If we wanted to style this code we could do the following

body {
    Give body a background color 
}
div {
    Give all div elements a border
}
p {
    Make all p elements font a certain color
}
.about {
    This div I want to add a background color too and change the border maybe
}
.quote {
    This p tag I want the font to be italisized.
}

So you can see that we gave the elements we called by name some styling which will apply to all elements with that name, but we also use the class name to change or add additional styling attributes to just those elements with those class names. And we call the class name with a . before it's name that was put in "" in the html.
** You can reuse the class names over as many times you want in the html and every element with that class name will have the same styling that you gave it.

Using the id name

This is the least recomended and can only be used once per document. This will also take priority over other styling so use sparingly. Typically id's in html are used for javascript functions or to point to a link that is internal to the same document…like further down the page. However you can use the id for a link and css like so:

<body>
    <nav>
        <a href='#more'>Read more</a>
        <a href='index.html'>Home Page</a>
    </nav>
        <div>
        <p>Lets learn about me</p>
    </div>
    <div class="about">
        <p>some random text here</p>
        <p class="quote">Fun quote text here</p>
    </div>
    <div id='more'>
        <p>Now lets learn even more about me</p>
    </div>
</body>

Here we see we have 2 links. the 1st link location is #more which points to the id more in the last div. So when that link is clicked the users browser will drop down to that div. But say we also want to make sure that that div also has a uniqe look to it. Well we would do the following:

body {
    Give body a background color 
}
div {
    Give all div elements a border
}
p {
    Make all p elements font a certain color
}
.about {
    This div I want to add a background color too and change the border maybe
}
.quote {
    This p tag I want the font to be italisized.
}
#more {
    I want this to be a different font color and background color
}

Here we added the #more to our css and it will take the attributes we tell it and apply them to that p tag that had the id of more.

Change colors

So now you know how to call the element you want to style. Lets change colors

Background Color

Both of the following will change the selected elements background color.

.container {
    background-color: blue;
}
nav {
    background-color: #0000ff;
}

For the class of container we used the actual name of blue but for the element nav we used it's hex code

Font color

So now we can change the background color lets change the font color

.container {
    color: white;
}
nav {
    color: #ffffff
}

Again like the background color you can use the name of the color or the hex code.

So background-color changes the background-color and color changes the font.

tags: CSS

CSS CheetSheet

Selecting an the element

Selecting the Element Name

Using the Class Name

Using the id name

Change colors

Background Color

Font color

Read more

August/September 2023 Web Fundamentals Main Notebook

June/July 20223 Web Fundamentals Cohort Notebook

JS Codepens

Resources and Links

tags: `CSS`