Styling with CSS
Day 6–7 Styling the web with CSS
Cascading Style Sheets(CSS) is a style sheet language used to describing the presentation of a document written in a markup language.
CSS was first proposed in 1994. The official recommendation was in 1996.
Subsequently several versions were recoomended and officiated for styling the web. The current version of CSS is 3.0
CSS3.0 modules like Selectors, Color, MediaQueries, UI, FlexBox are useful for styling the web.
Example of styling a markup file
<div style=”margin:5px;”>
CSS is awesome
</div>\
Three ways to style a html doc
— Inline
<div style=”margin:5px; color:grey;”>
CSS is awesome
</div>\
— Internal
<head>
div{
color:grey;
margin:5px;
}
</head>
— External
<link rel=”stylesheet” href=”Stylesheet.css”>
Create a file named Stylesheet.css and write your styling inside it
CSS Syntax Selectors
It is used to specify the particualr element to apply css effects to
the name of the element or tag name
<div> </div> Div tag
div{
}
the value of the ID attribute prefixed with #
<p id=”intro”> Introducing myself </p>
#intro{
}
the value of the class attribute prefixed with .
<p class=”intro”> Introducing myself </p>
.intro{
}
CSS can be applied to group of elements
h2, h4, h3, p{
//styles here
}
CSS styling codes have priority
Advanced CSS Syntax
@media screen and (min-width: 480px){
body{
background-color:green;
}
}
Browser support of css syntax caniuse.com is good place to know the browsers that support css styling
Just like we saw in HTML5 there are various ways to create css files
***you can write CSS from scratch
***By using CSS Libraries
There are a lot css libraries around and most of them are free.
Popular CSS libraries: Bootstrap, materialize, font-awesome, Ionic, Hamburger.css
To get bootstrap in your html file point to thier cdn library via a url
***Writing CSS codes through preprocessors
CSS Preprocessors: is framework that is used to create css codes for example LESS or SASS — Then compiled to regular css
CSS is interpreted by the web browser
CSS media queries modules enable desigining for responsible view on all platforms
@AlemsBaja
. #150DaysOfALC4 #ALCwithGoogle #GrowWithGoogle @Andela_Nigeria @AzureBarry @Andela @pluralsight @googleafrica @auwalms @daveed_kz @Andela @pluralsight
