CSS101: First Step Into CSS (I)

This week on learning web dev, I ventured into the basics of CSS and its various components and their functions, CSS (cascading style sheet) is a style sheet language used to style a web page, design and layout of a HTML structure to make it more appealing. Just like HTML | CSS consist of components like “selectors” aimed at specifically singling out a single html property, section or the whole body to easily style without affecting other HTML property. It basically gives the HTML extra features to modify the look and user interface, making it appealing to interact with the page.

CSS is not limited to only targeting HTML elements by their types “type-selector”, but also with HTML attributes called classes and id. This attribute has a ranking order which the language decides which CSS style will be displayed, starting from the lowest:

TYPE

<h1 class:"title">hello</h1>

h1{
 color: blue;
 font-weight:bold;
}

Type-selector focuses on the HTML “h1” element to style the contents in the element.

CLASS

<h1 class:"title">hello</h1>

.title {
 color: blue;
 font-weight:bold;
}

Class-selector is associated with each element given the attribute “class” with a unique name given to each element, with this unique identity elements can be specified in the CSS style sheet and can group multiple elements to style together. They can be used multiples times throughout.

ID

<h1 id:"title">hello</h1>

#title{
 border: 2px solid;
 padding: 20px;
 font-weight: 200;
}

ID is similar to classes but more specific than class attribute, its designed for specify a single element. It's advised to limit how much of an id is used to avoid errors.

Each of these attributes have the same goal, to specify what elements to style in a code, but the disparity between each of them comes from the order of importance.

<h2 class:"headline">HELLO</h2>

h2{
 color: black;
}

.headline{
 color: red;
}

In the example above the first line of code is HTML structure with the class attribute attached to it, on the second line is a CSS style sheet with two different selectors with the “h1” as the type-selector and “.headline” as the class selector”. Normally the “type” is enough command to style the element but due to the Prescence of the class-selector the code is overwritten based on hierarchy, same as the id is also introduced to the code all other selectors will be irrelevant and overwritten based on the element that needs to be styled. it's important to style with the lowest common selector to easily override an element when necessary

Get Cyril’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

On the next concept of CSS was the pseudo-class. We have probably noticed how a link color defers when you click and return back to the link or how a form is disabled from submission due to incomplete form and how an input element or an interacts to how a user navigates over it, all are considered a pseudo-class and many more. It slightly focuses on how the page reacts to a user’s interactions with it, it also contains its various classes to target an element to style how a page responds to interaction.

Some other concepts introduced were the likes of “text-alignment” to adjust or align the content of an element vertically or horizontally,

.body{
  text-align: center;
}

“color” to change the color of an element either its foreground or background.

p{
 color: grey;
 background-color: yellow;
}

“opacity” measures how transparent an element will be from 0–1, from 1 measuring full visibility and 0 measuring complete invincibility.

.banner{
  opacity: 0.75;
}

“Background image” the ability to change the elements background to an image using the background-image property.

p{
  background-image: url(https://medium.com/"#");
}

“border” a solid line that surrounds a content in an element. It can either be solid, dotted, dashed etc.

p{
 border: 2px solid black;
}

P{
 border: 2px dotted black;
}

‘padding’ is used to generate space between the border and the element. Each side can be given a specified distance between them.

p{
 padding: 2px;
}

p{
 padding: 2px 3px 60px 11px;
}

writing a padding with only a value evenly creates a space on all sides while a value of 4 creates a space separately for each side for top, right, bottom and left.

“margin” is the space created between the contents outside of the border. Same as a padding each side can be specified separately.

p{
 margin: 30px;
}

p{
 margin: 12px 23px 1px 5px;
}

Above is a preview of the relationship between content, padding, border and margin known as the Box Model.

Some other concepts ranging from “font-family” “font-weight” “font-size” mainly manipulates either the text style, thickness or density, or size of an elements content.

.p{
 font-family: times new roman;
 font-weight: bold;
 font-size: 230px;
}